componentes / tabs

Tabs

Alterne entre seções distintas de conteúdo, seguindo o padrão de abas da WAI-ARIA.

Como usar

Componha `Tabs` com um `TabList` de `Tab`s e um `TabPanel` por aba; aba e painel são ligados pelo `value`. Funciona não controlado (`defaultValue`) ou controlado (`value` + `onValueChange`). Setas, Home e End movem entre as abas e ignoram as desabilitadas; use `activation="manual"` para exigir Enter ou Espaço.

preview

Preferências gerais.

Tabs.tsx

import { Tab, TabList, TabPanel, Tabs } from "vaiperui";
 
<Tabs defaultValue="general">
  <TabList aria-label="Configurações">
    <Tab value="general">Geral</Tab>
    <Tab value="account">Conta</Tab>
    <Tab value="billing" disabled>Faturas</Tab>
  </TabList>
  <TabPanel value="general">Preferências gerais.</TabPanel>
  <TabPanel value="account">Dados da conta.</TabPanel>
</Tabs>

Cores

preview

primary

success

warning

danger

cores.tsx

<Tabs defaultValue="a" variantColor="primary">
  <TabList aria-label="…">
    <Tab value="a">Geral</Tab>
    <Tab value="b">Conta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" variantColor="success">
  <TabList aria-label="…">
    <Tab value="a">Geral</Tab>
    <Tab value="b">Conta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" variantColor="warning">
  <TabList aria-label="…">
    <Tab value="a">Geral</Tab>
    <Tab value="b">Conta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" variantColor="danger">
  <TabList aria-label="…">
    <Tab value="a">Geral</Tab>
    <Tab value="b">Conta</Tab>
  </TabList>
</Tabs>

Tamanhos

preview

tamanhos.tsx

<Tabs defaultValue="a" size="sm">
  <TabList aria-label="…">
    <Tab value="a">Geral</Tab>
    <Tab value="b">Conta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" size="md">
  <TabList aria-label="…">
    <Tab value="a">Geral</Tab>
    <Tab value="b">Conta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" size="lg">
  <TabList aria-label="…">
    <Tab value="a">Geral</Tab>
    <Tab value="b">Conta</Tab>
  </TabList>
</Tabs>

Cor personalizada

preview

Laranja

Violeta

cor-personalizada.tsx

<Tabs defaultValue="a" customColor="#f97316">
  <TabList aria-label="…">
    <Tab value="a">Geral</Tab>
    <Tab value="b">Conta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" customColor="#8b5cf6">
  <TabList aria-label="…">
    <Tab value="a">Geral</Tab>
    <Tab value="b">Conta</Tab>
  </TabList>
</Tabs>

Orientação e ativação

preview

Geral

vertical

Geral

manual

comportamento.tsx

<Tabs defaultValue="a" orientation="vertical">…</Tabs>
 
<Tabs defaultValue="a" activation="manual">…</Tabs>

Props

Prop	Valores	Padrão	Descrição
value	string	nenhum	Aba ativa (controlado)
defaultValue	string	nenhum	Aba ativa inicial (não controlado)
onValueChange	(value: string) => void	nenhum	Chamado quando a aba ativa muda
orientation	horizontal \| vertical	horizontal	Direção da lista de abas e das setas
activation	auto \| manual	auto	auto ativa ao focar; manual espera Enter ou Espaço
variantColor	primary \| success \| warning \| danger	primary	Cor de destaque do estado ativo e do anel de foco
customColor	string \| { light, dark }	nenhum	Qualquer cor CSS (ou um par por tema). Substitui o variantColor
size	sm \| md \| lg	md	Tamanho do controle e do texto
animation	none \| smooth \| fast \| bounce	smooth	Transição entre estados
Tab: value, icon, disabled	string, ReactNode, boolean	nenhum	value liga a aba ao painel; icon aparece antes do rótulo
TabPanel: value	string	nenhum	Painel exibido enquanto a aba com o mesmo value está ativa

Acessibilidade

`TabList` tem `role="tablist"` e `aria-orientation`; cada `Tab` é um botão com `role="tab"`; cada `TabPanel` tem `role="tabpanel"`.
`aria-selected` marca a aba ativa; `aria-controls` e `aria-labelledby` ligam cada aba ao seu painel pelo `value`.
Roving tabindex: só a aba ativa entra na ordem do Tab (`tabIndex=0`); as demais usam `-1`.
As setas seguem a orientação (Esquerda/Direita na horizontal, Cima/Baixo na vertical) e dão a volta; abas desabilitadas são ignoradas.
Com `activation="auto"` (padrão) o foco seleciona a aba; com `"manual"` o foco só se move e Enter ou Espaço seleciona.
Painéis inativos recebem `hidden`; o painel é focável (`tabIndex=0`) para que quem usa teclado alcance o conteúdo.

Teclado

Tecla	Ação
Tab	Move o foco para a aba ativa e depois para o painel.
Arrow keys	Move o foco para a aba anterior/próxima conforme a orientação.
Home / End	Move o foco para a primeira/última aba habilitada.
Enter / Space	Seleciona a aba focada (necessário só com `activation="manual"`).

Tenha em mente

Informe `value` ou `defaultValue`; sem nenhum dos dois, nenhuma aba fica selecionada e todas têm `tabIndex=-1`, e a lista não é alcançável pelo teclado.
Dê ao `TabList` um `aria-label` ou `aria-labelledby`; o componente não adiciona um.