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.