Ngx-Bootstrap - đàn accordion

Accordion là một điều khiển để hiển thị các bảng có thể thu gọn và nó được sử dụng để hiển thị thông tin trong không gian hạn chế.

AccordionComponent

Hiển thị bảng nội dung có thể thu gọn để trình bày thông tin trong một lượng không gian hạn chế.

bộ chọn

• accordion

Đầu vào

• closeOthers - boolean, nếu đúng mở rộng một mục sẽ đóng tất cả các mục khác

• isAnimated - boolean, bật / tắt hoạt ảnh, mặc định: false

AccordionPanelComponent

AccordionHeading

Thay vì sử dụng thuộc tính tiêu đề trên nhóm accordion, bạn có thể sử dụng thuộc tính tiêu đề accordion trên bất kỳ phần tử nào bên trong một nhóm sẽ được sử dụng làm mẫu tiêu đề của nhóm.

bộ chọn

• accordion-nhóm, accordion-bảng điều khiển

Đầu vào

• heading - chuỗi, văn bản có thể nhấp trong tiêu đề nhóm của accordion

• isDisabled - boolean, bật / tắt nhóm đàn accordion

• isOpen- boolean, Nhóm accordion đang mở hay đóng. Thuộc tính này hỗ trợ ràng buộc hai chiều

• panelClass - string, Cung cấp khả năng sử dụng các lớp bảng theo ngữ cảnh của Bootstrap (bảng-chính, bảng-thành công, bảng-thông tin, v.v.).

Kết quả đầu ra

• isOpenChange - Phát ra khi trạng thái mở thay đổi

AccordionConfig

Dịch vụ cấu hình, cung cấp các giá trị mặc định cho AccordionComponent.

Tính chất

• closeOthers- boolean, Có nên đóng các bảng khác khi mở một bảng hay không. Mặc định: false

• isAnimated - boolean, bật / tắt hoạt ảnh

Thí dụ

Vì chúng tôi sẽ sử dụng đàn accordion, chúng tôi đã cập nhật app.module.ts để sử dụng AccordionModulenhư trong chương Thiết lập Môi trường ngx-bootstrap .

Cập nhật test.component.html để sử dụng đàn accordion.

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>

Cập nhật test.component.ts cho các biến và phương thức tương ứng.

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);
   }
}

Xây dựng và Phục vụ

Chạy lệnh sau để khởi động máy chủ góc.

ng serve

Sau khi máy chủ hoạt động. Mở http: // localhost: 4200 và xác minh kết quả sau.