Pagination

Navigation par pages : page précédente / numéros de page / page suivante / ellipse / changement de taille de page / saut de page / total. L'algorithme de contraction de la fenêtre de numéros est implémenté sous forme de fonctions pures dans la couche core, vérifiables par des tests exhaustifs.

Utilisation de base

Utilisation de base

• •••

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="120" />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="120" />
</template>

Total et changement de taille de page

Total et changement de taille de page

Total : 480 éléments

• •••

Éléments par page10 / page20 / page30 / page40 / page

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-size-changer />
</template>

Saut de page

Saut de page

Total : 480 éléments

• •••

Aller à

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" show-total show-jumper />
</template>

Mode compact

Mode compact

1 / 48Aller à

<script setup lang="ts">
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

<script>
export default {}
</script>

<template>
  <LhPagination :total="480" simple show-jumper />
</template>

Usage contrôlé

Usage contrôlé

• •••

Page actuelle : 2

<script setup lang="ts">
import { ref } from 'vue'
const page = ref(2)
const pageSize = ref(20)
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

<script>
export default {
  data() {
    return { page: 2, pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination v-model:current="page" :total="95" />
</template>

Taille de page et désactivation

v-model:page-size contrôle la taille de page, page-sizes personnalise les options de taille ; disabled désactive l'ensemble de la pagination.

Taille de page et désactivation

• •••

Éléments par page10 / page20 / page50 / page100 / page

Taille de page : 20

• •••

<script setup lang="ts">
import { ref } from 'vue'
const pageSize = ref(20)
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

<script>
export default {
  data() {
    return { pageSize: 20 }
  },
}
</script>

<template>
  <LhPagination
    v-model:page-size="pageSize"
    :total="480"
    show-size-changer
    :page-sizes="[10, 20, 50, 100]"
  />
  <LhPagination :total="480" disabled />
</template>

API Pagination

Props

Prop	Description	Type	Valeur par défaut
total	Nombre total de données (requis)	number	—
pageSize	Taille de page	number	10
current	Page actuelle (v-model:current)	number	—
pageSizes	Options de taille de page	number[]	() => [10, 20, 30, 40]
showTotal	Afficher le nombre total	boolean	false
showSizeChanger	Afficher le sélecteur de taille de page	boolean	false
showJumper	Afficher le champ de saut de page	boolean	false
simple	Mode compact	boolean	false
disabled	Désactivé	boolean	false
sx	Props de mise en page sx	LhSxProps	—

Events

Événement	Description	Callback
update:current	La page actuelle change (v-model)	(page: number)
update:pageSize	La taille de page change (v-model:pageSize)	(size: number)
change	Le numéro de page change	(page: number)
size-change	La taille de page change	(size: number)

Accessibilité

• L'élément racine est un <nav aria-label="pagination">
• Le bouton de la page actuelle reçoit automatiquement aria-current="page"
• Chaque bouton de numéro de page ainsi que les boutons page précédente / suivante possèdent leur propre aria-label (issus du paquet de langue pagination.page / prev / next) ; les symboles « ‹ » et « › » sont masqués par aria-hidden
• Le champ de saut de page possède un véritable <label> (issu du paquet de langue pagination.goto)
• Le sélecteur de taille de page est un <select> natif, avec un aria-label (issu du paquet de langue pagination.sizeChangerLabel)
• L'ellipse est un élément purement visuel aria-hidden, sans incidence sur la navigation clavier

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/pagination/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhPaginationProps

export interface LhPaginationProps {
  /** Nombre total de données (requis) */
  total: number
  /** Taille de page */
  pageSize?: number
  /** Page actuelle (v-model:current) */
  current?: number
  /** Options de taille de page */
  pageSizes?: number[]
  /** Afficher le nombre total */
  showTotal?: boolean
  /** Afficher le sélecteur de taille de page */
  showSizeChanger?: boolean
  /** Afficher le champ de saut de page */
  showJumper?: boolean
  /** Mode compact */
  simple?: boolean
  /** Désactivé */
  disabled?: boolean
  /** Props de mise en page sx */
  sx?: LhSxProps
}