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.