Angular PrimeNG 手风琴组件

PrimeNG 是基于 Angular 框架的一个开源 UI 库，提供了丰富的组件，包括表格、表单、弹窗、下拉框等等。PrimeNG 中的手风琴组件可以快速实现一个常见的 UI 效果。

特点

• 使用简单，只需要几行代码即可完成布局和绑定数据。
• 支持响应式布局，可以自适应不同屏幕尺寸。
• 支持多种展示方式：展开/折叠、手风琴、不同样式等。

安装

需要先安装 Angular 和 PrimeNG，在项目根目录下运行以下命令：

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

安装完成后需要在根模块中引入 AccordionModule 模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule } from 'primeng/accordion';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AccordionModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

使用

在 HTML 模板中使用 p-accordion 组件：

<p-accordion>
    <p-accordionTab header="Header 1">
        Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3
    </p-accordionTab>
</p-accordion>

其中，p-accordionTab 组件是手风琴的一个单独面板。header 属性用于设置面板的标题，content 内容可以是一个 HTML 元素或者组件。可以添加多个 p-accordionTab 实现多个面板。

响应式布局

可以使用 p-accordion 的 activeIndex 属性来设置当前展开的面板索引：

<p-accordion [activeIndex]="activeIndex">
    <p-accordionTab header="Header 1">
        Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3
    </p-accordionTab>
</p-accordion>

在组件中通过 @HostListener 监听窗口大小变化，根据不同的屏幕尺寸切换展示方式：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p-accordion [activeIndex]="activeIndex">
      <p-accordionTab header="Header 1">
        Content 1
      </p-accordionTab>
      <p-accordionTab header="Header 2">
        Content 2
      </p-accordionTab>
      <p-accordionTab header="Header 3">
        Content 3
      </p-accordionTab>
    </p-accordion>
  `
})
export class AppComponent {
  activeIndex = 0;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if (window.innerWidth >= 768) {
      this.activeIndex = -1; // 展开全部面板
    } else {
      this.activeIndex = 0; // 只展开第一个面板
    }
  }
}

样式

PrimeNG 中提供了多种样式，可以通过 style 属性或者 CSS 类名来修改默认样式：

<p-accordion styleClass="accordion-style">
    <p-accordionTab header="Header 1" [selected]="true">
        Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 2">
        Content 2
    </p-accordionTab>
    <p-accordionTab header="Header 3">
        Content 3
    </p-accordionTab>
</p-accordion>

.accordion-style {
    .ui-accordion-header {
        background-color: #f2f2f2;
        color: #333;
        font-weight: bold;
        cursor: pointer;

        &:hover {
            background-color: #e6e6e6;
        }

        &.ui-accordion-header-active {
            background-color: #2196f3;
            color: #fff;

            &:hover {
                background-color: #0d8bf0;
            }
        }
    }

    .ui-accordion-content {
        background-color: #fff;
        padding: 10px;
        border: 1px solid #ccc;
    }
}

总结

PrimeNG 的手风琴组件非常适合展示大量信息的 UI 布局，使用起来非常简单，可以快速实现页面效果，支持响应式布局和多种样式自定义。