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.