Tabs

O componente mk-tabs organiza conteúdo em seções navegáveis. É composto por três elementos: mk-tabs (contêiner raiz que gerencia estado e navegação por teclado), mk-tab (cada aba clicável, com ) e mk-tab-panel(painel de conteúdo associado a uma aba, com). O emparelhamento entre aba e painel é feito pelo atributo value — cada mk-tab e seu mk-tab-panel correspondente devem ter o mesmo value.

Padrão

A variante padrão é underline, que exibe uma linha indicadora animada abaixo da aba ativa e uma borda inferior separando a lista de abas do conteúdo.

import { MkTabs, MkTab, MkTabPanel } from '@db1/makuco-ui-react';

<MkTabs value="tab1">
  <MkTab value="tab1">Aba 1</MkTab>
  <MkTab value="tab2">Aba 2</MkTab>
  <MkTabPanel value="tab1">Conteúdo da Aba 1</MkTabPanel>
  <MkTabPanel value="tab2">Conteúdo da Aba 2</MkTabPanel>
</MkTabs>

<mk-tabs value="tab1">
  <mk-tab value="tab1">Aba 1</mk-tab>
  <mk-tab value="tab2">Aba 2</mk-tab>
  <mk-tab-panel value="tab1">Conteúdo da Aba 1</mk-tab-panel>
  <mk-tab-panel value="tab2">Conteúdo da Aba 2</mk-tab-panel>
</mk-tabs>

Variante Pill

A aba ativa recebe um fundo preenchido com cor de marca e bordas completamente arredondadas.

<MkTabs variant="pill" value="tab1">
  <MkTab value="tab1">Aba 1</MkTab>
  <MkTab value="tab2">Aba 2</MkTab>
  <MkTabPanel value="tab1">Conteúdo da Aba 1</MkTabPanel>
  <MkTabPanel value="tab2">Conteúdo da Aba 2</MkTabPanel>
</MkTabs>

<mk-tabs variant="pill" value="tab1">
  <mk-tab value="tab1">Aba 1</mk-tab>
  <mk-tab value="tab2">Aba 2</mk-tab>
  <mk-tab-panel value="tab1">Conteúdo da Aba 1</mk-tab-panel>
  <mk-tab-panel value="tab2">Conteúdo da Aba 2</mk-tab-panel>
</mk-tabs>

Com ícone e badge

As abas podem conter ícones antes do rótulo e badges para indicar contagem ou status.

import { MkTabs, MkTab, MkTabPanel } from '@db1/makuco-ui-react';
import { MkIcon } from '@db1/makuco-ui-react';
import { MkBadge } from '@db1/makuco-ui-react';

<MkTabs value="tab1">
  <MkTab value="tab1">
    <MkIcon name="info" /> Tab 1 <MkBadge value="5"></MkBadge>
  </MkTab>
  <MkTab value="tab2">Tab 2</MkTab>
  <MkTabPanel value="tab1">Conteúdo da Aba 1</MkTabPanel>
  <MkTabPanel value="tab2">Conteúdo da Aba 2</MkTabPanel>
</MkTabs>

<mk-tabs value="tab1">
  <mk-tab value="tab1">
    <mk-icon name="info"></mk-icon>
    Tab 1
    <mk-badge value="5"></mk-badge>
  </mk-tab>
  <mk-tab value="tab2">Tab 2</mk-tab>
  <mk-tab-panel value="tab1">Conteúdo da Aba 1</mk-tab-panel>
  <mk-tab-panel value="tab2">Conteúdo da Aba 2</mk-tab-panel>
</mk-tabs>

Aba desabilitada

Uma aba individual pode ser desabilitada via disabled no mk-tab. A aba desabilitada não pode ser selecionada por clique ou teclado.

<MkTabs value="tab1">
  <MkTab value="tab1">Aba 1</MkTab>
  <MkTab value="tab2" disabled>Aba 2</MkTab>
  <MkTabPanel value="tab1">Conteúdo da Aba 1</MkTabPanel>
  <MkTabPanel value="tab2">Conteúdo da Aba 2</MkTabPanel>
</MkTabs>

<mk-tabs value="tab1">
  <mk-tab value="tab1">Aba 1</mk-tab>
  <mk-tab value="tab2" disabled>Aba 2</mk-tab>
  <mk-tab-panel value="tab1">Conteúdo da Aba 1</mk-tab-panel>
  <mk-tab-panel value="tab2">Conteúdo da Aba 2</mk-tab-panel>
</mk-tabs>

Rolagem das abas

Quando as abas não cabem na largura do componente, a lista rola na horizontal e setas aparecem nas pontas. Cada seta só existe quando há abas escondidas do seu lado: no começo, só a seta final; no meio, as duas; no fim, só a inicial. Se tudo cabe, nenhuma seta aparece.

Um clique na seta rola a lista em pouco menos que a largura visível, com animação (sem animação sob prefers-reduced-motion: reduce). A aba ativa é rolada para a vista ao ser selecionada por clique ou por teclado. Vale para as variantes underline e pill. Em RTL as setas seguem o começo e o fim lógicos da lista; o indicador deslizante da variante underline continua só em LTR. O nome acessível das setas segue o locale do mk-tabs.

Props — mk-tabs

Props — mk-tab

Props — mk-tab-panel

Eventos

mkChange de campos dentro do painel

O mkChange de mk-input, mk-select, mk-checkbox e dos demais campos é composed e borbulha. Dentro de um mk-tab-panel, ele chega ao listener mkChange do mk-tabs com o detail do campo no lugar de { index, value }. Trate a troca de aba só quando o evento vier do próprio mk-tabs:

<MkTabs
  value={aba}
  onMkChange={(event) => {
    if (event.target !== event.currentTarget) return;
    setAba(event.detail.value);
  }}
>
  …
</MkTabs>

<mk-tabs [value]="aba" (mkChange)="$event.target === $event.currentTarget && (aba = $event.detail.value)">
  …
</mk-tabs>

tabs.addEventListener('mkChange', (event) => {
  if (event.target !== event.currentTarget) return;
  aba = event.detail.value;
});

Slots

Acessibilidade

• O contêiner de abas usa role="tablist"; label fornece o nome acessível.
• As setas de rolagem são botões com nome acessível traduzido pelo locale ("Rolar abas para a esquerda" e "Rolar abas para a direita") e entram na ordem de Tab antes e depois da lista de abas, enquanto estão visíveis. As setas de rolagem são um auxílio para mouse e toque: revelam as abas escondidas pela rolagem. Quem usa o teclado navega pelas setas do teclado entre as abas, e a aba focada rola para a vista. Se a seta focada desaparece ao chegar na ponta, o foco volta ao documento.
• Só a aba selecionada fica na ordem de Tab (roving tabindex); as demais são alcançadas pelas setas.
• Cada mk-tab renderiza um <button> nativo com role="tab", aria-selected e aria-disabled.
• Cada mk-tab-panel usa role="tabpanel" e aria-hidden para indicar visibilidade.
• Abas com disabled são ignoradas na navegação por teclado.