Les barres de défilement indiquent la position de l'utilisateur dans un document plus grand que la zone d'affichage. Elles lui permettent de naviguer dans le reste du document en déplaçant la zone d'affichage de la fenêtre vers le haut ou vers le bas.
Les utilisateurs interagissent avec les barres de défilement par le toucher, la molette ou le pavé tactile. Appuyer sur les flèches de la barre de défilement permet de faire défiler le contenu page par page, c'est-à-dire par incréments équivalents à la hauteur de l'écran. Cependant, si l'utilisateur effectue un défilement rapide (en fonction de la sensibilité de l'écran tactile), ce mouvement peut créer une inertie qui fait défiler le contenu au-delà d'une page. Quel que soit le mode de défilement, celui-ci doit toujours se positionner automatiquement sur un élément.
Anatomie
La barre de défilement est composée des boutons de défilement vers le haut et vers le bas, ainsi que d'un indicateur de progression. Des chevrons indiquent le sens du défilement. L'indicateur de progression, optionnel, indique le contenu visible et la position de défilement par rapport à la quantité totale de contenu sur la page.
2. Indicateur de progression du défilement
3. Possibilité de faire défiler vers le bas
Spécifications
Position de la barre de défilement avec navigation principale empilée et barre de contrôle réduite
Position de la barre de défilement avec l'en-tête de l'application uniquement
Position de la barre de défilement avec l'en-tête de l'application et la barre de contrôle
Position de la barre de défilement avec l'en-tête de l'application et la barre de contrôle étendue
Position de la barre de défilement avec la barre d'application/l'en-tête et la barre de contrôle réduite
Position de la barre de défilement avec barre d'application/en-tête uniquement
Position de la barre de défilement avec l'en-tête de l'application et la barre de contrôle
Position de la barre de défilement avec l'en-tête de l'application et la barre de contrôle étendue
Position de la barre de défilement avec une hauteur d'écran courte
Indicateur de progression de défilement optionnel
Styles
Couleur
| Élément | Couleur (mode jour) | Couleur (mode nuit) |
|---|---|---|
| Icônes principales - état actif | Blanc | Blanc à 88% |
| Icônes principales - état inactif | Blanc à 56% | Blanc à 50% |
| Indicateur de progression du défilement | Blanc à 16% | Blanc à 12% |
Tailles
| Élément | Taille (dp) |
|---|---|
| Icône principale | 44 |
| Cible tactile | 76 |
| largeur de l'indicateur de progression du défilement | 6 |
| Rayon d'angle arrondi (R4) | Complet |
Exemples
