Primeng Angular Accordion教程|p-accordion实例

在本教程中，我们将通过实例学习Primeng Angular accordion的基础知识。

Angular Accordion简介

Accordion是一个UI元素，在用户点击一组项目时，显示/隐藏页面上的内容部分。

ng new angular-app

Primeng也提供了Angular accordion组件 通常，accordion用于显示长的摘要内容，它将不适合在页面中显示，并在Accordion的标签下划分和分组内容。

为什么需要Accordion？

• 长的内容被分组为标签，可以在用户操作时折叠/展开。
• 它有利于用户体验，以用户体验友好的方式显示各种内容部分。
• 每个部分或标签或面板都有标题和内容
• 每个标签都可以展开或折叠/展开
• 当在不同的标签或部分之间导航时，可以应用动画来获得更好的体验。
• 所有的标签在默认情况下是水平缩放的。
• 这也可以是嵌套的，或者可以放在另一个手风琴内。

Angular primeng accordion示例

创建一个Angular应用程序

首先使用angular CLI生成器创建一个Angular应用程序。

Angular CLI是一个自动生成的工具，用于创建Angular应用程序的原型。

它创建了一个Angular应用程序，安装了所有的依赖项，并准备启动服务器。

这个UI库是作为NPM包提供的。

请使用npm install primeng命令安装primeng UI库。

Primeng以Angular模块的形式提供每个UI组件。请将AccordionModule导入你的应用程序模块中。

这是一个创建Accordion的简单例子：

以下是Angular应用模块的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AccordionModule} from 'primeng/accordion';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AccordionModule, // Accordion UI Component Support
    GrowlModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule { }

Html变化

   
  <div style="text-align:center">
   <h1>
    Primeng Angular Accordion Component Example
</h1>
</div>

<div style="text-align:center">
<p-accordion>
    <p-accordionTab header="Basic Form" >
       Basic Form
    </p-accordionTab>
    <p-accordionTab header="Additional Information">
        Additional Information
    </p-accordionTab>
    <p-accordionTab header="My Settings">
        My Settings
    </p-accordionTab>
</p-accordion>
</div>

输出是

这里有三个选项卡，点击每个选项卡就会打开。

如何在Angular中禁用accordion标签？

手风琴是默认启用的。在每个标签层都有一个禁用的属性 这里是一个禁用手风琴标签1的例子。

  <div style="text-align:center">
   <h1>
    Primeng Angular Accordion Component Disabled Example
</h1>
</div>
<p-accordion >
    <p-accordionTab [disabled]="true" header="Tab 2">
  </p-accordionTab>
    <p-accordionTab header="Tab 2">
<p>
This is Primeng accordion CONTENT of Tab2 with example
</p>
</p-accordionTab>
    <p-accordionTab header="Tab 3">
<p>
This is Primeng accordion CONTENT of Tab3 with example
</p>
 </p-accordionTab>
</p-accordion>

输出是

使用ngFor的accordion动态标签的例子

这是一个展示事物的例子

• 如何以编程方式创建一个Accordion和标签内容。
• 如何在Accordion中动态地使用ngFor

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
     private tabs: TabItem[];

     ngOnInit(): void {
        this.tabs = [{
            heading: 'header1',
     content: 'content1'

        }, {
            heading: 'header2',
     content: 'content2'
            },
      {
            heading: 'header3',
     content: 'content3'
            }]

    }

}
export class TabItem {
    heading: string;
    content: string;
}

ngfor的用法

  <div style="text-align:center">
   <h1>
    Primeng Angular Accordion Component ngFor Example
</h1>
</div>
<p-accordion >
    <p-accordionTab *ngFor="let tab of tabs" header="{{tab.heading}}">
       {{tab.content}}
    </p-accordionTab>
</p-accordion>

输出是

这个组件提供了三种预定义的样式，你可以用自定义的样式来覆盖。

下面三个样式包含了你可以在组件的css或scss文件中覆盖的样式。

这是一个手风琴的所有标签的容器样式。

• ui-accordion-header这是为手风琴的标题样式。

• ui-accordion-content这是用于手风琴标题内容的样式。

其他功能

• 展开和关闭 所有的onClose和onOpen事件都被用来展开和关闭手风琴的标签。

• lazy 这个属性是在手风琴上配置的，而不是在标签级别。这使得加载内容可以懒惰或在加载时进行。

• 自定义标题

自定义标题也可以使用p-header ta在手风琴标签中设置。

• 多重 这是在容器级别配置的。一旦启用，所有的标签都会主动创建和加载。