Bottom sheet

Feuille inférieure

Une surface pensée pour mobile, attachée au bord inférieur, qui peut s'ouvrir à des hauteurs stables et accepter le glissement.

Avec vos mots

Ce que les gens décrivent

Alias documentés : feuille mobile, panneau inférieur, feuille à glisser

un panneau qui remonte du bas sur mobile
faire glisser cette feuille plus haut pour voir davantage
un panneau de téléphone avec une poignée
afficher des actions rapides au-dessus du bord inférieur
une fiche de carte que je peux tirer vers le haut
un panneau inférieur à mi-hauteur ou pleine hauteur

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.

Feuille inférieure

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.

Votre mission

Sur mobile, ouvrir Filtres, faire passer la feuille de mi-hauteur à pleine hauteur par glissement ou boutons, activer En stock et appliquer.

Cas limite à vérifier

La réduction des animations supprime le mouvement de ressort, et le clavier permet de développer, replier, appliquer le filtre de disponibilité et fermer sans glisser.

Mission

Feuille basse - Bottom sheet

Sur mobile, ouvrir Filtres, faire passer la feuille de mi-hauteur à pleine hauteur par glissement ou boutons, activer En stock et appliquer.

État principal : La feuille mobile temporaire est attachée en bas à mi-hauteur, garde les mêmes résultats de mobilier visibles derrière elle et peut s'ancrer en pleine hauteur.

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

Afficher les détails d'un lieu sur une carte mobile
Proposer une surface mobile compacte d'action ou de sélection

À éviter quand

Le placement latéral sur ordinateur définit le comportement
Le glissement est le seul moyen d'atteindre le contenu ou fermer

Comparer les concepts proches

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.

Volet latéral

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

Glisser entre des positions
Le glissement tactile déplace la feuille entre des hauteurs stables, sans priver les contrôles du clavier.
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

Feuille fermée
Feuille fermée
Feuille à mi-hauteur
Feuille à mi-hauteur
Feuille en pleine hauteur
Feuille en pleine hauteur

Transitions d’état

Feuille fermée → Feuille à mi-hauteur
Le déclencheur Filtres ouvre la feuille à son point initial de mi-hauteur.
Feuille à mi-hauteur → Feuille en pleine hauteur
Un glissement vers le haut ou le bouton Agrandir place la feuille en pleine hauteur.
Feuille en pleine hauteur → Feuille à mi-hauteur
Un glissement vers le bas ou le bouton Réduire ramène la feuille à mi-hauteur.
Feuille à mi-hauteur → Feuille fermée
Appliquer confirme le filtre, ou Échap abandonne son brouillon ; les deux ferment la feuille à mi-hauteur et rendent le focus à Filtres.
Feuille en pleine hauteur → Feuille fermée
Appliquer confirme le filtre, ou Échap abandonne son brouillon ; les deux ferment la feuille en pleine hauteur et rendent 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: Sur mobile, ouvrir Filtres, faire passer la feuille de mi-hauteur à pleine hauteur par glissement ou boutons, activer En stock et appliquer.
État principal: La feuille mobile temporaire est attachée en bas à mi-hauteur, garde les mêmes résultats de mobilier visibles derrière elle et peut s'ancrer en pleine hauteur.
Cas limite: La réduction des animations supprime le mouvement de ressort, et le clavier permet de développer, replier, appliquer le filtre de disponibilité et fermer sans glisser.

Accessibilité

Role: dialog with aria-modal=true while the sheet makes the furniture results inert
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: Le focus entre dans la feuille modale, y reste et revient au déclencheur Filtres après la fermeture.
Fermeture: Le contrôle fermer, Échap et un geste vers le bas dépassant le seuil prévu ferment ; les petits glissements accidentels reviennent en place.
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 de la feuille, son état modal, son état développé et les changements de chargement sont disponibles sans dépendre du mouvement.
Clavier: Tab atteint tous les contrôles
Des boutons remplacent les gestes développer et replier
Échap ferme la feuille modale

Bindings

Drawer
implementationKind
specialized
nativeElement
Non applicable
ariaPattern
dialog when modal
radixPrimitive
Non applicable
shadcnRecipe
Drawer (Radix backend)
runtimeDependency
vaul@1.1.2
packageName
vaul
exportName
Drawer
exactVersion
1.1.2
status
exception
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Non applicable
validFrom
Non applicable
validUntil
Non applicable
Limite d’équivalence : Vaul provides drag and snap behavior for this mobile surface; it is not a generic replacement for Dialog, Drawer, or Sidebar.
Vérifier la source du binding

Sources

Vaul: Drawer Documentation
Emil Kowalski · documentation · 2026-07-16
Affirmation couverte : Bottom sheet: documented Vaul Drawer composition, drag interaction, snap behavior, and runtime dependency.
WAI-ARIA APG: Dialog Modal Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Bottom sheet: modal dialog labeling, initial focus, focus containment, Escape dismissal, and focus return guidance.

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.

Feuille basse - Bottom sheet

Sur mobile, ouvrir Filtres, faire passer la feuille de mi-hauteur à pleine hauteur par glissement ou boutons, activer En stock et appliquer.

État principal : La feuille mobile temporaire est attachée en bas à mi-hauteur, garde les mêmes résultats de mobilier visibles derrière elle et peut s'ancrer en pleine hauteur.