Ngx-Bootstrap - аккордеон

Аккордеон - это элемент управления для отображения складных панелей, который используется для отображения информации в ограниченном пространстве.

Аккордеонный компонент

Отображает складные панели содержимого для представления информации в ограниченном пространстве.

селектор

  • accordion

Входы

  • closeOthers - логическое, если true, раскрытие одного элемента закроет все остальные

  • isAnimated - логическое, включить / выключить анимацию, по умолчанию: false

AccordionPanelComponent

АккордеонГолова

Вместо использования атрибута заголовка в группе-гармошке вы можете использовать атрибут заголовка-гармошки для любого элемента внутри группы, который будет использоваться в качестве шаблона заголовка группы.

селектор

  • аккордеон-группа, аккордеон-панно

Входы

  • heading - строка, интерактивный текст в заголовке группы аккордеона

  • isDisabled - логическое, включает / отключает группу аккордеона

  • isOpen- boolean, Открыта или закрыта группа аккордеона. Это свойство поддерживает двустороннюю привязку

  • panelClass - string, Предоставляет возможность использовать классы контекстной панели Bootstrap (первичная панель, успешная панель, информация о панели и т. Д.).

Выходы

  • isOpenChange - Излучает при изменении открытого состояния

AccordionConfig

Служба конфигурации предоставляет значения по умолчанию для AccordionComponent.

Свойства

  • closeOthers- boolean, должны ли быть закрыты другие панели при открытии панели. По умолчанию: 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

После того, как сервер запущен и работает. Откройте http: // localhost: 4200 и проверьте следующий вывод.