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.