Comparaison comportementale
Feuille basse vs Barre latérale
Différence décisive
La Feuille basse est une surface temporaire qui monte depuis le bas ; la Barre latérale reste dans la mise en page et ne piège pas le focus.
Critères de choix, liens et sources
- Feuille basseChoisis Feuille basse si la surface apparaît pour une tâche ponctuelle, surtout sur mobile, puis disparaît.Ouvrir la fiche Feuille basse
- Barre latéraleChoisis Barre latérale si la navigation doit rester visible et persistante dans l’espace de travail.Ouvrir la fiche Barre latérale
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.
Barre latérale
Mission
Barre latérale - Sidebar
Choisir Chaises dans la navigation persistante des catégories, replier la barre latérale et vérifier que les résultats de mobilier s'adaptent sans perdre le focus.
É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 navigation persistante des catégories occupe une largeur stable près de la même liste de mobilier, marque la catégorie actuelle et ne rend jamais les résultats inertes.
- Cas limite
- Quand la mise en page définie par le produit manque de place, un menu nommé séparément peut ouvrir une navigation temporaire des catégories pour les mêmes résultats.
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
Barre latérale
Naviguer entre les sections stables d'un espace de travail
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.
Barre latérale
Une colonne latérale dans le flux du document, pas une superposition au-dessus de la page.
- Modalité
Feuille basse
Souvent modale une fois déployée, avec l’arrière-plan inerte derrière un voile.
Barre latérale
Région persistante non modale de la mise en page ; le contenu principal reste actif.
- 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.
Barre latérale
Accueille navigation, filtres ou contrôles complémentaires persistants.
Neuf dimensions
- Déclenchement
Feuille basse
Un toucher ouvre la feuille ; sa poignée peut ensuite modifier son niveau par glissement.
Barre latérale
Généralement présente avec la mise en page ; un bouton de navigation peut la révéler sur petit écran.
- Modalité
Feuille basse
Souvent modale une fois déployée, avec l’arrière-plan inerte derrière un voile.
Barre latérale
Région persistante non modale de la mise en page ; le contenu principal reste actif.
- Positionnement
Feuille basse
Attachée au bord inférieur, avec des hauteurs d’arrêt éventuellement définies.
Barre latérale
Une colonne latérale dans le flux du document, pas une superposition au-dessus de la page.
- 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.
Barre latérale
Accueille navigation, filtres ou contrôles complémentaires persistants.
- Focus
Feuille basse
Le focus entre dans la feuille modale, y reste et revient au déclencheur Filtres après la fermeture.
Barre latérale
Le focus circule normalement entre la barre et le contenu principal ; le repli conserve un contrôle logique focalisé.
- 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.
Barre latérale
Une barre persistante se replie, elle ne se ferme pas ; son équivalent mobile temporaire suit son propre contrat Drawer.
- Rôle accessible
Feuille basse
dialog[aria-modal=true]
Barre latérale
aside > nav[aria-label]
- Cas d’usage
Feuille basse
Afficher les détails d'un lieu sur une carte mobile
Barre latérale
Naviguer entre les sections stables d'un espace de travail
- Comportement mobile
Feuille basse
Pensée pour la portée tactile ; respecter la zone sûre, le clavier logiciel et le défilement imbriqué.
Barre latérale
La replier derrière une navigation explicite ou l’adapter en surface temporaire ; ne pas la comprimer en colonne illisible.
| Dimension | Feuille basseBottom sheet | Barre latéraleSidebar |
|---|---|---|
| Déclenchement | Un toucher ouvre la feuille ; sa poignée peut ensuite modifier son niveau par glissement. | Généralement présente avec la mise en page ; un bouton de navigation peut la révéler sur petit écran. |
| Modalité | Souvent modale une fois déployée, avec l’arrière-plan inerte derrière un voile. | Région persistante non modale de la mise en page ; le contenu principal reste actif. |
| Positionnement | Attachée au bord inférieur, avec des hauteurs d’arrêt éventuellement définies. | Une colonne latérale dans le flux du document, pas une superposition au-dessus de la page. |
| Interactivité | Combine contrôles et glissement vertical ; le défilement interne ne doit pas entrer en conflit avec le geste de la feuille. | Accueille navigation, filtres ou contrôles complémentaires persistants. |
| Focus | Le focus entre dans la feuille modale, y reste et revient au déclencheur Filtres après la fermeture. | Le focus circule normalement entre la barre et le contenu principal ; le repli conserve un contrôle logique focalisé. |
| 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. | Une barre persistante se replie, elle ne se ferme pas ; son équivalent mobile temporaire suit son propre contrat Drawer. |
| Rôle accessible | dialog[aria-modal=true] | aside > nav[aria-label] |
| Cas d’usage | Afficher les détails d'un lieu sur une carte mobile | Naviguer entre les sections stables d'un espace de travail |
| Comportement mobile | Pensée pour la portée tactile ; respecter la zone sûre, le clavier logiciel et le défilement imbriqué. | La replier derrière une navigation explicite ou l’adapter en surface temporaire ; ne pas la comprimer en colonne illisible. |