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.