@ug666/react 文档演示

Pagination 分页

Pagination 适合列表、表格和文档目录等多页内容浏览场景。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Pagination } from '@ug666/react'

变体预览

基础分页导航。

文档条目 16

文档条目 17

文档条目 18

文档条目 19

文档条目 20

…

状态展示

边界状态：首页禁用上一页、末页禁用下一页，多页时自动出现省略号。

首页（上一页禁用）

末页（下一页禁用，含省略号）

…

尺寸展示

分页组件本身密度固定，可通过容器布局适配底部区域。

适合列表底部、表格底部或内容归档页脚。

代码示例

搭配受控 page 状态即可使用。

import { useState } from 'react'
import { Pagination } from '@ug666/react'

export function ArticlesPagination() {
  const [page, setPage] = useState(3)

  return <Pagination page={page} totalPages={12} onPageChange={setPage} />
}

Props 说明

属性	类型	默认值	说明
page	number	—	当前页码，从 1 开始。
totalPages	number	—	总页数。
onPageChange	(page: number) => void	—	切换页码时触发。