Panneau latéral
لوحة جانبيةDrawer
Stable
src/dsm/components/drawer.tsxLe panneau latéral glisse depuis un bord de l'écran pour afficher un menu, des filtres ou un contenu secondaire, sans quitter la page. Il se ferme au balayage, au clic sur le fond ou avec la touche Échap.
Import
import { Drawer } from "@/dsm/components/drawer";Exemples
Par défaut
Panneau de fin de ligne, utilisé pour des outils.
LTR
Depuis le début
Menu de navigation ouvert depuis le bord de début.
LTR
Filtres de démarches
Panneau de filtres avec pied d'actions.
LTR
Usage
Quand l'utiliser
- Utilisez-le pour le menu de navigation mobile ou un panneau de filtres qui a besoin de plus d'espace qu'une fenêtre contextuelle.
- Choisissez `side="end"` (par défaut) pour un panneau d'outils, `side="start"` pour un menu de navigation.
Quand ne pas l'utiliser
- N'utilisez pas de panneau latéral pour une confirmation courte : une fenêtre modale ou une notification suffit.
- Évitez d'imbriquer un panneau latéral dans un autre : simplifiez le parcours en une seule vue.
Accessibilité & langues
Accessibilité
- Le focus est piégé dans le panneau tant qu'il est ouvert et revient au déclencheur à la fermeture.
- Le bouton de fermeture est toujours présent, même sans `title`, pour rester accessible au clavier et au tactile.
RTL & multilingue
- `side` est exprimé en logique (`start` / `end`) : le panneau glisse depuis la gauche en arabe pour `end`, sans code spécifique.
- Le sens de balayage (`swipeDirection`) est calculé à partir de `useLocale().dir`, jamais codé en dur.
Propriétés
Drawer
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| side | "start" | "end" | end | Côté logique de glissement, mirroré en RTL. |
| trigger | ReactElement | — | Élément déclencheur, rendu via `Drawer.Trigger`. |
| title | ReactNode | — | Titre affiché dans l'en-tête du panneau. |
| description | ReactNode | — | Texte d'appui sous le titre. |
| footer | ReactNode | — | Zone d'actions fixée en pied de panneau. |
| open | boolean | — | État contrôlé d'ouverture. |
| onOpenChange | (open: boolean) => void | — | Appelé à chaque changement d'état. |
| children | ReactNode | — | Contenu défilant du panneau. |