Tabs Abas - Docs - Artefact

Tabs Abas

Navigation

Detecção automática inteligente

Introdução

Um elemento de navegação ou layout que organiza o conteúdo em painéis alternáveis e mutuamente exclusivos.

Uso

Our Hono/JSX Tabs component supports zero runtime styled-system classes, smooth sliding indicator transitions, and native keyboard interaction.

import { Tabs } from "../components/ui/tabs";

<Tabs defaultValue="features" interactive variant="enclosed" size="md">
  <Tabs.List>
    <Tabs.Trigger value="features">⚡ Key Features</Tabs.Trigger>
    <Tabs.Trigger value="pricing">💎 Pricing Plans</Tabs.Trigger>
    <Tabs.Indicator />
  </Tabs.List>

  <Tabs.Content value="features">
    Our Hono/JSX Tabs component supports zero-runtime classes, smooth sliding transitions, and native keyboard interaction.
  </Tabs.Content>

  <Tabs.Content value="pricing">
    Flexible subscription pricing for individuals, start-ups, and scaling enterprise workspaces.
  </Tabs.Content>
</Tabs>;

Construtor de páginas CMS

Este componente está disponível como um bloco tabs no Construtor de páginas (content/pages/*.json), projetado com uma API limpa e plana:

{
  "type": "tabs",
  "variant": "enclosed",
  "size": "md",
  "items": [
    {
      "value": "features",
      "label": "⚡ Key Features",
      "content": [
        {
          "type": "text",
          "content": "Our high-end tabs component is lightning fast."
        }
      ]
    },
    {
      "value": "pricing",
      "label": "💎 Pricing Plans",
      "content": [
        {
          "type": "text",
          "content": "Starting from $0/mo."
        }
      ]
    }
  ]
}

Propriedades

Root

Prop	Type	Description
`defaultValue`	`string`	O valor da aba inicialmente selecionada ao renderizar (não controlado).
`value`	`string`	O valor da aba selecionada, controlado.
`variant`	`"line" \	"subtle" \
`size`	`"xs" \	"sm" \
`orientation`	`"horizontal" \	"vertical"`
`activationMode`	`"automatic" \	"manual"`
`loopFocus`	`boolean`	Se o foco do teclado retorna ao início ou ao fim da lista. Padrão `true`.
`lazyMount`	`boolean`	Atrasa a renderização dos painéis de conteúdo das abas até que sejam visitados pela primeira vez. Padrão `false`.
`unmountOnExit`	`boolean`	Destrói os elementos do painel de abas do DOM quando se tornam inativos. Padrão `false`.
`onValueChange`	`(details: { value: string }) => void`	Chamado quando o valor da aba ativa muda.
`onFocusChange`	`(details: { value: string }) => void`	Chamado quando um trigger de aba diferente recebe foco por teclado ou clique.

Acessibilidade

Este componente cumpre totalmente com o padrão de design WAI-ARIA Tabs:

Define role="tablist" no contêiner da lista e aria-orientation mapeado para o layout.
Define role="tab" nos triggers, com aria-selected correspondendo ao estado ativo e aria-controls referenciando os IDs dos painéis.
Suporte de teclado: ArrowRight/ArrowLeft (ou ArrowDown/ArrowUp quando vertical) navega entre triggers com tabIndex de foco itinerante. Home/End move o foco imediatamente para os extremos. Enter/Espaço ativa os triggers no modo manual.