Ngx-Bootstrap - acordeón

Accordion es un control para mostrar paneles plegables y se utiliza para mostrar información en un espacio limitado.

AcordeónComponente

Muestra paneles de contenido plegables para presentar información en un espacio limitado.

selector

  • accordion

Entradas

  • closeOthers - booleano, si es verdadero, expandir un elemento cerrará todos los demás

  • isAnimated - booleano, activar / desactivar la animación, predeterminado: falso

AccordionPanelComponente

AcordeónEncabezado

En lugar de usar el atributo de encabezado en el grupo de acordeón, puede usar un atributo de encabezado de acordeón en cualquier elemento dentro de un grupo que se usará como plantilla de encabezado del grupo.

selector

  • acordeón-grupo, acordeón-panel

Entradas

  • heading - cadena, texto en el que se puede hacer clic en el encabezado del grupo del acordeón

  • isDisabled - booleano, habilita / deshabilita el grupo de acordeón

  • isOpen- booleano, es el grupo de acordeón abierto o cerrado. Esta propiedad admite el enlace bidireccional

  • panelClass - cadena, proporciona la capacidad de usar las clases de paneles contextuales de Bootstrap (panel-primary, panel-success, panel-info, etc ...).

Salidas

  • isOpenChange - Emite cuando cambia el estado abierto

AcordeónConfig

Servicio de configuración, proporciona valores predeterminados para AccordionComponent.

Propiedades

  • closeOthers- booleano, si los otros paneles deben cerrarse cuando se abre un panel. Predeterminado: falso

  • isAnimated - booleano, activar / desactivar la animación

Ejemplo

Como vamos a usar acordeón, hemos actualizado app.module.ts para usar AccordionModulecomo en el capítulo de configuración del entorno ngx-bootstrap .

Actualice test.component.html para usar el acordeón.

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>

Actualice test.component.ts para las variables y métodos correspondientes.

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

Construir y servir

Ejecute el siguiente comando para iniciar el servidor angular.

ng serve

Una vez que el servidor está en funcionamiento. Abra http: // localhost: 4200 y verifique el siguiente resultado.