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 и проверьте следующий вывод.