Pagination

Affichage paginé lorsque les données sont trop nombreuses ; prend en charge le mode contrôlé / non contrôlé, le changement de taille de page et le saut direct.

Utilisation de base

Utilisation de base

import { useState } from 'react'
import { LhPagination } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhPagination
      total={128}
      current={current}
      onChange={(page) => setCurrent(page)}
    />
  )
}

Pagination Props

Prop	Description	Type	Options	Valeur par défaut
total	Nombre total de données (requis)	number	—	—
current	Page courante (contrôlée, à partir de 1)	number	—	—
defaultCurrent	Page courante par défaut (non contrôlée)	number	—	1
pageSize	Taille de page (contrôlée)	number	—	—
defaultPageSize	Taille de page par défaut (non contrôlée)	number	—	10
pageSizes	Options de taille de page	number[]	—	[10, 20, 30, 40]
siblingCount	Nombre de numéros de page affichés de chaque côté de la page courante	number	—	1
showTotal	Afficher ou non le nombre total	boolean	—	false
showSizeChanger	Afficher ou non le sélecteur de taille de page	boolean	—	false
showJumper	Afficher ou non le champ de saut de page	boolean	—	false
simple	Mode compact	boolean	—	false
disabled	Désactivé ou non	boolean	—	false
sx	Raccourci de mise en page	SxProps	—	—

Événements de Pagination

Événement	Description	Signature du rappel	Équivalent Vue
onChange	Déclenché au changement de page (changement de page, saut direct, et clamp consécutif à un changement de taille de page)	(current: number, pageSize: number) => void	@change
onSizeChange	Déclenché au changement de taille de page	(pageSize: number) => void	@size-change

Contrôlé / non contrôlé

Fournir current active le mode contrôlé (le composant ne détient pas d'état interne : il est piloté de l'extérieur) ; fournir defaultCurrent repose sur l'état interne non contrôlé. Même logique pour pageSize. Dans les deux modes, onChange est déclenché.

Clamp des numéros de page

Lorsqu'une baisse de pageSize réduit le nombre total de pages et que la page courante sort des limites, le composant ramène automatiquement à la dernière page au sein de l'effect et déclenche onChange, sans nécessiter de repli côté logique applicative.

Interaction clavier

Champ de saut de page : Entrée valide le saut, et la perte de focus valide également ; une valeur illégale (hors limites ou non numérique) est ramenée (clamp) dans l'intervalle valide.

Accessibilité

L'élément racine est un <nav aria-label> ; la page courante porte aria-current="page", et chaque bouton de numéro de page a un aria-label (modèle du pack de langue pagination.page, par ex. « Page 3 »).

ref

forwardRef<HTMLElement> — élément racine <nav>.

Styles

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/pagination'