Comparaison comportementale
Volet latéral vs Barre latérale
Différence décisive
Le Volet latéral est temporaire et recouvre la page jusqu’à la fin de sa tâche ; la Barre latérale fait partie de la mise en page et reste visible.
Critères de choix, liens et sources
- Volet latéralChoisis Volet latéral si le panneau s’ouvre pour une tâche ciblée puis se ferme, comme des filtres ou un détail.Ouvrir la fiche Volet latéral
- Barre latéraleChoisis Barre latérale si la région doit rester en place pour naviguer ou garder des outils à portée.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 ?
Volet latéral
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.
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.
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
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.
Lequel convient à ton besoin ?
Volet latéral
Modifier des filtres sans quitter les résultats
Barre latérale
Naviguer entre les sections stables d'un espace de travail
Différence et sources
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.
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
Volet latéral
Glisse depuis un bord latéral et reste attachée à ce bord.
Barre latérale
Une colonne latérale dans le flux du document, pas une superposition au-dessus de la page.
- Modalité
Volet latéral
Peut être modale ou non modale ; le spécimen est modal lorsque la page arrière est inerte.
Barre latérale
Région persistante non modale de la mise en page ; le contenu principal reste actif.
- Interactivité
Volet latéral
Contient des contrôles de navigation ou de tâche, avec focus contenu uniquement dans sa forme modale.
Barre latérale
Accueille navigation, filtres ou contrôles complémentaires persistants.
Neuf dimensions
- Déclenchement
Volet latéral
Un bouton explicite ouvre un panneau temporaire de tâche ou de navigation.
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é
Volet latéral
Peut être modale ou non modale ; le spécimen est modal lorsque la page arrière est inerte.
Barre latérale
Région persistante non modale de la mise en page ; le contenu principal reste actif.
- Positionnement
Volet latéral
Glisse depuis un bord latéral et reste attachée à ce bord.
Barre latérale
Une colonne latérale dans le flux du document, pas une superposition au-dessus de la page.
- Interactivité
Volet latéral
Contient des contrôles de navigation ou de tâche, avec focus contenu uniquement dans sa forme modale.
Barre latérale
Accueille navigation, filtres ou contrôles complémentaires persistants.
- Focus
Volet latéral
L'ouverture place le focus sur le titre ou le premier champ utile, le contient, puis le rend au déclencheur.
Barre latérale
Le focus circule normalement entre la barre et le contenu principal ; le repli conserve un contrôle logique focalisé.
- Fermeture
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.
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
Volet latéral
dialog[aria-modal=true]
Barre latérale
aside > nav[aria-label]
- Cas d’usage
Volet latéral
Modifier des filtres sans quitter les résultats
Barre latérale
Naviguer entre les sections stables d'un espace de travail
- Comportement mobile
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.
Barre latérale
La replier derrière une navigation explicite ou l’adapter en surface temporaire ; ne pas la comprimer en colonne illisible.
| Dimension | Volet latéralDrawer | Barre latéraleSidebar |
|---|---|---|
| Déclenchement | Un bouton explicite ouvre un panneau temporaire de tâche ou de navigation. | Généralement présente avec la mise en page ; un bouton de navigation peut la révéler sur petit écran. |
| Modalité | Peut être modale ou non modale ; le spécimen est modal lorsque la page arrière est inerte. | Région persistante non modale de la mise en page ; le contenu principal reste actif. |
| Positionnement | Glisse depuis un bord latéral et reste attachée à ce bord. | Une colonne latérale dans le flux du document, pas une superposition au-dessus de la page. |
| Interactivité | Contient des contrôles de navigation ou de tâche, avec focus contenu uniquement dans sa forme modale. | Accueille navigation, filtres ou contrôles complémentaires persistants. |
| Focus | L'ouverture place le focus sur le titre ou le premier champ utile, le contient, puis le rend au déclencheur. | Le focus circule normalement entre la barre et le contenu principal ; le repli conserve un contrôle logique focalisé. |
| 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. | 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 | Modifier des filtres sans quitter les résultats | Naviguer entre les sections stables d'un espace de travail |
| Comportement mobile | Utiliser un panneau large ou pleine largeur ; passer à une feuille basse si l’accès par le bord inférieur est plus naturel. | La replier derrière une navigation explicite ou l’adapter en surface temporaire ; ne pas la comprimer en colonne illisible. |