Tabs

Alterna entre visões do mesmo contexto sem sair da página.

As Tabs organizam conteúdo irmão em abas: Geral, Jornada e Eventos de um Pedido. Use para visões do mesmo objeto; para navegar entre telas, use links, e para esconder conteúdo opcional, Accordion.

import { Tabs } from "@rastreio-x/ui";

Padrão

A lista de abas fica em Tabs.ListContainer > Tabs.List; cada Tabs.Tab tem um id e leva um Tabs.Indicator. Cada Tabs.Panel casa pelo mesmo id.

Geral

Jornada

Eventos

Dados do Pedido e do Cliente.

Playground

Troque variante, orientação e alinhamento e use o teclado para navegar entre as abas.

Geral

Jornada

Eventos

Dados do Pedido e do Cliente.

Controles

variant

orientation

align

keyboardActivation

isDisabled

import { Tabs } from "@rastreio-x/ui";

<Tabs>
  <Tabs.ListContainer>
    <Tabs.List aria-label="Seções do Pedido">
      <Tabs.Tab id="geral">
        Geral
        <Tabs.Indicator />
      </Tabs.Tab>
      <Tabs.Tab id="jornada">
        Jornada
        <Tabs.Indicator />
      </Tabs.Tab>
    </Tabs.List>
  </Tabs.ListContainer>
  <Tabs.Panel id="geral">Dados do Pedido e do Cliente.</Tabs.Panel>
  <Tabs.Panel id="jornada">Os cinco Marcos da entrega.</Tabs.Panel>
</Tabs>

Variante secundária

variant="secondary" troca o indicador preenchido por um sublinhado, mais leve para telas densas.

Rascunho

Publicada

Alterações ainda não publicadas.

Vertical

orientation="vertical" empilha as abas, como em menus de configuração. Use align="start" para alinhar o texto.

Marca

Fontes

Créditos

Logo, cores e nome da loja.

Aba desabilitada

Explique no próprio rótulo por que ela não abre. Tabs.Separator desenha o divisor entre abas.

E-mail

WhatsApp (em breve)

Os avisos saem por e-mail.

Controlado

Com selectedKey e onSelectionChange você sincroniza a aba com o estado ou a URL.

Geral

Jornada

Marcos da entrega.

Aba atual: jornada

Anatomia

Tabs
├── Tabs.Indicator
├── Tabs.List
├── Tabs.ListContainer
├── Tabs.Panel
├── Tabs.Separator
└── Tabs.Tab

Tabs.ListContainer: contêiner com rolagem e bordas esmaecidas quando as abas não cabem.
Tabs.List: a lista, que precisa de aria-label.
Tabs.Tab e Tabs.Indicator: a aba e o indicador deslizante.
Tabs.Panel: o conteúdo de cada aba.

Propriedades

Raiz (Tabs):

Tabs
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`align`	`'center' \| 'end' \| 'start'`	-	Alinhamento da lista de abas: `start`, `center` ou `end`.
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`className`	`string`	`'react-aria-Tabs'`	Classes CSS aplicadas ao elemento.
`defaultSelectedKey`	`Key`	-	Chave selecionada inicialmente (não controlado).
`disabledKeys`	`Iterable<Key>`	-	Chaves dos itens desabilitados: não podem ser focados nem selecionados.
`id`	`string`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`keyboardActivation`	`'manual' \| 'automatic'`	`'automatic'`	Como a aba é ativada pelo teclado: `automatic` ao focar, `manual` ao confirmar.
`onSelectionChange`	`((key: Key) => void)`	-	Chamada quando a seleção muda.
`orientation`	`Orientation`	`'horizontal'`	Orientação: `horizontal` (padrão) ou `vertical`.
`render`	`DOMRenderFunction<'div', TabsRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`selectedKey`	`Key`	-	Chave selecionada (controlado).
`style`	`StyleOrFunction<TabsRenderProps>`	-	Estilos em linha aplicados ao elemento.
`variant`	`'primary' \| 'secondary'`	-	Estilo das abas: `primary` ou `secondary`.

Aba (Tabs.Tab):

Tabs.Tab
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`children`	`ChildrenOrFunction<TabRenderProps>`	-	Conteúdo do componente.
`className`	`string`	`'react-aria-Tab'`	Classes CSS aplicadas ao elemento.
`download`	`string \| boolean`	-	Faz o navegador baixar o arquivo do link; um texto sugere o nome.
`href`	`string`	-	URL de destino do link.
`hrefLang`	`string`	-	Idioma do recurso do link.
`id`	`Key`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`onPress`	`((e: PressEvent) => void)`	-	Chamada ao soltar o clique, o toque ou a tecla sobre o elemento.
`ping`	`string`	-	URLs notificadas quando o link é seguido.
`referrerPolicy`	`React.HTMLAttributeReferrerPolicy`	-	Quanto da origem (referrer) enviar ao seguir o link.
`rel`	`string`	-	Relação entre a página atual e o recurso do link.
`render`	`((props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivE…`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`routerOptions`	`undefined`	-	Opções do roteador do lado do cliente.
`style`	`StyleOrFunction<TabRenderProps>`	-	Estilos em linha aplicados ao elemento.
`target`	`React.HTMLAttributeAnchorTarget`	-	Janela de destino do link (`_blank`, `_self`).

Animações

CSS
indicativo

O indicador desliza entre abas em 250 ms (translate, width e height), e o painel troca com um fade curto de 150 ms. Com prefers-reduced-motion, a folha global da fachada reduz as transições a 0,01 ms: o indicador salta direto.

Acessibilidade

Papéis tablist, tab e tabpanel; aria-selected marca a aba ativa e aria-controls liga aba e painel.
Teclado: Tab entra na lista, setas movem entre abas (esquerda e direita; em vertical, cima e baixo), Home e End vão às pontas.
Passe aria-label em Tabs.List ("Seções do Pedido").
A aba ativa não depende só da cor: o indicador e aria-selected também marcam.

Boas práticas

Faça

Poucas abas (até cinco), com rótulos curtos e substantivos: Geral, Jornada, Eventos.

Evite

Abas para navegar entre telas diferentes, ou rótulos longos que quebram em duas linhas.

O título da página não se repete como rótulo de aba.
Não esconda o Checklist ou informação crítica atrás de uma aba.
Mantenha a ordem das abas estável entre visitas.
Para mais de seis visões, reveja a estrutura da página.

Relacionados

Accordion para conteúdo opcional recolhível.
Breadcrumbs para a hierarquia entre páginas.
Widget para o conteúdo dentro de cada aba.