Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Tabs

Abas que alternam entre visões da mesma coisa, como os itens, a entrega e o histórico de um pedido, sem sair da página. Só um painel aparece por vez.

Feito com Base UIPadrão WAI-ARIA TabsComponente clienteCódigo ↗
minimal · light · #3fa34d
2 pacotes de café Bourbon em grãos e 1 moedor manual. Total R$ 186,40.
orientation

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.

import { Tabs, TabsList, Tab, TabsPanel } from "@camaleo/react";

Anatomia

Um Tab e um TabsPanel com o mesmo value andam juntos. A lista é uma parada só na ordem do Tab; as setas passam de uma aba para outra.

Exemplos

Todo exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor da barra acima. Clique numa aba e depois experimente as setas.

minimal · light · #3fa34d

Loja Acme

Loja virtual · criada em 02/03/2025

Aparece nas notas fiscais e nos e-mails para clientes.

Vertical

Com orientation="vertical" a lista fica ao lado do painel e ↑ ↓ passam de uma aba para outra. Serve para configurações com mais seções do que cabem numa linha.

  • Pedido nº 4821 chegou danificado
  • Posso mudar o endereço de entrega?

Com ícones e contagens

Uma contagem mostra onde está o trabalho antes do clique. Seja breve: o número passa a fazer parte do nome da aba.

Webhooks: endpoints, parâmetros e exemplos de resposta.

Muitas abas

Quando as abas não cabem, a lista rola para o lado e mantém a aba ativa à vista. Passando de umas oito, uma barra lateral ou um select fica mais fácil de ler.

/orders/4821?tab=items

2 pacotes de café Bourbon em grãos e 1 moedor manual. Total R$ 186,40.

Na URL

Clique numa aba e veja o endereço. Com value e onValueChange você guarda a aba na URL, e um link ou um recarregamento abre a mesma visão.

Cliente desde 2023. 42 pedidos, R$ 9.870,00 em compras, último pedido em 21/10/2026.

Carregar na primeira abertura

Abra Atividade. Um painel escondido não é renderizado, então você pode buscar os dados na primeira vez que ele abre e mostrar um skeleton enquanto isso.

FaturamentoR$ 12.480,00+12%

Seguir o foco

Por padrão as setas só movem o foco, e Enter ou Espaço abre a aba. Use activateOnFocus quando os painéis aparecem na hora, como esses números.

Outubro até agora: R$ 12.480,00 recebidos, R$ 1.150,00 a receber.

Os relatórios fiscais abrem depois do seu primeiro mês completo de vendas, em 01/12/2026.

Desativada, com o motivo

As setas ainda chegam a uma aba desativada, mas não a abrem. Diga por que ela está desligada e quando abre, ligado com aria-describedby para ser lido no foco.

Em contexto

São pedaços inteiros de interface que você pode copiar, no estilo que escolheu.

Moedor de café manual

R$ 89,90
4,6(128 avaliações)

“Moagem uniforme e fácil de limpar. Uso todas as manhãs.”

Marina L., 02/10/2026

Detalhes do produtoCard · Tabs · DataList · Rating
Saiu para entrega

Pedido nº 4821

  • Café Bourbon em grãos, 500 gR$ 96,50
  • Moedor de café manualR$ 89,90
Página do pedidoCard · Badge · Tabs · Timeline
Bruno Costabruno@acme.com.br
O Bruno pode
Membro da equipeCard · Avatar · Tabs · Checkbox · Button

Boas práticas

Cliente desde 2023. 42 pedidos, R$ 9.870,00 em compras, último pedido em 21/10/2026.
FaçaVisões de uma mesma coisa.

Resumo, pedidos e observações descrevem o mesmo cliente, e dá para ler em qualquer ordem.

2 itens, R$ 186,40.
EviteEtapas de uma tarefa.

Uma compra tem ordem e próxima etapa. Abas deixam pular para a frente e escondem quanto já foi feito; use um stepper.

FaçaLinks para páginas.

Ir para outra página é navegação: links com aria-current="page" mantêm o botão Voltar, as novas abas do navegador e as URLs compartilhadas funcionando.

Nossos cafés, acessórios e vales-presente.
EviteAbas como navegação do site.

O leitor de tela anuncia uma lista de abas, e a pessoa espera que o conteúdo mude ali, não a página inteira.

Props

PropriedadeTipoPadrãoDescrição
valueany—A aba ativa. Use com onValueChange para controlar o estado. null deixa nenhuma ativa.
defaultValueany0A aba ativa no início, sem controlar o estado.
orientationOrientation'horizontal'horizontal usa ← →; vertical põe a lista ao lado do painel e usa ↑ ↓.
onValueChange(value, eventDetails) => void—Chamado quando a aba ativa muda. eventDetails.reason diz o motivo, por exemplo none para um clique ou uma tecla.

Tab e TabsPanel recebem um value que os liga. O Tab também aceita disabled.

O TabsList decide como o teclado se comporta:

PropriedadeTipoPadrãoDescrição
activateOnFocusbooleanfalseAbre a aba assim que ela recebe o foco pelas setas. Sem isso, Enter ou Espaço abre.
loopFocusbooleantrueDas pontas, as setas voltam para a primeira ou a última aba.
Aceita também todas as props da primitiva por baixo e os atributos nativos.

O TabsPanel pode continuar na página enquanto está escondido:

PropriedadeTipoPadrãoDescrição
keepMountedbooleanfalseMantém o painel no DOM quando escondido, por exemplo para não perder o que foi digitado num formulário.
Aceita também todas as props da primitiva por baixo e os atributos nativos.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria lista.

Atributos

data-orientationhorizontal · vertical
data-activena aba ativa
data-disablednuma aba desativada
data-activation-directionleft · right · up · down, para onde a seleção andou

Tokens que ele lê

Cor

--cml-border--cml-fg--cml-fg-muted--cml-fg-secondary--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-radius-surface--cml-tabs-list-bg--cml-tabs-list-border--cml-tabs-list-shadow

Forma e tamanho

--cml-border-width--cml-tabs-gap--cml-tabs-list-padding--cml-tabs-list-radius

Tipografia e movimento

--cml-duration-fast--cml-ease-standard--cml-font-control--cml-font-size-control--cml-font-weight-control--cml-letter-spacing-control--cml-text-transform-control

Só deste componente

--cml-tab-active-bg--cml-tab-active-fg--cml-tab-active-shadow--cml-tab-radius
/* abas em pílula sobre um trilho, só neste card */
.cobranca [data-slot="tabs-list"] {
  --cml-tabs-list-bg: var(--cml-surface-sunken);
  --cml-tabs-list-radius: var(--cml-radius-surface);
  --cml-tab-radius: var(--cml-radius-surface);
  --cml-tab-active-bg: var(--cml-surface-raised);
}

Acessibilidade

TabLeva o foco para a lista, na aba ativa. De novo, leva ao painel.
← / →Movem o foco para a aba anterior ou a próxima, voltando nas pontas. Numa lista vertical, ↑ e ↓.
Home / EndMovem o foco para a primeira ou a última aba.
Enter / EspaçoAbre a aba focada. Com activateOnFocus, a aba abre assim que recebe o foco.

Relacionados

AccordionSeções que abrem no lugar, mais de uma por vez.ToggleUm grupo de toggles muda uma opção, não uma visão.StepperPara uma tarefa feita em etapas, em ordem.
Esta página foi útil? · Editar esta página no GitHub