Composant · Overlay

Drawer

Stable

Panneau latéral coulissant pour un workflow secondaire : inspection, configuration, revue côte à côte, sans quitter l'écran courant. Il s'ouvre à droite (défaut) ou à gauche et garde le contexte visible derrière le fond.

Quand l'utiliser

Afficher les détails d'un élément sélectionné dans une liste ou une table.
Présenter un formulaire de configuration plus long qu'un modal.
Permettre une revue côte à côte sans perdre le contexte de l'écran.

Quand ne pas l'utiliser

Pour une décision courte et bloquante : utilisez Modal.
Pour un détail compact ancré à un déclencheur : utilisez Popover.
Pour une notification éphémère : utilisez Toast.

Exemple interactif

Le panneau s'ancre à droite (défaut) ou à gauche, prop side côté Svelte, placement côté React/Vue/Angular, et un troisième panneau épingle un pied d'actions en bas. Escape ferme le panneau ; un clic sur le fond aussi. Choisissez l'onglet Svelte, React, Vue ou Angular : la démo est la vraie implémentation interactive du framework sélectionné.

Démo interactive

Anatomie

Fond (.st-drawer__backdrop) : calque plein écran ; un clic dessus ferme le panneau.
Panneau (.st-drawer, role="dialog", aria-modal) : largeur 24 rem par défaut, hauteur pleine.
En-tête (.st-drawer__header) : titre, description optionnelle et bouton de fermeture.
Corps (.st-drawer__body) : contenu défilable.
Pied (.st-drawer__footer) : zone d'actions optionnelle, alignée à droite.

Accessibilité

Le panneau a role="dialog" et aria-modal="true" ; aria-label reprend le titre.
Escape ferme le panneau ; un clic sur le fond le ferme également.
La prop open est bindable : pilotez l'ouverture avec bind:open.
Prévoyez un déclencheur focusable et restituez-lui le focus à la fermeture côté hôte.

Lignes directrices

À faire

Garder le contexte principal lisible derrière le panneau.
Fixer les actions principales dans le pied.

À éviter

Ouvrir plusieurs drawers en cascade.
Y reproduire la navigation principale de l'application.

API

Prop	Type	Défaut	Description
`open`	`boolean` (bindable)	`false`	Affiche le panneau et son fond.
`title`	`string`	requis	Titre du panneau, repris dans aria-label.
`description`	`string`	optionnel	Texte secondaire sous le titre.
`side`	`"left" \| "right"`	`"right"`	Côté d'ancrage du panneau.
`closeLabel`	`string`	`"Close"`	aria-label du bouton de fermeture.
`onclose`	`() => void`	optionnel	Appelé à la fermeture (Escape, clic fond ou bouton).
`children`	`Snippet`	optionnel	Contenu du corps.
`footer`	`Snippet`	optionnel	Zone d'actions en pied.
`class`	`string`	optionnel	Classe(s) sur le panneau.
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur le <aside> panneau.

Tokens utilisés

--st-component-drawer-backdrop
--st-component-drawer-zIndex
--st-component-drawer-surface
--st-component-drawer-border
--st-component-drawer-shadow
--st-component-drawer-width