Drawer

Volet latéral

Un panneau temporaire qui glisse depuis un bord de la fenêtre, recouvre la page et se ferme lorsque sa tâche ciblée est terminée.

Avec vos mots

Ce que les gens décrivent

Alias documentés : tiroir latéral, panneau coulissant, feuille latérale

un panneau qui glisse depuis la droite
ouvrir les filtres au-dessus de la page actuelle
un volet latéral temporaire avec un fond assombri
afficher le panier depuis le bord de l'écran
une fenêtre latérale qui se ferme avec Échap
faire sortir les réglages sans changer de page

Essayer

Surfaces attachées à un bord

Comparer les trois comportements

Scénario comparatif partagé : Un espace de travail place une navigation ou des contrôles complémentaires le long d'un bord de l'écran tout en gardant la tâche principale dans son contexte.

Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.

Volet latéral

Un Volet latéral est temporaire et recouvre le contenu ; une Sidebar reste dans la mise en page, tandis qu'un Bottom sheet est ancré en bas et gère le glissement mobile.

Votre mission

Ouvrir les Filtres au bord droit, activer En stock, appliquer, puis rouvrir et appuyer sur Échap pour vérifier que le brouillon est annulé et que le focus revient.

Cas limite à vérifier

À 320 px, chaque filtre et action reste accessible, et Échap ferme sans appliquer un brouillon modifié au-dessus des résultats de mobilier.

Mission

Volet latéral - Drawer

Ouvrir les Filtres au bord droit, activer En stock, appliquer, puis rouvrir et appuyer sur Échap pour vérifier que le brouillon est annulé et que le focus revient.

État principal : Le panneau modal temporaire arrive de la droite au-dessus de la liste de mobilier, rend ces résultats inertes et restaure le déclencheur Filtres à la fermeture.

12 résultats

Mobilier de bureau

Bureau compact
En stock
Chaise réglable
Sur commande

Parties du spécimen

Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.

Voile de fond

La couche qui sépare une surface modale du contenu de page inactif.

À utiliser quand

Modifier des filtres sans quitter les résultats
Afficher un panier compact ou un inspecteur près du contenu

À éviter quand

La navigation doit rester visible entre les pages
La tâche nécessite toute la fenêtre ou plusieurs étapes

Comparer les concepts proches

Bottom sheet est ancré en bas et peut être glissé ; Drawer utilise un bord latéral défini, tandis que Sidebar reste dans la mise en page persistante.

Feuille inférieure

Sidebar reste dans la mise en page et ne piège pas le focus ; Drawer et Bottom sheet sont des surfaces temporaires qui peuvent rendre la page inerte.

Barre latérale

Build pack

Transformer ce concept en prompt utile

Choisissez la tâche et la destination. Les noms techniques restent en anglais.

Que voulez-vous faire ?

CréerModifierRéparer

Où utiliserez-vous le prompt ?Langue du promptLangue de l’interface à construire

Votre objectif

Détails techniques

Comportements

Entrer depuis un bord
Le panneau temporaire recouvre la page et arrive depuis un bord défini de la fenêtre.
Contenir le focus
Tant que la surface est modale, le focus clavier y reste jusqu'à sa fermeture.
Fermer avec Échap
Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent.

États

Volet fermé
Volet fermé
Volet ouvert
Volet ouvert

Transitions d’état

Volet fermé → Volet ouvert
Le déclencheur Filtres est activé et le volet temporaire arrive depuis le bord droit.
Volet ouvert → Volet fermé
Appliquer, Fermer ou Échap ferme le volet et rend le focus à Filtres.

Scénarios de test

Contexte: Une page de résultats de mobilier de bureau affiche la même liste Bureau compact et Chaise réglable pendant que les utilisateurs filtrent la disponibilité et parcourent les catégories sans quitter les résultats.
Mission: Ouvrir les Filtres au bord droit, activer En stock, appliquer, puis rouvrir et appuyer sur Échap pour vérifier que le brouillon est annulé et que le focus revient.
État principal: Le panneau modal temporaire arrive de la droite au-dessus de la liste de mobilier, rend ces résultats inertes et restaure le déclencheur Filtres à la fermeture.
Cas limite: À 320 px, chaque filtre et action reste accessible, et Échap ferme sans appliquer un brouillon modifié au-dessus des résultats de mobilier.

Accessibilité

Role: dialog with aria-modal=true for the modal specimen
Nom accessible: Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
Focus: L'ouverture place le focus sur le titre ou le premier champ utile, le contient, puis le rend au déclencheur.
Fermeture: Le contrôle fermer nommé et Échap fonctionnent toujours ; la fermeture par le voile est désactivée si elle peut perdre des changements.
Scroll: La page derrière la surface reste fixe. Le contenu long défile dans le panneau et le glissement tactile ne prive pas le contenu imbriqué de son défilement.
Annonce: Le titre accessible et la description facultative identifient la tâche du volet à l'entrée du focus.
Clavier: Tab reste dans le volet pendant l'ouverture
Échap ferme sans appliquer de changement involontaire
Entrée active uniquement le contrôle focalisé

Bindings

Dialog.Root
implementationKind
shadcn-radix
nativeElement
Non applicable
ariaPattern
sheet
radixPrimitive
Dialog
shadcnRecipe
Sheet
runtimeDependency
@radix-ui/react-dialog@1.1.19
packageName
@radix-ui/react-dialog
exportName
Dialog.Root
exactVersion
1.1.19
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Non applicable
validFrom
Non applicable
validUntil
Non applicable
Limite d’équivalence : Radix has no Drawer primitive. This binding composes Dialog as a modal side panel and keeps placement separate from modality.
Vérifier la source du binding

Sources

WAI-ARIA APG: Dialog Modal Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Drawer: modal dialog labeling, initial focus, focus containment, Escape dismissal, and focus return guidance.
shadcn/ui: Sheet
shadcn/ui · documentation · 2026-07-16
Affirmation couverte : Drawer: documented shadcn Sheet recipe built on Radix Dialog and its side-placement composition.

Vérifié le 2026-07-16 · rev. 1

Responsable: SkillCodex Editorial
Statut: review
Relecture: Independent editorial review pending
Prochaine revue: 2026-10-16
Publication: Non publiée
Historique: Brouillon initial sourcé du MVP, en attente de relecture indépendante.

Volet latéral - Drawer

Ouvrir les Filtres au bord droit, activer En stock, appliquer, puis rouvrir et appuyer sur Échap pour vérifier que le brouillon est annulé et que le focus revient.

État principal : Le panneau modal temporaire arrive de la droite au-dessus de la liste de mobilier, rend ces résultats inertes et restaure le déclencheur Filtres à la fermeture.