ViewTabs

Seletor de visão sob o título da página, com indicador que desliza entre rotas.

O ViewTabs troca a visão de uma página: Identidade e E-mails em Marca, Pedidos e Métricas na lista. Cada item é um link de rota (o endereço, o Voltar e o link direto funcionam), e o indicador desliza da posição anterior mesmo quando a troca remonta a página. Ele aparece em uma linha própria sob o título, na mesma posição em todas as visões. O visual segue o Segment do Pro.

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

Padrão

id, label, items, current e renderItem. O renderItem recebe o item e as propriedades do item (className, aria-current, ref, children); devolva o link do seu roteador espalhando essas propriedades.

Três visões

Itens de largura igual e mesmo peso: ativar uma visão nunca muda a geometria do seletor.

Troca com conteúdo

O painel muda e o cabeçalho continua parado. O texto de estado é anunciado pela região role="status".

Nome, logotipo e cores que aparecem na Página pública.

No Admin

No Admin cada item é um Link do TanStack Router. A troca de visão é uma troca de rota, e o id do grupo guarda onde o indicador estava para ele deslizar:

<ViewTabs
  current="identidade"
  id="brand-view"
  items={[
    { id: "identidade", label: "Identidade" },
    { id: "emails", label: "E-mails" },
  ]}
  label="Visão da Marca"
  renderItem={(item, { ref, children, ...props }) => (
    <Link key={item.id} ref={ref} to={item.id === "identidade" ? "/brand" : "/brand/emails"} {...props}>
      {children}
    </Link>
  )}
/>

Anatomia

nav.rx-view-tabs        aria-label
├── span indicador      desliza com spring, aria-hidden
└── item (link)         aria-current="page" no ativo

nav: região de navegação com o label.
O indicador é um span decorativo posicionado sob o item ativo.
Cada item é o que o renderItem devolver, com a classe rx-view-tabs__item.

Propriedades

ViewTabs
Prop	Tipo	Padrão	Descrição
`current`*	`string`	-	Visão atual (chave da aba selecionada).
`id`*	`string`	-	Identifica o grupo para lembrar a posição do indicador entre rotas.
`items`*	`readonly Readonly<{ id: string; label: React.ReactNode; testId?: string; }>[]`	-	Itens a renderizar (coleção dinâmica).
`label`*	`string`	-	Nome acessível do seletor de visão.
`renderItem`*	`(item: ViewTabItem, props: ViewTabRenderProps) => React.ReactNode`	-	Como renderizar o item (link do roteador).
`testId`	`string`	-	Identificador usado em testes automatizados.

Animações

motion.dev
CSS

O indicador desliza do ponto anterior ao novo com motion (spring de rigidez 520 e amortecimento 42), animando posição e largura. Se a troca é de rota e o componente remonta, a última posição é lembrada pelo id do grupo. Interrompido no meio, o indicador termina na posição final. Com prefers-reduced-motion, o indicador salta direto, sem deslizar.

Acessibilidade

É uma nav com aria-label; o item ativo leva aria-current="page".
Cada item é um link de verdade: Tab navega, Enter ativa, e o clique do meio abre em outra aba.
O estado ativo não é só cor: o item ativo tem fundo e peso próprios, e o aria-current o expõe.
O foco usa um anel de 2 px no token de foco.
Use Tabs (WAI-ARIA tablist) quando as visões são painéis da mesma página; use ViewTabs quando são rotas.

Boas práticas

Faça

Duas a quatro visões com rótulos curtos, um por rota, sob o título.

Evite

Usar o ViewTabs para filtrar dados da mesma lista ou para passos de um fluxo.

Use o mesmo description do cabeçalho em todas as visões, para o cabeçalho não mudar.
Mantenha o id do grupo estável entre rotas para o indicador deslizar.
Teste a troca de rota com o Voltar do navegador.
Para filtros rápidos de uma lista (Todos, Exceções, Pausados), use Segment.

Relacionados

PageHeader o cabeçalho que o hospeda na prop viewSwitch.
Segment filtros e modos dentro da mesma tela.
Tabs painéis alternáveis na mesma página.
Link o link de rota usado em cada item.