Ngx-Bootstrap - Akkordeon

Akkordeon ist ein Steuerelement zum Anzeigen von zusammenklappbaren Bedienfeldern und wird zum Anzeigen von Informationen auf engstem Raum verwendet.

Akkordeonkomponente

Zeigt zusammenklappbare Inhaltsfenster an, um Informationen auf engstem Raum darzustellen.

Wähler

accordion

Eingänge

closeOthers - Boolescher Wert, wenn das wahre Erweitern eines Elements alle anderen Elemente schließt
isAnimated - Boolescher Wert, Animation ein- / ausschalten, Standard: false

AccordionPanelComponent

AkkordeonKopf

Anstatt das Überschriftenattribut für die Akkordeongruppe zu verwenden, können Sie ein Akkordeonüberschriftenattribut für jedes Element innerhalb einer Gruppe verwenden, das als Kopfzeilenvorlage der Gruppe verwendet wird.

Wähler

Akkordeon-Gruppe, Akkordeon-Panel

Eingänge

heading - Zeichenfolge, anklickbarer Text in der Gruppenüberschrift des Akkordeons
isDisabled - Boolescher Wert, aktiviert / deaktiviert die Akkordeongruppe
isOpen- Boolescher Wert, Ist die Akkordeongruppe offen oder geschlossen? Diese Eigenschaft unterstützt die bidirektionale Bindung
panelClass - string, Bietet die Möglichkeit, die kontextbezogenen Panel-Klassen von Bootstrap zu verwenden (Panel-Primär, Panel-Erfolg, Panel-Informationen usw.).

Ausgänge

isOpenChange - Wird ausgegeben, wenn sich der geöffnete Status ändert

AccordionConfig

Der Konfigurationsdienst bietet Standardwerte für die AccordionComponent.

Eigenschaften

closeOthers- boolean, Gibt an, ob die anderen Bedienfelder beim Öffnen eines Bedienfelds geschlossen werden sollen. Standard: false
isAnimated - Boolesche, Animation ein- / ausschalten

Beispiel

Da wir Akkordeon verwenden werden, haben wir app.module.ts für die Verwendung aktualisiert AccordionModulewie im Kapitel Setup der ngx-bootstrap-Umgebung .

Aktualisieren Sie test.component.html, um das Akkordeon zu verwenden.

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>

Aktualisieren Sie test.component.ts für entsprechende Variablen und Methoden.

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);
   }
}

Bauen und dienen

Führen Sie den folgenden Befehl aus, um den Winkelserver zu starten.

ng serve

Sobald der Server betriebsbereit ist. Öffnen Sie http: // localhost: 4200 und überprüfen Sie die folgende Ausgabe.