Pular para o conteúdo

Exemplo - Tabs (Abas)

Tabs (Abas)

O componente de abas permite organizar conteúdo relacionado em visualizações alternáveis, economizando espaço vertical e reduzindo a carga cognitiva.

Exemplo Visual

Este é o conteúdo da primeira aba. É ótimo para textos introdutórios.

Dica

Você pode colocar qualquer HTML aqui dentro.

Como Utilizar

Dica de Implementação

Use a tag {% set varName %}...{% endset %} do Nunjucks para capturar blocos grandes de HTML e passá-los para a macro.

Código

{% set contentA %}
  <p>Conteúdo A</p>
{% endset %}

{% set contentB %}
  <p>Conteúdo B</p>
{% endset %}

{{ ui.tabs(id="my-tabs", items=[
  { label: "Aba A", content: contentA },
  { label: "Aba B", content: contentB, icon: "fa-solid fa-code" }
]) }}

Parâmetros

  • id (obrigatório): ID único para o grupo de abas (usado para acessibilidade).
  • items (obrigatório): Array de objetos contendo:
    • label: Texto da aba.
    • content: Conteúdo HTML da aba.
    • icon: (Opcional) Classe de ícone Font Awesome.