Pagination 分頁

資料量過多時分頁展示，支援受控 / 非受控、每頁條數切換、跳頁。

基礎用法

基礎用法

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

屬性	說明	型別	可選值	預設值
total	資料總數（必填）	number	—	—
current	當前頁（受控，1 起）	number	—	—
defaultCurrent	當前頁預設值（非受控）	number	—	1
pageSize	每頁條數（受控）	number	—	—
defaultPageSize	每頁條數預設值（非受控）	number	—	10
pageSizes	每頁條數選項	number[]	—	[10, 20, 30, 40]
siblingCount	當前頁兩側各顯示的頁碼數	number	—	1
showTotal	是否顯示總條數	boolean	—	false
showSizeChanger	是否顯示每頁條數切換	boolean	—	false
showJumper	是否顯示跳頁輸入	boolean	—	false
simple	精簡模式	boolean	—	false
disabled	是否停用	boolean	—	false
sx	快速版面配置屬性	SxProps	—	—

Pagination 事件

事件	說明	回呼簽名	Vue 對照
onChange	頁碼變化時觸發（切頁、跳頁、每頁條數變化導致的鉗制都會觸發）	(current: number, pageSize: number) => void	@change
onSizeChange	每頁條數變化時觸發	(pageSize: number) => void	@size-change

受控 / 非受控

傳 current 即受控（元件不持有內部態，由外部驅動）；傳 defaultCurrent 走非受控內部態。pageSize 同理。兩種模式下 onChange 都會觸發。

頁碼鉗制

pageSize 變化導致總頁數縮小時，若當前頁超出範圍，元件會在 effect 中自動鉗制回末頁並觸發 onChange，無需業務側兜底。

鍵盤互動

跳頁輸入框：Enter 提交跳轉，失焦時也會提交；非法值（越界或非數字）被鉗制到有效區間。

無障礙

根元素為 <nav aria-label>；當前頁輸出 aria-current="page"，各頁碼按鈕帶 aria-label（語言包 pagination.page 模板，如「第 3 頁」）。

ref

forwardRef<HTMLElement> —— <nav> 根元素。

樣式

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