Introduction

Un composant de mise en page visuelle qui organise des informations denses et liées en plusieurs panneaux mutuellement exclusifs. Les utilisateurs peuvent basculer entre les panneaux sans charger de nouvelles pages ni encombrer la zone.

Le composant Tabs est totalement intégré en tant que bloc tabs dans le Page Builder, permettant aux auteurs de construire des vues à onglets, configurer les propriétés visuelles et arranger les blocs imbriqués directement dans les modèles.

Usage

Ces configurations montrent exactement comment les éléments de bloc du page-builder sont construits.

1. Onglets horizontaux classiques (variante Line)

Notre mise en page standard avec un indicateur de déclenchement souligné et des transitions glissantes fluides. Parfait pour les fonctionnalités produit, détails ou sous-menus de documentation.

{
  "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. Style dossier fermé (taille compacte)

Rend la liste d'onglets avec des boutons à enveloppe bordée semblables à des séparateurs de dossier. Excellent pour menus de tableau de bord, préférences d'interface ou sections de paramètres compactes.

{
  "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

Ce composant respecte nativement le Modèle de Conception WAI-ARIA Tabs. Lors de l'hydratation, il implémente les couches critiques suivantes :

• Attribution de rôles sémantiques : role="tablist" sur la liste, role="tab" sur les déclencheurs, aria-selected reflète l'état actif, aria-controls référence les IDs de panneau automatiquement.
• Navigation focus roving : Les flèches clavier naviguent via tabIndex de focus mobile. Home ou End sautent aux extrémités.
• Indicateur glissant CSS dynamique : Un slider absolu interroge les métriques de position du déclencheur actif pour animer sans thrashing de mise en page.
• Contournement des limites Hono Reconciler : Dans les îlots Preact enveloppant du HTML statique, le gestionnaire d'état manipule directement les attributs (data-selected, aria-selected, tabindex, hidden) lors des événements, garantissant des performances indépendantes de la timeline du reconciler.