Tabs

Sistema de abas para organizar conteúdo em seções navegáveis com `mk-tabs`, `mk-tab` e `mk-tab-panel`.

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 slot="tab") e mk-tab-panel (painel de conteúdo associado a uma aba, com slot="panel"). 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 slot="tab" value="tab1">Aba 1</MkTab>
  <MkTab slot="tab" value="tab2">Aba 2</MkTab>
  <MkTabPanel slot="panel" value="tab1">Conteúdo da Aba 1</MkTabPanel>
  <MkTabPanel slot="panel" value="tab2">Conteúdo da Aba 2</MkTabPanel>
</MkTabs>

<mk-tabs value="tab1">
  <mk-tab slot="tab" value="tab1">Aba 1</mk-tab>
  <mk-tab slot="tab" value="tab2">Aba 2</mk-tab>
  <mk-tab-panel slot="panel" value="tab1">Conteúdo da Aba 1</mk-tab-panel>
  <mk-tab-panel slot="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 slot="tab" value="tab1">Aba 1</MkTab>
  <MkTab slot="tab" value="tab2">Aba 2</MkTab>
  <MkTabPanel slot="panel" value="tab1">Conteúdo da Aba 1</MkTabPanel>
  <MkTabPanel slot="panel" value="tab2">Conteúdo da Aba 2</MkTabPanel>
</MkTabs>

<mk-tabs variant="pill" value="tab1">
  <mk-tab slot="tab" value="tab1">Aba 1</mk-tab>
  <mk-tab slot="tab" value="tab2">Aba 2</mk-tab>
  <mk-tab-panel slot="panel" value="tab1">Conteúdo da Aba 1</mk-tab-panel>
  <mk-tab-panel slot="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 slot="tab" value="tab1">
    <MkIcon name="info" /> Tab 1 <MkBadge value="5"></MkBadge>
  </MkTab>
  <MkTab slot="tab" value="tab2">Tab 2</MkTab>
  <MkTabPanel slot="panel" value="tab1">Conteúdo da Aba 1</MkTabPanel>
  <MkTabPanel slot="panel" value="tab2">Conteúdo da Aba 2</MkTabPanel>
</MkTabs>

<mk-tabs value="tab1">
  <mk-tab slot="tab" value="tab1">
    <mk-icon name="info"></mk-icon>
    Tab 1
    <mk-badge value="5"></mk-badge>
  </mk-tab>
  <mk-tab slot="tab" value="tab2">Tab 2</mk-tab>
  <mk-tab-panel slot="panel" value="tab1">Conteúdo da Aba 1</mk-tab-panel>
  <mk-tab-panel slot="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 slot="tab" value="tab1">Aba 1</MkTab>
  <MkTab slot="tab" value="tab2" disabled>Aba 2</MkTab>
  <MkTabPanel slot="panel" value="tab1">Conteúdo da Aba 1</MkTabPanel>
  <MkTabPanel slot="panel" value="tab2">Conteúdo da Aba 2</MkTabPanel>
</MkTabs>

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

Props — mk-tabs

Prop	Tipo	Padrão	Descrição
`value`	`string`	`""`	Valor da aba atualmente selecionada. Deve corresponder ao `value` de um `mk-tab` filho. Se não fornecido, a primeira aba habilitada é selecionada automaticamente.
`variant`	`"underline"` \| `"pill"`	`"underline"`	Variante visual das abas. `"underline"` exibe uma linha indicadora abaixo da aba ativa; `"pill"` exibe um fundo preenchido com bordas arredondadas.

Props — mk-tab

Prop	Tipo	Padrão	Descrição
`value`	`string`	`""`	Valor único que identifica esta aba dentro do grupo. Deve corresponder ao `value` do `mk-tab-panel` emparelhado.
`disabled`	`boolean`	`false`	Desabilita a aba, impedindo a seleção por clique ou teclado.

Props — mk-tab-panel

Prop	Tipo	Padrão	Descrição
`value`	`string`	`""`	Valor que identifica este painel. Deve corresponder ao `value` da `mk-tab` emparelhada.

Eventos

Evento	Componente	Payload	Descrição
`mkChange`	`mk-tabs`	`{ index: number, value: string }`	Emitido sempre que o usuário troca de aba. `index` é a posição da nova aba (baseada em zero) e `value` é o valor da aba selecionada.

Slots

Componente	Slot	Descrição
`mk-tabs`	`tab`	Instâncias de `mk-tab`. Aparecem na barra de navegação.
`mk-tabs`	`panel`	Instâncias de `mk-tab-panel`. Aparecem abaixo da barra de navegação.
`mk-tab`	(default)	Rótulo da aba.
`mk-tab-panel`	(default)	Conteúdo do painel.

Acessibilidade

O contêiner de abas usa role="tablist".
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.

Tecla	Comportamento
`Tab` / `Shift+Tab`	Move o foco entre abas habilitadas na barra de navegação.
`ArrowRight`	Seleciona a próxima aba habilitada.
`ArrowLeft`	Seleciona a aba habilitada anterior.
`Home`	Seleciona a primeira aba habilitada.
`End`	Seleciona a última aba habilitada.
`Enter` / `Space`	Seleciona a aba focada (quando o foco está em uma aba não selecionada).

Tabs

On this page