Ngx-Bootstrap - accordéon

Accordion est un contrôle pour afficher des panneaux pliables et il est utilisé pour afficher des informations dans un espace limité.

AccordéonComposant

Affiche des panneaux de contenu pliables pour présenter des informations dans un espace limité.

sélecteur

• accordion

Contributions

• closeOthers - booléen, si vrai, l'expansion d'un élément fermera tous les autres

• isAnimated - booléen, activer / désactiver l'animation, par défaut: false

AccordéonPanelComposant

AccordéonTête

Au lieu d'utiliser l'attribut d'en-tête sur le groupe d'accordéon, vous pouvez utiliser un attribut d'en-tête d'accordéon sur n'importe quel élément à l'intérieur d'un groupe qui sera utilisé comme modèle d'en-tête du groupe.

sélecteur

• groupe d'accordéon, panneau d'accordéon

Contributions

• heading - chaîne, texte cliquable dans l'en-tête de groupe d'accordéon

• isDisabled - booléen, active / désactive le groupe d'accordéon

• isOpen- booléen, est un groupe d'accordéon ouvert ou fermé. Cette propriété prend en charge la liaison bidirectionnelle

• panelClass - string, offre la possibilité d'utiliser les classes de panneaux contextuels de Bootstrap (panel-primary, panel-success, panel-info, etc ...).

Les sorties

• isOpenChange - Emet lorsque l'état ouvert change

AccordéonConfig

Service de configuration, fournit des valeurs par défaut pour AccordionComponent.

Propriétés

• closeOthers- boolean, Indique si les autres panneaux doivent être fermés lorsqu'un panneau est ouvert. Par défaut: faux

• isAnimated - booléen, activer / désactiver l'animation

Exemple

Comme nous allons utiliser l'accordéon, nous avons mis à jour app.module.ts pour utiliser AccordionModulecomme dans le chapitre Configuration de l'environnement ngx-bootstrap .

Mettez à jour test.component.html pour utiliser l'accordéon.

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>

Mettez à jour test.component.ts pour les variables et méthodes correspondantes.

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

Construire et servir

Exécutez la commande suivante pour démarrer le serveur angulaire.

ng serve

Une fois que le serveur est opérationnel. Ouvrez http: // localhost: 4200 et vérifiez la sortie suivante.