Ngx-Bootstrap - akordeon
Akordeon to element sterujący do wyświetlania składanych paneli i służy do wyświetlania informacji na ograniczonej przestrzeni.
AccordionComponent
Wyświetla zwijane panele zawartości do prezentowania informacji na ograniczonej ilości miejsca.
selektor
accordion
Wejścia
closeOthers - boolean, jeśli prawda, rozwinięcie jednego elementu spowoduje zamknięcie wszystkich pozostałych
isAnimated - boolean, włącz / wyłącz animację, domyślnie: false
AccordionPanelComponent
Akordeon Nagłówek
Zamiast używać atrybutu nagłówka w grupie harmonijki, możesz użyć atrybutu nagłówka akordeonu na dowolnym elemencie wewnątrz grupy, który będzie używany jako szablon nagłówka grupy.
selektor
akordeon-grupa, akordeon-panel
Wejścia
heading - ciąg, klikalny tekst w nagłówku grupy akordeonu
isDisabled - boolean, włącza / wyłącza grupę akordeonu
isOpen- boolean, Czy grupa akordeonowa jest otwarta czy zamknięta. Ta właściwość obsługuje powiązanie dwukierunkowe
panelClass - string, Zapewnia możliwość użycia kontekstowych klas paneli Bootstrap (panel-primary, panel-success, panel-info, itd ...).
Wyjścia
isOpenChange - Emituje, gdy zmienia się stan otwarcia
AccordionConfig
Usługa konfiguracji zawiera wartości domyślne AccordionComponent.
Nieruchomości
closeOthers- boolean, określa, czy pozostałe panele powinny być zamknięte, gdy panel jest otwarty. Domyślnie: false
isAnimated - boolean, włącz / wyłącz animację
Przykład
Ponieważ zamierzamy używać akordeonu, zaktualizowaliśmy app.module.ts do użycia AccordionModulejak w rozdziale Konfiguracja środowiska ngx-bootstrap .
Zaktualizuj test.component.html, aby używać akordeonu.
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>
Zaktualizuj test.component.ts pod kątem odpowiednich zmiennych i metod.
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);
}
}
Buduj i służ
Uruchom następujące polecenie, aby uruchomić serwer kątowy.
ng serve
Gdy serwer jest już uruchomiony. Otwórz http: // localhost: 4200 i sprawdź następujące dane wyjściowe.