{{ t.pages.tabs.title }} {{ t.pages.tabs.subtitle }}

{{ t.pages.tabs.breadcrumb }}

A página de tabs demonstra composição horizontal, vertical, cabeçalhos customizados e estados desabilitados.

Descrição

Tabs organizam conteúdo em camadas sem quebrar o contexto da tela e funcionam bem para documentação, formulários segmentados e painéis administrativos.

Recursos
  • Modo tabs e pills.
  • Posicionamento horizontal ou lateral.
  • Cabeçalho projetado e abas desabilitadas.
Limitações
  • Muitas abas no mesmo nível prejudicam escaneabilidade.
  • Conteúdo longo demais pede hierarquia adicional.
  • Abas aninhadas devem ser isoladas em subcomponentes.
Exemplo visível

O exemplo abaixo mostra pills laterais com cabeçalho customizado e uma aba desabilitada, sem contaminar a navegação da página de documentação.

Use o componente para agrupar conteúdo relacionado quando a navegação por seções fizer mais sentido do que empilhar cards ou abrir novas rotas.

  • type aceita tabs ou pills.
  • placement controla a posição das abas, como topo ou lateral.
  • [justified] distribui os gatilhos de forma uniforme.
  • [active] e [disabled] controlam estado por aba.
  • template li-tabx-header permite cabeçalhos customizados.
<li-tabsx type="pills" placement="left" [justified]="true">
  <li-tabx header="Tokens" [active]="true">
    <div class="p-3">Conteúdo</div>
  </li-tabx>

  <li-tabx header="Bloqueada" [disabled]="true"></li-tabx>
</li-tabsx>