Pagination

分页（Pagination）用于将大量数据拆分为多页展示，提供页码按钮、前后翻页、首尾跳转和省略号导航。支持多种样式变体、形状和尺寸。

import { Pagination } from '@skyroc/web-ui';
import type {
  PaginationClassNames,
  PaginationProps,
  PaginationPages,
  PaginationPageItem
} from '@skyroc/web-ui';

何时使用

• 数据量较大需要分页展示时（表格、列表、搜索结果等）。
• 需要用户在页码之间快速导航时。
• 如果数据量不确定或需要无限滚动，优先使用虚拟列表。

基础用法

传入 total（总条数）和 itemsPerPage（每页条数），即可自动计算页数并渲染分页。

<Pagination
  showEdges
  total={200}
  itemsPerPage={10}
  siblingCount={1}
/>

变体

通过 variant 切换选中页码的样式风格。

尺寸

通过 size 控制分页整体大小。

形状

通过 shape 切换按钮形状。

显示边缘页码

showEdges 控制是否始终显示首页、尾页和省略号，避免用户迷失当前位置。

首尾按钮

showFirstLast 控制是否显示"跳到首页"和"跳到尾页"按钮，默认显示。

导航按钮选中态

actionAsSelected 为 true 时，前后翻页和首尾按钮也使用 variant 对应的选中样式。

受控模式

通过 page + onPageChange 实现受控分页。

const [page, setPage] = useState(1);

<Pagination
  total={200}
  itemsPerPage={10}
  page={page}
  onPageChange={setPage}
/>

API

Pagination

子组件

基础子组件可用于更细粒度的自定义组合：

类型