Introduction

Un panneau qui glisse depuis le bord de l'écran pour présenter du contenu ou des actions sans quitter la page actuelle.

Utilisation

Tiroir de base

import { Drawer, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Drawer
      trigger={<Button>Open Drawer</Button>}
      title="Settings"
      description="Adjust your preferences."
      body="Drawer body content goes here."
      cancel={<Button variant="outline">Close</Button>}
      confirm={<Button>Save</Button>}
    />
  );
}

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc « tiroir » dans Page Builder (content/pages/*.json). trigger est une liste de blocage imbriquée (le CMS soumet toujours un tableau) :

{
  "type": "drawer",
  "title": "Settings",
  "description": "Adjust your preferences.",
  "confirmText": "Save",
  "cancelText": "Close",
  "trigger": [{ "type": "button", "text": "Open Drawer" }]
}

Propriétés

Tiroir

| title | `string \ | JSX.Élément` | The drawer title. | | description | `string \ | JSX.Élément` | The drawer description. | | body | `string \ | JSX.Élément` | The main body content. | | footer | `string \ | JSX.Élément` | Custom footer content. |

| cancel | JSX.Element | Élément rendu comme un déclencheur de fermeture (annulation). | | confirm | JSX.Element | Élément rendu comme déclencheur d'action. | | closable | boolean | S'il faut afficher le bouton de fermeture. Par défaut : « vrai ». | | interactive | boolean | Activez l’hydratation côté client pour un comportement interactif. | | class | string | Classes CSS personnalisées pour l'élément racine. |

Des accessoires supplémentaires (par exemple open, defaultOpen, onOpenChange, id) sont transmis à la primitive de tiroir sous-jacente.