Tabs

Tabs são úteis quando queremos agrupar conteúdos diferentes, mas que possuem relação entre si, em uma mesma página. Uma situação em que pode ser utilizado esse componente é para mostrar tipos diferentes de relatórios.

Podem ser usadas para realizar inputs de dados (desde que não existam interdependências ou uma sequência lógica de preenchimento) ou para visualização de conteúdos. Também podem ser usadas para criação de algo que possua dois modos distintos de configuração, por exemplo: edição de conteúdo HTML e edição do mesmo conteúdo em Markdown.

As tabs do Purple não são alinhadas as colunas para evitar confusão com o conteúdo. Elas seguem o padrão de espaçamentos do Bulma, com alinhamento à esquerda. Essa orientação segue outros Design Systems como Material, Atlassian, Lightning e Clarity Design.

Como usar

O comportamento esperado é que a tab da esquerda venha selecionada.

É preferencial que as tabs estejam dentro de um bloco de conteúdo exclusivo. Para esse caso, use o estilo de tabs padrão. Ele segue a mesma lógica do estilo “em contexto” das Tabelas.

<div class="tabs">
  <ul>
    <li class="is-active">
      <a><span>Section A</span></a>
    </li>
    <li>
      <a><span>Section B</span></a>
    </li>
    <li>
      <a><span>Other section</span></a>
    </li>
  </ul>
</div>

Variações

Com ícone

<div class="tabs">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon">
          <i class="far fa-user"></i>
        </span>
        <span>Section A</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon">
          <i class="far fa-cog"></i>
        </span>
        <span>Other section</span>
      </a>
    </li>
  </ul>
</div>

Nomenclatura

• Para nomear as tabs, use substantivos.
• Use apenas uma ou duas palavras (sem contar as preposições).
• Use Camel Case nos textos das tabs. Não utilize all caps no rótulo da tab.

Exemplos: Configurações, Relatório de Desempenho.

Boas práticas

• Não use ícones em algumas abas e textos em outras. Não use apenas ícones. Você pode usar ícones e textos em todas as abas ou apenas textos.
• Não use tabs para dividir a interação dos usuários em etapas, como no preenchimento de um formulário que possui sequência lógica. Para esse caso, utilize os Steps.
• Não force o usuário a navegar entre tabs para comparar dados. Caso ele necessite comparar, mantenha os dados juntos. Nesse caso, pode não ser uma boa ideia usar tabs.
• Utilize apenas uma linha para as tabs. Caso exista conteúdo para exceder a uma linha, considere resolver a tela de outra forma. Será que não é melhor separar em páginas?

Acessibilidade