Statut
Component checklist
Usage
<dsa-pagination current-page="1" total-items="100" items-per-page="10">
</dsa-pagination>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/pagination/pagination.js';
import type { DSAPagination } from '@ds-autonomie/web-components';
</script>
Code HTML à implémenter pour utiliser le composant badge
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
compact |
Affiche la pagination avec un aspect compact. Doit être à false pour une pagination de tableau |
boolean |
false |
|
currentPage current-page |
Le numéro de la page affichée |
number |
1 |
|
totalItems total-items |
Le nombre total d'éléments |
number |
1 |
|
itemsPerPage items-per-page |
Le nombre d'éléments affichés par page |
number |
10 |
|
itemsPerPageLabel items-per-page-label |
Libellé personnalisé pour le nombre d'items par page |
string |
'' |
|
loading |
Affiche un état de chargement. Héritée du parent dsa-table-container le cas échéant. |
boolean |
false |
|
mobile |
Affiche la pagination en mode mobile |
boolean |
false |
|
navAriaLabel nav-aria-label |
Aria-label personnalisé pour l'élément <nav> de la pagination |
string |
'' |
|
navigationType navigation-type |
Role Aria des boutons de pagination. Doit être défini sur link si l'action déclenche un rechargement de la page ou une navigation vers une autre page. |
'button' | 'link' |
'button' |
|
skeletonEffect skeleton-effect |
Désigne quel effet le squelette utilisera. Héritée du parent dsa-table-container le cas échéant. |
'pulse' | 'sheen' | 'none' |
none |
|
totalItemsLabel total-items-label |
Libellé personnalisé pour le nombre total d'items |
string |
'' |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
Utilisé pour permettre à l'utilisateur de modifier le nombre de résultats affichés par page. Dans ce cas, ajouter au slot un composant dsa-select et des composants dsa-option |