Pagination
La pagination de naviguer entre différentes pages ou ensembles de contenu découpés.
Description
La pagination est utilisée pour fractionner un contenu volumineux en plusieurs pages, afin de faciliter la navigation et réduire le temps de chargement.
Elle permet à l’utilisateur de se repérer dans la séquence et d’accéder directement à une page précise ou à la suivante/précédente.
Ce composant est souvent placé en bas d’une liste, d’un tableau ou d’une galerie.
Plateformes
Anatomie
-
Boutons de navigation : boutons permettant de passer à la page précédente ou suivante.
-
Page active : numéro visuellement mis en avant pour indiquer la position actuelle.
-
État hover
-
Ellipses (optionnel) : indicateur visuel utilisé pour condenser l’affichage des pages lorsque leur nombre est élevé.
-
Sélecteur d'affichage (optionnel) : permet de sélectionner le nombre d'éléments affichés par page.
Usage
Quand l'utiliser ?
Utiliser la pagination dans les cas suivants :
- Pour afficher un grand volume de contenu en plusieurs pages distinctes.
- Lorsque l’utilisateur doit pouvoir accéder directement à une page précise.
- Pour réduire le temps de chargement en évitant d’afficher tout le contenu d’un coup.
- Pour offrir un meilleur contrôle de navigation par rapport à un défilement infini.
Do's and don'ts
-
Do
Lorsque la première ou dernière page est sélectionnée, mettre en disabled le bouton “page précédente” ou “page suivante”.
Anatomie
-
Boutons de navigation : boutons permettant de passer à la page précédente ou suivante.
-
Page active : numéro visuellement mis en avant pour indiquer la position actuelle.
-
État hover
-
Ellipses (optionnel) : indicateur visuel utilisé pour condenser l’affichage des pages lorsque leur nombre est élevé.
-
Sélecteur d'affichage (optionnel) : permet de sélectionner le nombre d'éléments affichés par page.
Usage
Quand l'utiliser ?
Utiliser la pagination dans les cas suivants :
- Pour afficher un grand volume de contenu en plusieurs pages distinctes.
- Lorsque l’utilisateur doit pouvoir accéder directement à une page précise.
- Pour réduire le temps de chargement en évitant d’afficher tout le contenu d’un coup.
- Pour offrir un meilleur contrôle de navigation par rapport à un défilement infini.
Do's and don'ts
-
Do
Lorsque la première ou dernière page est sélectionnée, mettre en disabled le bouton “page précédente” ou “page suivante”.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.