Introduction

Um componente de layout visual que organiza informações densas e relacionadas em múltiplos painéis mutuamente exclusivos. Os usuários podem alternar entre painéis sem carregar novas páginas ou sobrecarregar a tela.

O componente Tabs está totalmente integrado como bloco tabs no Page Builder, permitindo que os autores construam visualizações em abas, configurem propriedades visuais e organizem blocos aninhados diretamente nos modelos.

Usage

Estas configurações mostram exatamente como os itens de bloco do page-builder são construídos.

1. Abas horizontais clássicas (variante Line)

Nosso layout padrão com indicador de acionamento sublinhado e transições de deslizamento fluidas. Perfeito para recursos de produto, detalhes ou submenus de documentação.

{
  "type": "tabs",
  "variant": "line",
  "size": "md",
  "items": [
    {
      "value": "features",
      "label": "⚡ Key Features",
      "content": [
        {
          "type": "text",
          "content": "Our Hono/JSX Tabs component supports zero runtime styled-system classes, smooth sliding indicator transitions, and native keyboard interaction."
        }
      ]
    },
    {
      "value": "pricing",
      "label": "💎 Pricing Plans",
      "content": [
        {
          "type": "text",
          "content": "Flexible subscription pricing for individuals, start-ups, and scaling enterprise workspaces."
        }
      ]
    }
  ]
}

2. Estilo de pasta fechada (tamanho compacto)

Renderiza a lista de abas com botões de invólucro com borda semelhantes a separadores de pasta. Excelente para menus de painel, preferências de interface ou seções de configuração compactas.

{
  "type": "tabs",
  "variant": "enclosed",
  "size": "sm",
  "items": [
    {
      "value": "profile",
      "label": "User Profile",
      "content": [
        {
          "type": "text",
          "content": "Manage personal information, billing details, and customized regional preferences."
        }
      ]
    },
    {
      "value": "security",
      "label": "Security",
      "content": [
        {
          "type": "text",
          "content": "Configure multi-factor authentication codes, view active sessions, and update credentials."
        }
      ]
    }
  ]
}

Props

Accessibility & Developer Notes

Este componente cumpre nativamente o Padrão de Design WAI-ARIA Tabs. Ao hidratar, implementa as seguintes camadas críticas:

• Atribuição de papéis semânticos: role="tablist" na lista, role="tab" nos gatilhos, aria-selected reflete o estado ativo e aria-controls referencia os IDs de painel automaticamente.
• Navegação de foco roving: As setas do teclado navegam suavemente via tabIndex de foco móvel. Home ou End saltam aos extremos.
• Indicador deslizante CSS dinâmico: Um slider absoluto consulta métricas de posição do gatilho ativo para animar traduções sem thrashing de layout.
• Contornando limites do Hono Reconciler: Em ilhas Preact que envolvem HTML estático, o gerenciador de estado manipula atributos (data-selected, aria-selected, tabindex, hidden) diretamente em eventos, garantindo desempenho independente da timeline do reconciler.