Angular PrimeNG Accordion组件

Angular PrimeNG是一个开源框架，它拥有丰富的原生Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Accordion组件。我们还将学习属性、造型以及在代码中使用的语法。

Accordion组件：它用于在标签中显示一部分自定义的内容。

手风琴的属性：

multiple: 它指定是否可以同时激活多个标签。它是布尔数据类型，默认值是false。
style。它是组件的内联风格。它的数据类型为字符串，默认值为空。
styleClass：它是组件的风格类别。它的数据类型是字符串，默认值是false。
activeIndex。它是活动标签的索引。它接受任何数据类型，默认值为空。
expandIcon: 它是一个折叠的标签的图标。它是字符串数据类型，默认值是pi pi-fw pi-chevron-right。
collapseIcon: 它是一个展开的标签的图标。它是字符串数据类型，默认值是pi pi-fw pi-chevron-down。

AccordionTab的属性：

header : 它指定了标签的标题。它是字符串数据类型，默认值为空。
selected : 它定义了标签是否被激活。它是布尔数据类型，默认值是false。
disabled : 它定义了标签是否可以被选择。它是布尔数据类型，默认值是false。
transitionOptions。动画的转场选项。它是字符串数据类型，默认值是400ms cubic-bezier（0.86, 0, 0.07, 1）。
cache : 它指定一个懒惰加载的面板是否应该避免在重新选择时被再次加载。它是布尔数据类型，默认值为true。

Event:

onClose。它是一个回调，通过点击标题来触发。
onOpen: 它是一个回调，当标签被展开时被触发。

Styling:

p-accordion：它是容器元素。
p-accordion-header: 它是一个标签的标题。
p-accordion-content: 它是一个标签的内容。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构。它将看起来像以下。

Angular PrimeNG Accordion组件

例子1：这是一个基本的例子，说明了如何使用Accordion组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Accordion component</h5>
<p-accordion>
    <p-accordionTab header="Angular PrimeNG" [selected]="true">
        <p>
            Angular PrimeNG is a framework used with angular 
            to create components with great styling and this 
            framework is very easy to use and is used to make
            responsive websites.
        </p>
    </p-accordionTab>
    <p-accordionTab header="Angular PrimeNG">
        <p>
            Angular PrimeNG is a framework used with angular 
            to create components with great styling and this 
            framework is very easy to use and is used to make
            responsive websites.
        </p>
    </p-accordionTab>
    <p-accordionTab header="Angular PrimeNG">
        <p>
            Angular PrimeNG is a framework used with angular 
            to create components with great styling and this 
            framework is very easy to use and is used to make
            responsive websites.
        </p>
    </p-accordionTab>
</p-accordion>

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { AccordionModule } from "primeng/accordion";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            AccordionModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG Accordion组件

例子2：在这个例子中，我们将知道如何在Accordion组件中使用multiple属性。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Accordion component</h5>
<p-accordion multiple="true">
  <p-accordionTab header="Angular PrimeNG" [selected]="true">
    <p>
      Angular PrimeNG is a framework used with angular 
      to create components with great styling and this 
      framework is very easy to use and is used to make
      responsive websites.
    </p>
  </p-accordionTab>
  
  <p-accordionTab header="Angular PrimeNG">
    <p>
      Angular PrimeNG is a framework used with angular 
      to create components with great styling and this 
      framework is very easy to use and is used to make
      responsive websites.
    </p>
  </p-accordionTab>
  
  <p-accordionTab header="Angular PrimeNG">
    <p>
      Angular PrimeNG is a framework used with angular 
      to create components with great styling and this 
      framework is very easy to use and is used to make
      responsive websites.
    </p>
  </p-accordionTab>
</p-accordion>

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { AccordionModule } from "primeng/accordion";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            AccordionModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG Accordion组件