Componentes
Tabs
Segmento: trilho rebaixado com um papel que desliza até a aba ativa. Linha: sublinhado azul para conteúdo longo. Base Radix.
estávelEntradadesde 0.1.0@hiboupay/react
Exemplos#
Sete execuções, todos os agentes.
Segmento · papel desliza até a aba ativa
Sete execuções, todos os agentes.
Linha · para conteúdo longo
Importar#
tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hiboupay/react";
import type { TabsListProps, TabsTriggerProps, TabsVariant } from "@hiboupay/react";Quando usar#
Use quando
- Alternar vistas do mesmo conjunto (Todos, Aguardando, Decididos).
- Seções de um detalhe (line).
Não use quando
- Navegação entre páginas.
- Mais de 6 abas.
Variantes#
segment
Padrão. Filtro de vista compacto.
line
Abas de conteúdo longo, largura total.
Anatomia#
- 01TabsList (trilho)
- 02Indicador deslizante (papel ou linha)
- 03TabsTrigger com contagem opcional
- 04TabsContent (entra só por opacidade)
Estados#
inativahoverativafocus-visible
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| Tabs.defaultValue / value | string | Aba inicial (não controlado) ou atual (controlado). | |
| Tabs.onValueChange | (value: string) => void | Troca de aba. | |
| TabsList.variant | "segment" | "line" | "segment" | Desenho do trilho. |
| TabsTrigger.value* | string | Identificador da aba. | |
| TabsTrigger.count | number | Contagem em Sora tabular ao lado do rótulo. |
Acessibilidade#
Teclado
← →Move entre abas.
HomeEndPrimeira / última.
TabSai para o conteúdo.
Leitor de tela
- —tablist / tab / tabpanel com aria-selected (Radix).
Boas práticas#
Faça
- Rótulos curtos e paralelos.
- count para o que pede atenção.
Evite
- Aba que dispara ação.
Conteúdo#
- —Substantivo ou particípio no plural: "Decididos".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.