Ngx-Bootstrap - 手風琴

---

---

手風琴是一種用於顯示可摺疊面板的控制元件，它用於在有限的空間中顯示資訊。

AccordionComponent

顯示可摺疊內容面板，以便在有限的空間內呈現資訊。

選擇器

• accordion

輸入

• closeOthers − 布林值，如果為真，則展開一個專案將關閉所有其他專案

• isAnimated − 布林值，啟用/停用動畫，預設值：false

AccordionPanelComponent

AccordionHeading

無需在 accordion-group 上使用 heading 屬性，您可以在組內的任何元素上使用 accordion-heading 屬性，該元素將用作組的標題模板。

選擇器

• accordion-group, accordion-panel

輸入

• heading − 字串，手風琴組標題中的可點選文字

• isDisabled − 布林值，啟用/停用手風琴組

• isOpen − 布林值，手風琴組是開啟還是關閉。此屬性支援雙向繫結

• panelClass − 字串，提供使用 Bootstrap 上下文面板類（panel-primary、panel-success、panel-info 等...）的功能。

輸出

• isOpenChange − 開啟狀態更改時發出

AccordionConfig

配置服務，為 AccordionComponent 提供預設值。

屬性

• closeOthers − 布林值，當開啟一個面板時，是否應關閉其他面板。預設值：false

• isAnimated − 布林值，啟用/停用動畫

示例

由於我們將使用手風琴，因此我們已更新 app.module.ts 以使用AccordionModule，如ngx-bootstrap 環境設定章節所示。

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

test.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 以對應變數和方法。

test.component.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);
   }
}

構建和啟動

執行以下命令以啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200 並驗證以下輸出。