Ngx-Bootstrap - 手风琴

Accordion 是一个显示可折叠面板的控件，用于在有限的空间内显示信息。

手风琴组件

显示可折叠的内容面板，以便在有限的空间内呈现信息。

选择器

  • 手风琴

输入

  • closeOthers - 布尔值，如果为 true，则展开一项将关闭所有其他项

  • isAnimated - 布尔值，打开/关闭动画，默认值：false

AccordionPanel组件

手风琴标题

您可以在组内任何将用作组标题模板的元素上使用 Accordion-heading 属性，而不是在折叠组上使用标题属性。

选择器

  • 手风琴组、手风琴面板

输入

  • header - 字符串，手风琴组标题中的可点击文本

  • isDisabled - 布尔值，启用/禁用手风琴组

  • isOpen - 布尔值，手风琴组是打开还是关闭。该属性支持双向绑定

  • panelClass - 字符串，提供使用 Bootstrap 上下文面板类（面板主、面板成功、面板信息等）的能力。

输出

  • isOpenChange - 打开状态更改时发出

手风琴配置

配置服务，为 AccordionComponent 提供默认值。

特性

  • closeOthers - 布尔值，打开面板时是否应关闭其他面板。默认值：假

  • isAnimated - 布尔值，打开/关闭动画

例子

由于我们将使用 Accordion，因此我们更新了 app.module.ts 以使用AccordionModule，如ngx-bootstrap 环境设置章节中所示。

更新 test.component.html 以使用手风琴。

测试.component.html

<accordion>
   <accordion-group heading="Open By Default" [isOpen]="open">
      <p>Open By Default</p>
   </accordion-group>
   <accordion-group heading="Disabled" [isDisabled]="disabled">
      <p>Disabled</p>
   </accordion-group>
   <accordion-group heading="with isOpenChange" (isOpenChange)="log($event)">
      <p>Open Event</p>
   </accordion-group>
</accordion>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   open: boolean = true;
   disabled: boolean = true;
   constructor() { }
   ngOnInit(): void {
   }
   log(isOpened: boolean){
      console.log(isOpened);
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

手风琴