Abas

Sublinhar as abas construídas no React Aria. A aba ativa pinta um sublinhado azul de 2px sobre a linha de base, e cada abas toma opcionalmente um ícone principal e um emblema de contagem, como no exemplo abaixo.

Banners152

Correios32

Códigos QR14

Membros

Configurações

Instalação

Você pode adicionar este componente de abas usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add tabs

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Sumário

Páginas são construídas sobre React Aria para navegação de teclado acessível, roving-tabindex e automática TabList / TabPanel Associação. Vamos cobrir os seguintes tópicos:

Páginas básicas
Contar os crachás e ícones principais
Páginas de comprimidos
Navegação com teclado
Seleção controlada

Páginas de comprimidos

PillTab é o irmão totalmente redondo para alternar as vistas locais em vez de painéis roteados. Ele envia em dois estilos: blue (o padrão - o interruptor de mudanças/Browser do painel de bate-papo de IA) e o mais silencioso gray, usado para o escopo e filtrar linhas como a página Ferramentas de configuração. Ambos compartilham o mesmo tratamento ocioso e hover; apenas a pílula selecionada difere.

import { RiGlobalLine, RiInfinityLine } from "@remixicon/react";import { PillTab, PillTabList } from "@/components/base/tabs/pill-tab";
// Blue (default) - panel view switchers<PillTabList>  <PillTab icon={RiInfinityLine} isSelected={view === "changes"} onSelect={() => setView("changes")}>    Changes  </PillTab>  <PillTab icon={RiGlobalLine} isSelected={view === "browser"} onSelect={() => setView("browser")}>    Browser  </PillTab></PillTabList>
// Gray - quieter scope / filter rows<PillTabList>  <PillTab variant="gray" isSelected={scope === "Home"} onSelect={() => setScope("Home")}>    Home  </PillTab></PillTabList>