Comparaison comportementale
Feuille basse vs Volet latéral
Différence décisive
La Feuille basse est ancrée au bord inférieur, s’ouvre à des hauteurs stables et se glisse au doigt ; le Volet latéral entre depuis un bord latéral défini.
Critères de choix, liens et sources
- Feuille basseChoisis Feuille basse si l’action est compacte, surtout sur mobile, et gagne à rester au-dessus du contenu.Ouvrir la fiche Feuille basse
- Volet latéralChoisis Volet latéral si le panneau est plus structuré et entre depuis la gauche ou la droite.Ouvrir la fiche Volet latéral
Voir les neuf dimensionsVoir les sources
Surfaces attachées à un bord
Essayer
La surface doit-elle rester persistante, entrer depuis un bord latéral ou monter depuis le bas ?
Feuille basse
Contexte commun aux essais
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.
Feuille basse
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.
12 résultats
Mobilier de bureau
Bureau compact
En stock
Chaise réglable
Sur commande
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- 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
- Au clavier, il est possible de développer, replier, appliquer le filtre de disponibilité et fermer sans dépendre du glissement.
Volet latéral
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.
12 résultats
Mobilier de bureau
Bureau compact
En stock
Chaise réglable
Sur commande
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- 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
- Sur une largeur étroite, chaque filtre et action reste accessible, et Échap ferme sans appliquer le brouillon modifié aux résultats de mobilier.
Ce que cet essai montre
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.
Lequel convient à ton besoin ?
Feuille basse
Afficher les détails d'un lieu sur une carte mobile
Volet latéral
Modifier des filtres sans quitter les résultats
Différence et sources
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.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Voile de fond
La couche qui sépare une surface modale du contenu de page inactif.
Décision
Question de famille
La surface doit-elle rester persistante, entrer depuis un bord latéral ou monter depuis le bas ?
Trois critères pour choisir
- Positionnement
Feuille basse
Attachée au bord inférieur, avec des hauteurs d’arrêt éventuellement définies.
Volet latéral
Glisse depuis un bord latéral et reste attachée à ce bord.
- Modalité
Feuille basse
Souvent modale une fois déployée, avec l’arrière-plan inerte derrière un voile.
Volet latéral
Peut être modale ou non modale ; le spécimen est modal lorsque la page arrière est inerte.
- Interactivité
Feuille basse
Combine contrôles et glissement vertical ; le défilement interne ne doit pas entrer en conflit avec le geste de la feuille.
Volet latéral
Contient des contrôles de navigation ou de tâche, avec focus contenu uniquement dans sa forme modale.
Neuf dimensions
- Déclenchement
Feuille basse
Un toucher ouvre la feuille ; sa poignée peut ensuite modifier son niveau par glissement.
Volet latéral
Un bouton explicite ouvre un panneau temporaire de tâche ou de navigation.
- Modalité
Feuille basse
Souvent modale une fois déployée, avec l’arrière-plan inerte derrière un voile.
Volet latéral
Peut être modale ou non modale ; le spécimen est modal lorsque la page arrière est inerte.
- Positionnement
Feuille basse
Attachée au bord inférieur, avec des hauteurs d’arrêt éventuellement définies.
Volet latéral
Glisse depuis un bord latéral et reste attachée à ce bord.
- Interactivité
Feuille basse
Combine contrôles et glissement vertical ; le défilement interne ne doit pas entrer en conflit avec le geste de la feuille.
Volet latéral
Contient des contrôles de navigation ou de tâche, avec focus contenu uniquement dans sa forme modale.
- Focus
Feuille basse
Le focus entre dans la feuille modale, y reste et revient au déclencheur Filtres après la fermeture.
Volet latéral
L'ouverture place le focus sur le titre ou le premier champ utile, le contient, puis le rend au déclencheur.
- Fermeture
Feuille basse
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.
Volet latéral
Le contrôle fermer nommé et Échap fonctionnent toujours ; la fermeture par le voile est désactivée si elle peut perdre des changements.
- Rôle accessible
Feuille basse
dialog[aria-modal=true]
Volet latéral
dialog[aria-modal=true]
- Cas d’usage
Feuille basse
Afficher les détails d'un lieu sur une carte mobile
Volet latéral
Modifier des filtres sans quitter les résultats
- Comportement mobile
Feuille basse
Pensée pour la portée tactile ; respecter la zone sûre, le clavier logiciel et le défilement imbriqué.
Volet latéral
Utiliser un panneau large ou pleine largeur ; passer à une feuille basse si l’accès par le bord inférieur est plus naturel.
| Dimension | Feuille basseBottom sheet | Volet latéralDrawer |
|---|---|---|
| Déclenchement | Un toucher ouvre la feuille ; sa poignée peut ensuite modifier son niveau par glissement. | Un bouton explicite ouvre un panneau temporaire de tâche ou de navigation. |
| Modalité | Souvent modale une fois déployée, avec l’arrière-plan inerte derrière un voile. | Peut être modale ou non modale ; le spécimen est modal lorsque la page arrière est inerte. |
| Positionnement | Attachée au bord inférieur, avec des hauteurs d’arrêt éventuellement définies. | Glisse depuis un bord latéral et reste attachée à ce bord. |
| Interactivité | Combine contrôles et glissement vertical ; le défilement interne ne doit pas entrer en conflit avec le geste de la feuille. | Contient des contrôles de navigation ou de tâche, avec focus contenu uniquement dans sa forme modale. |
| Focus | Le focus entre dans la feuille modale, y reste et revient au déclencheur Filtres après la fermeture. | 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, Échap et un geste vers le bas dépassant le seuil prévu ferment ; les petits glissements accidentels reviennent en place. | Le contrôle fermer nommé et Échap fonctionnent toujours ; la fermeture par le voile est désactivée si elle peut perdre des changements. |
| Rôle accessible | dialog[aria-modal=true] | dialog[aria-modal=true] |
| Cas d’usage | Afficher les détails d'un lieu sur une carte mobile | Modifier des filtres sans quitter les résultats |
| Comportement mobile | Pensée pour la portée tactile ; respecter la zone sûre, le clavier logiciel et le défilement imbriqué. | Utiliser un panneau large ou pleine largeur ; passer à une feuille basse si l’accès par le bord inférieur est plus naturel. |