Angular PrimeNG Accordion Multiple

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。在这篇文章中，我们将看到如何在Angular PrimeNG中使用Accordion Multiple，同时了解代码中会用到的属性及其语法。

Accordion组件是用来在标签中显示一部分自定义内容的。默认情况下，每次只允许有一个标签处于活动状态。启用multiple=true属性可以改变浏览器的正常行为，即允许多个标签同时激活。

语法:

<p-accordion [multiple]="true">
    <p-accordionTab header="...">
           .....
    </p-accordionTab>
    .......
</p-accordion>

Angular PrimeNG Accordion多个属性：

• header。它指定了标签的标题。它是字符串数据类型，默认值为空。
• multiple：它指定是否可以同时激活多个标签。它是布尔数据类型，默认值是false。

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

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

ng new appname

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

cd appname

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

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

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

• 运行该应用程序的步骤。运行下面的命令，看看输出情况。

ng serve --open

例子1：下面的例子说明了Angular PrimeNG Accordion Multiple.的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Accordion Multiple</h5>
<p-accordion [multiple]="true">
    <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-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: 'app-root',
    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 { }

输出:

例子2：下面是另一个例子，说明了Angular PrimeNG Accordion Multiple的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Accordion Multiple</h5>
<p-accordion [multiple]="true">
    <p-accordionTab header=
    "Complete Interview Preparation">
        <img src=
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-thumbnail.png?v=19265"
            height="300" 
            width="350" 
            alt="gfg" />
    </p-accordionTab>
    <p-accordionTab header="System Design">
        <img src=
"https://media.geeksforgeeks.org/img-practice/banner/system-design-live-thumbnail.png?v=19265"
            height="300"
            width="350"
            alt="gfg" />
    </p-accordionTab>
    <p-accordionTab header="C++ STL Self-Paced">
        <img src=
"https://media.geeksforgeeks.org/img-practice/banner/cpp-stl-thumbnail.png?v=19265" 
            height="300"
            width="350"
            alt="gfg" />
    </p-accordionTab>
</p-accordion>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    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 { }

输出: