React 组件

UGPagination 分页

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGPagination } from '@ug666/ui-react'

变体预览

基础分页导航。

文档条目 16

文档条目 17

文档条目 18

文档条目 19

文档条目 20

……

状态展示

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

首页（上一页禁用）

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

…

尺寸展示

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

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

代码示例

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

tsx

import { useState } from 'react'
import { UGPagination } from '@ug666/ui-react'

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

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

Props

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