Ngx-Bootstrap - fisarmonica
La fisarmonica è un controllo per visualizzare pannelli pieghevoli e viene utilizzato per visualizzare le informazioni in uno spazio limitato.
AccordionComponent
Visualizza pannelli di contenuto comprimibili per presentare le informazioni in uno spazio limitato.
selettore
accordion
Ingressi
closeOthers - booleano, se vero l'espansione di un elemento chiuderà tutti gli altri
isAnimated - booleano, attiva / disattiva l'animazione, predefinito: false
AccordionPanelComponent
AccordionHeading
Invece di utilizzare l'attributo intestazione su accordion-group, puoi utilizzare un attributo intestazione a fisarmonica su qualsiasi elemento all'interno di un gruppo che verrà utilizzato come modello di intestazione del gruppo.
selettore
fisarmonica-gruppo, fisarmonica-pannello
Ingressi
heading - stringa, testo cliccabile nell'intestazione del gruppo della fisarmonica
isDisabled - booleano, abilita / disabilita il gruppo fisarmonica
isOpen- booleano, il gruppo di fisarmoniche è aperto o chiuso. Questa proprietà supporta l'associazione a due vie
panelClass - string, Fornisce la possibilità di utilizzare le classi del pannello contestuale di Bootstrap (panel-primary, panel-success, panel-info, ecc ...).
Uscite
isOpenChange - Emette quando lo stato di apertura cambia
AccordionConfig
Servizio di configurazione, fornisce i valori predefiniti per AccordionComponent.
Proprietà
closeOthers- boolean, Indica se gli altri pannelli devono essere chiusi quando viene aperto un pannello. Predefinito: false
isAnimated - booleano, attiva / disattiva l'animazione
Esempio
Poiché utilizzeremo la fisarmonica, abbiamo aggiornato app.module.ts da utilizzare AccordionModulecome nel capitolo Configurazione dell'ambiente ngx-bootstrap .
Aggiorna test.component.html per utilizzare la fisarmonica.
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>
Aggiorna test.component.ts per le variabili e i metodi corrispondenti.
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);
}
}
Costruisci e servi
Eseguire il seguente comando per avviare il server angolare.
ng serve
Una volta che il server è attivo e funzionante. Apri http: // localhost: 4200 e verifica il seguente output.