Pagination
<gcds-pagination>

Autres noms : index de pages, navigation de pages.

La pagination est une division du contenu entre plusieurs pages liées.

• GitHub
• Figma

Structure de la pagination

Structure de la pagination simple

Lien précédent

1. La flèche précédente est une aide visuelle qui indique qu’on navigue en arrière dans le flux de pages.
2. Le texte précédent est le texte qui accompagne la flèche précédente, indiquant que l’utilisateur·rice navigue vers la page précédente dans le flux.
3. Le libellé précédent indique à l’utilisateur·rice le libellé de la page précédente.

Lien suivant

1. Le texte suivant est le texte qui accompagne la flèche suivante, indiquant que l’utilisateur·rice navigue vers la page suivante dans le flux.
2. La flèche suivante est une aide visuelle qui indique qu’on navigue en avant dans le flux de pages.
3. Le libellé suivant indique à l’utilisateur·rice le libellé de la page suivante.

Structure de la pagination sous forme de liste

Grands écrans

1. Le lien précédent mène vers la page précédente du flux lorsqu’il est sélectionné.
2. Un lien de page mène vers la page correspondante dans le flux.
3. La page active indique la page sur laquelle la personne se trouve actuellement.
4. Les points de suspension remplacent toutes les pages qui ne s’affichent pas.
5. Le lien suivant mène vers la page suivante du flux lorsqu’il est sélectionné.

Petits écrans

1. Un lien de page mène vers la page correspondante dans le flux.
2. La page active indique la page sur laquelle la personne se trouve actuellement.
3. Les points de suspension remplacent toutes les pages qui ne s’affichent pas.
4. Le lien précédent mène vers la page précédente du flux lorsqu’il est sélectionné.
5. Le lien suivant mène vers la page suivante du flux lorsqu’il est sélectionné.

Lien précédent

1. La flèche précédente est une aide visuelle qui indique qu’on navigue en arrière dans le flux de pages.
2. Le texte précédent est le texte qui accompagne la flèche précédente, indiquant que l’utilisateur·rice navigue vers la page précédente dans le flux.

Lien suivant

1. Le texte suivant est le texte qui accompagne la flèche suivante, indiquant que l’utilisateur·rice navigue vers la page suivante dans le flux.
2. La flèche suivante est une aide visuelle qui indique qu’on navigue en avant dans le flux de pages.

Design et accessibilité pour le composant pagination

Rendez le contenu de la pagination facile à trouver

• Placez les renseignements les plus importants sur les premières pages afin qu’ils soient plus visibles.
• Placez le composant Pagination juste sous le contenu de la page que vous affichez et choisissez un alignement à gauche.
• Veillez à ce que les liens de navigation s’affichent sur une seule et même ligne.

Utilisez la pagination simple pour quelques pages

La pagination simple est plus adaptée à un contenu réparti sur 2 à 5 pages.

• Utilisez des sous-titres dans le cadre de la pagination simple pour indiquer à la personne où elle se trouve dans le flux.
• Incluez le numéro de la page et le nombre total de pages, ou le titre de la page dans le sous-titre pour fournir davantage de contexte.

Utilisez la pagination sous forme de liste pour un grand nombre de pages

Utilisez la pagination sous forme de liste lorsque le nombre de pages est important et que les seuls liens « Précédent » et « Suivant » rendraient la navigation fastidieuse.