Ngx-Bootstrap - acordeão
Acordeão é um controle para exibir painéis retráteis e é usado para exibir informações em um espaço limitado.
AccordionComponent
Exibe painéis de conteúdo recolhíveis para apresentar informações em uma quantidade limitada de espaço.
seletor
accordion
Entradas
closeOthers - booleano, se for verdadeiro, expandir um item fechará todos os outros
isAnimated - booleano, liga / desliga animação, padrão: falso
AccordionPanelComponent
AccordionHeading
Em vez de usar o atributo de título no grupo de acordeão, você pode usar um atributo de título de acordeão em qualquer elemento dentro de um grupo que será usado como modelo de cabeçalho do grupo.
seletor
grupo acordeão, painel acordeão
Entradas
heading - string, texto clicável no cabeçalho do grupo do acordeão
isDisabled - booleano, ativa / desativa o grupo de acordeão
isOpen- booleano, é o grupo acordeão aberto ou fechado. Esta propriedade suporta ligação bidirecional
panelClass - string, Fornece a capacidade de usar as classes de painel contextual do Bootstrap (painel primário, painel de sucesso, painel de informações, etc ...).
Saídas
isOpenChange - Emite quando o estado aberto muda
AccordionConfig
Serviço de configuração, fornece valores padrão para o AccordionComponent.
Propriedades
closeOthers- booleano, se os outros painéis devem ser fechados quando um painel é aberto. Padrão: falso
isAnimated - booleano, liga / desliga animação
Exemplo
Como vamos usar o acordeão, atualizamos app.module.ts para usar AccordionModulecomo no capítulo Configuração de Ambiente do ngx-bootstrap .
Atualize test.component.html para usar o acordeão.
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>
Atualize test.component.ts para variáveis e métodos correspondentes.
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 e servir
Execute o seguinte comando para iniciar o servidor angular.
ng serve
Assim que o servidor estiver instalado e funcionando. Abra http: // localhost: 4200 e verifique a seguinte saída.