Sélection de la langue

Pagination

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Utilisez un index de pagination pour les documents longs qu'il est préférable de diviser en plusieurs pages. Un utilisateur peut sélectionner une page particulière dans un document à l'aide des fonctions « Suivant » ou « Précédent », ou (s'ils sont présents) des hyperliens de pagination numériques.

Conception et codage

Utilisation de base

Défaut

L'utiliser pour séparer des éléments de contenu et les étendre sur un grand nombre de pages. Ainsi, les sections au contenu volumineux sont plus faciles à lire.

Bonne utilisation

Points de conformité :

  • Utilisez .pagination pour numéroter les pages distinctes d'une section au contenu volumineux
  • Assurez-vous que la pagination est toujours alignée à gauche
  • Assurez-vous que les liens de navigation s'affichent sur une seule rangée et n'activez pas le retour à la ligne, à moins qu'il y ait une raison valide de le faire
  • Ajoutez du texte invisible à l'aide de <span class"wb-inv"> pour rendre les liens descriptifs
  • Assurez-vous qu'il y a un espace entre le numéro de pagination et <span class"wb-inv"> pour faire en sorte que les lecteurs d'écran puissent interpréter correctement le code
  • Comprenez et mettez en œuvre les principes à l'appui connexes
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ul class="pagination">
  <li><a href="#" rel="prev">Précédent</a></li>
  <li><a href="#">1 <span class="wb-inv">Aller à la page   1</span></a>
  <li><a href="#">2 <span class="wb-inv">Aller à la page   2</span></a></li>
  <li><a href="#" rel="next">Suivant</a></li>
</ul>

Utilisation améliorée

État actif

L'utiliser pour indiquer la page actuelle où se trouve l'utilisateur.

Bonne utilisation

Point d'observation :

  • Utilisez .active pour indiquer la page actuelle où se trouve l'utilisateur dans la pagination
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ul class="pagination">
  <li><a href="#" rel="prev">Précédent</a></li>
  <li class="active"><a href="#">1 <span class="wb-inv">(current) Aller à la page  1</span></a></li>
  ...
</ul>

État désactivé

L'utiliser pour cacher des éléments de navigation inutiles, par exemple, un bouton « Précédent » si l'utilisateur se trouve à la « page 1 » d'une section de contenu.

Apparence

« Précédent » est désactivé, est donc caché :

Bonne utilisation

Point d'observation :

  • Utilisez .disabled pour les liens non cliquables (cachés) à l'intérieur de la pagination
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<ul class="pagination">
  <li class="disabled"><a href="#" rel="prev">Précédent</a></li>
  <li><a href="#">1 <span class="wb-inv">Aller à la page  1</span></a></li>
  ...
</ul>

Redimensionnement

Utilisez .pagination-lg ou .pagination-sm pour les options de taille de pagination supplémentaires.

Bonne utilisation

Points de conformité :

  • Taille par défaut : L'utiliser pour une pagination typique
  • Petits boutons : Les utiliser lorsque la pagination apparaît dans un petit espace. Cela permet de réduire la taille des boutons afin de maximiser le nombre de boutons qui s'affichent dans une seule rangée
  • Gros bouton : L'utiliser lorsque la pagination doit être plus évidente sur la page. Puisque les boutons par défaut assurent déjà une mise en évidence et un appel à l'action, l'augmentation de la taille de ces boutons est peu utile ou nécessaire
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
// Défaut :
<ul class="pagination">...</ul>

// Grand :
<ul class="pagination pagination-lg">...</ul>

// Petit :
<ul class="pagination pagination-sm">...</ul>

SimplePager

L'utiliser pour créer une pagination simple de liens « Précédent » et « Suivant » seulement.

Apparence

Défaut

Boutons de justification complète

État désactivé (bouton « Précédent » caché)

Bonne utilisation

Points de conformité :

  • Utilisez .pager lorsqu'il faut seulement établir un lien avec la page « Précédent » ou « Suivant »
  • Utilisez .previous et .next à l'intérieur des éléments <li> pour justifier entièrement les liens <ul class="pager"
  • Comprenez et mettez en œuvre les principes à l'appui connexes
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
// Défaut :
<ul class="pager">
  <li><a href="#" rel="prev">Précédent</a></li>
  <li><a href="#" rel="next">Suivant</a></li>
</ul>

// Boutons de justification complète :
<ul class="pager">
  <li class="previous"><a href="#" rel="prev">Précédent</a></li>
  <li class="next"><a href="#" rel="next">Suivant</a></li>
</ul>

// État désactivé (« Précédent » caché) :
<ul class="pager">
  <li class="previous disabled"><a href="#" rel="prev">Précédent</a></li>
  <li class="next"><a href="#" rel="next">Suivant</a></li>
</ul>

Fonctions complémentaires

Des caractéristiques et des comportements complémentaires sont disponibles.

Principes à l'appui

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe)

Date de modification: