Tabs

Navegacao

Barra de abas horizontal com sublinhado no item ativo e suporte a ícone por aba.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Tabs } from "@trdr/ui/tabs"

Uso

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@trdr/ui/tabs"

export function Exemplo() {
  return <Tabs />
}

Props

TabsPropsestende React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
TabsListPropsestende React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
TabsTriggerPropsestende React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
PropTipoDescrição
iconLeft?React.ReactNodeIcone estrutural antes do rotulo, igual ao suporte a icone do "Abas" legado.
TabsContentPropsestende React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>

Quando usar

Use tabs para alternar entre visualizacoes de um mesmo contexto que nao precisam coexistir na tela: posicoes, ordens e grafico de um mesmo ativo, por exemplo. Cada aba troca o conteudo inteiro abaixo da barra, e so uma fica visivel por vez.

Este componente corresponde ao "Abas" do Hub legado (Abas.tsx): mesma barra com sublinhado no item ativo e suporte a icone por aba, agora sobre Tabs.Root/List/Trigger/Content do Radix.

Quando nao usar

Nao use tabs para navegacao entre paginas distintas da aplicacao (isso e roteamento, nao estado de UI local). Nao use tabs quando o usuario precisa comparar duas visualizacoes lado a lado: se o conteudo das abas precisa ser visto ao mesmo tempo, elas nao deveriam ser abas.

Anatomia

  • Tabs (data-slot="tabs"): a raiz, guarda a aba ativa (controlada ou nao).
  • TabsList (data-slot="tabs-list"): a barra horizontal, com a borda inferior do legado.
  • TabsTrigger (data-slot="tabs-trigger"): cada aba clicavel. Aceita iconLeft para o icone estrutural antes do rotulo, igual ao "Abas" legado.
  • TabsContent (data-slot="tabs-content"): o painel associado a cada value. So o painel da aba ativa fica montado no DOM (comportamento padrao do Radix).

Nao ha variant nem size: o legado so tinha um layout de barra de abas, entao o componente fica com o estilo direto na classe, sem uma cva de variantes vazias.

Acessibilidade

Navegacao por teclado do Radix, sem codigo adicional: Tab entra na aba ativa, Seta esquerda/direita move entre as abas (pulando as desabilitadas e circulando do ultimo para o primeiro item), Home/End vao para a primeira/ultima aba, e o foco em uma aba a ativa automaticamente. Toda aba sem rotulo visivel (so icone) precisa de aria-label no TabsTrigger.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="tabs"][data-slot="tabs-content"][data-slot="tabs-list"][data-slot="tabs-trigger"]
11 tokens usados
bg-transparentborder-bborder-border-subtleoutline-nonering-offset-2ring-offset-backgroundring-ringtext-b2text-content-disabledtext-content-secondarytext-content-tertiary