Introduction

Un panneau superposé qui glisse depuis le bord de l'écran, hébergeant un contenu temporaire, des formulaires, des paramètres ou des flux en plusieurs étapes. Ce composant permet aux utilisateurs d'effectuer des tâches, d'ajuster des préférences ou de consulter des informations détaillées sans perdre le contexte de leurs vues de page principales.

Le composant Drawer est entièrement intégré en tant que bloc drawer dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de configurer facilement des boutons déclencheurs, des en-têtes descriptifs et des pieds de page d'action personnalisés directement dans le CMS.

Utilisation

Ces exemples illustrent comment les éditeurs de contenu lient et structurent les composants drawer.

1. Tiroir de Configuration de Paramètres Standard

Un panneau de configuration standard comprenant un titre, une description et des déclencheurs de boutons primaires/secondaires.

{
  "type": "drawer",
  "title": "Workspace Preferences",
  "description": "Customize your development workspace configurations.",
  "confirmText": "Apply Changes",
  "cancelText": "Cancel",
  "trigger": [
    {
      "type": "button",
      "text": "Open Settings",
      "variant": "outline"
    }
  ]
}

2. Tiroir de Révision d'Informations avec Pied de Page Personnalisé

Présente une composition de mise en page alternative où une liste de boutons d'action personnalisés est fournie dans le tableau de pied de page aux côtés des contrôles standard.

{
  "type": "drawer",
  "title": "System Diagnostics",
  "description": "Real-time node and performance overview.",
  "cancelText": "Dismiss",
  "trigger": [
    {
      "type": "button",
      "text": "Review System Specs"
    }
  ],
  "footer": [
    {
      "type": "button",
      "text": "Refresh Node",
      "variant": "subtle",
      "colorPalette": "blue"
    }
  ]
}

Props

Notes de Développement et Accessibilité

• Îlot d'Hydratation : Parce que le panneau coulissant repose sur des transformations d'état côté client, des fermetures d'overlay d'arrière-plan, des pièges de focus clavier et des interactions tactiles, il s'hydrate par défaut en tant qu'îlot client interactif ("interactive": true).
• Conformité WAI-ARIA : Sous le capot, ce composant est conforme aux spécifications d'overlay (role="dialog", aria-modal="true", aria-labelledby, aria-describedby). L'ouverture du tiroir piège automatiquement le focus clavier à l'intérieur du panneau. Appuyer sur la touche Escape ou cliquer sur la couche d'arrière-plan assombrie rejette le tiroir en toute sécurité, renvoyant le focus à l'élément déclencheur.
• Composition d'Îlot Unifiée : Pour éviter les divergences d'hydratation et les bugs de collision d'overlay dans des cadres client complexes, les éléments imbriqués (y compris les déclencheurs de confirmation, les cales de fermeture et les spinners de chargement) sont regroupés dans un environnement d'îlot unifié unique.