组件 · 导航
Pagination 分页
列表分页控件；常与 Table 引擎分页配置或独立列表状态联动。
使用建议
- 避免：杜撰全局断点 Token 驱动分页布局
- 限制：页码状态由应用持有
引入
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
// …共 8 个导出
} from '@selrux/ui/pagination';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
total 总条数，默认每页 10 条。
完整功能
每页条数切换、快速跳转与总数显示。
简洁与禁用
simple 精简模式；disabled 禁用全部交互。
尺寸
size 六档。
受控
current / pageSize / onChange 受控并显示当前页；onShowSizeChange 切换每页条数；pageSizeOptions 选项；defaultPageSize 为非受控初始值。
显示控制
hideOnSinglePage 只有一页时隐藏；showLessItems 减少页码；showTitle 显示原生提示；align 对齐；totalBoundaryShowSizeChanger 超过该条数自动显示每页条数；responsive 窄屏自动简化；locale 覆盖文案。
自定义渲染
itemRender 改写页码与上一页 / 下一页；components.sizeChanger 替换每页条数选择器（这里仍使用 PaginationSizeChanger 并指定 size）。
组合式
PaginationContent / Item / Link（isActive）/ Previous / Next（text、isActive）/ Ellipsis 手写链接分页；PaginationSizeChanger 的 value / options / size。
API
属性覆盖：示例用到 31 / 31 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Pagination.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示
Pagination
主题化分页导航根。
有 total 走引擎（antd 配置）；否则为 shadcn 组合壳。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
total | 数据总数；存在时启用引擎。 | number | - |
current | 受控当前页。 | number | - |
defaultCurrent | 非受控默认当前页。 | number | - |
pageSize | 受控每页条数。 | number | - |
defaultPageSize | 非受控默认每页条数。 | number | - |
onChange | 页码或 pageSize 变化。 | ((page: number, pageSize: number) => void) | - |
onShowSizeChange | pageSize 变化。 | ((current: number, size: number) => void) | - |
disabled | 禁用。 | boolean | - |
hideOnSinglePage | 仅一页时隐藏。 | boolean | - |
showLessItems | 显示较少页码。 | boolean | - |
showTitle | 原生 title 提示。 | boolean | - |
align | 对齐。 | "start" | "end" | "center" | - |
showQuickJumper | 快速跳转。 | PaginationQuickJumper | - |
showSizeChanger | pageSize 切换器。 | PaginationShowSizeChanger | - |
showTotal | 总量文案。 | ((total: number, range: [number, number]) => ReactNode) | - |
simple | 简洁模式。 | PaginationSimple | - |
pageSizeOptions | 每页条数选项。 | readonly (string | number)[] | - |
totalBoundaryShowSizeChanger | 当未显式传 showSizeChanger 且 total 大于该值时，默认开启 sizeChanger。 | number | 50 |
itemRender | 自定义页项结构。 | ((page: number, type: PaginationItemRenderType, originalElement: ReactElement) => ReactNode) | - |
components | 替换内部部件。 | { sizeChanger?: (props: PaginationSizeChangerRenderProps) => ReactElement | null; } | - |
responsive | size 未指定时按视口收窄（由 UI 解释）。 | boolean | - |
locale | 文案。 | PaginationLocale | - |
classNames | 语义 className。 | Partial<Record<PaginationSemanticSlot, string>> | ((info: { props: PaginationProps; }) => Partial<Record<PaginationSemanticSlot, string>>) | - |
styles | 语义 style。 | Partial<Record<PaginationSemanticSlot, CSSProperties>> | ((info: { props: PaginationProps; }) => Partial<Record<PaginationSemanticSlot, CSSProperties>>) | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
PaginationContent
主题化分页列表（ul）。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
PaginationEllipsis
主题化省略号。 对齐 shadcn：MoreHorizontal + 屏幕阅读文案 More pages。
无自有属性；其余 280 项原生属性继承自 HTMLAttributes。
PaginationItem
主题化列表项（li）。
无自有属性；其余 281 项原生属性继承自 HTMLAttributes / LiHTMLAttributes。
PaginationLink
主题化页码链接。
对齐 shadcn：isActive → outline，否则 ghost；渲染为 a。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
isActive | 当前页时设置 aria-current=page。 | boolean | - |
另有 288 项原生属性与事件继承自 AnchorHTMLAttributes / HTMLAttributes，原样透传。
PaginationNext
主题化下一页。 对齐 shadcn：可覆盖 text（默认 Next）+ ChevronRight；小屏隐藏文案。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
text | 可见文案。 | string | - |
isActive | 当前页时设置 aria-current=page。 | boolean | - |
另有 288 项原生属性与事件继承自 AnchorHTMLAttributes / HTMLAttributes，原样透传。
PaginationPrevious
主题化上一页。 对齐 shadcn：ChevronLeft + 可覆盖 text（默认 Previous）；小屏隐藏文案。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
text | 可见文案。 | string | - |
isActive | 当前页时设置 aria-current=page。 | boolean | - |
另有 288 项原生属性与事件继承自 AnchorHTMLAttributes / HTMLAttributes，原样透传。
PaginationSizeChanger
主题化 pageSize 切换器（Select）。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value * | - | number | - |
options * | - | number[] | - |
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
另有 4 项原生属性与事件继承自 ，原样透传。
导出类型：PaginationContentProps、PaginationEllipsisProps、PaginationEngineProps、PaginationItemProps、PaginationItemRenderType、PaginationLinkProps、PaginationLocale、PaginationNextProps、PaginationPreviousProps、PaginationProps、PaginationSemanticSlot、PaginationShellProps、PaginationSize、PaginationSizeChangerRenderProps
无障碍
摘自源码 JSDoc。
- 对齐 shadcn：MoreHorizontal + 屏幕阅读文案 More pages。
PaginationLink.isActive：当前页时设置 aria-current=page。PaginationNext.isActive：当前页时设置 aria-current=page。PaginationPrevious.isActive：当前页时设置 aria-current=page。