Vox Mente
Navegação

Componentes

Tabs

beta

Recortes paralelos do mesmo assunto, um por vez, com a escolha nas mãos do usuário. Não use para etapas de um fluxo.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/tabs

Playground
Ana Beatriz, 4º ano. Matriculada desde março, sem pendências.
<Tabs defaultValue="resumo">
  <TabsList>
    <TabsTrigger value="resumo">Resumo</TabsTrigger>
    <TabsTrigger value="trilha">Trilha</TabsTrigger>
    <TabsTrigger value="sessoes">Sessões</TabsTrigger>
  </TabsList>
  <TabsContent value="resumo">…</TabsContent>
  <TabsContent value="trilha">…</TabsContent>
  <TabsContent value="sessoes">…</TabsContent>
</Tabs>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
Tabs
  └─ TabsList
    └─ TabsTrigger
  └─ TabsContent

Uso

Recortes paralelos do mesmo assunto, um visível por vez. A escolha é do usuário, não da tela.
Ana Beatriz, 4º ano. Matriculada desde março, sem pendências.

Variante line

`variant="line"` no `TabsList` troca o fundo sólido por um sublinhado. Use em cabeçalhos densos, onde um bloco cinza pesa demais.
Ana Beatriz, 4º ano. Matriculada desde março, sem pendências.

Vertical

`orientation="vertical"` empilha os gatilhos ao lado do conteúdo. Serve para um registro com mais recortes do que cabe numa linha.
Ana Beatriz, 4º ano. Matriculada desde março, sem pendências.

Aba desabilitada

Uma trilha sem sessão registrada ainda aparece na lista, só não pode ser selecionada. Some da tela e o usuário acha que a aba nunca existiu.
Ana Beatriz, 4º ano. Matriculada desde março, sem pendências.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

TabsList

PropTipoPadrão
variant"line" | "default" | null"default"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

Tabs, TabsContent, TabsTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css