{{ t.pages.accordion.title }} {{ t.pages.accordion.subtitle }}

{{ t.pages.accordion.breadcrumb }}

{{ t.pages.accordion.intro }}

Descrição

O accordion organiza blocos densos de informação em seções expansíveis, reduzindo ruído visual sem perder contexto.

Recursos
  • Itens recolhidos, expandidos, desabilitados e com cabeçalho customizado.
  • Eventos de abertura por item.
  • Renderização tardia e destruição opcional do corpo.
Limitações
  • Conteúdo muito interativo exige cuidado com foco.
  • Seções longas demais ainda pedem hierarquia interna.
  • O layout não substitui navegação por rotas.
{{ t.pages.accordion.collapsedBody }} {{ t.pages.accordion.expandedBody }} {{ t.pages.accordion.disabledBody }} {{ t.pages.accordion.customBody }}
{{ accordionEventLog.isEmpty ? initialAccordionEventLog : accordionEventLog }}
API declarativa por diretivas

Esta versão mantém o markup Bootstrap acessível no DOM e expõe uma API parecida com ng-bootstrap.

Para destroyOnHide físico de verdade, use <template liAccordionBody>. O wrapper simples com <div liAccordionBody> mantém o conteúdo no DOM para casos em que a referência precisa permanecer estável.

Conteúdo básico com header e body declarativos, mantendo classes e atributos de acessibilidade.
Header customizado directive

Este conteúdo continua acessível via API, mas não reage ao clique do usuário.
{{ declarativeAccordionEventLog.isEmpty ? 'Nenhum evento da API declarativa.' : declarativeAccordionEventLog }}
liCollapse

Diretiva genérica para esconder e mostrar blocos com as classes collapse, show e collapsing.

Este bloco usa a diretiva genérica de collapse, sem depender do accordion.

{{ t.pages.accordion.intro }}

  • [allowMultipleOpen] permite manter mais de um item expandido ao mesmo tempo.
  • [flush] remove contornos extras para uma composição mais compacta.
  • [lazy] adia a renderização do corpo até a primeira abertura.
  • [destroyOnCollapse] remove o conteúdo do DOM quando o item fecha.
  • [expanded] e (expandedChange) controlam abertura por item.
<li-accordion [allowMultipleOpen]="true">
  <li-accordion-item
    [header]="'Título'"
    [expanded]="true"
    (expandedChange)="onChange($event)">
  </li-accordion-item>
</li-accordion>
<div liAccordion [closeOthers]="true" [destroyOnHide]="true" #accordion="liAccordion">
  <div liAccordionItem="first" #first="liAccordionItem" [collapsed]="false">
    <h2 liAccordionHeader>
      <button liAccordionButton>Primeiro</button>
    </h2>
    <div liAccordionCollapse>
      <template liAccordionBody>
        <div liAccordionBody>Conteúdo do primeiro item</div>
      </template>
    </div>
  </div>
</div>
<div [liCollapse]="isCollapsed">
  <div class="border rounded p-3">Conteúdo colapsável</div>
</div>