示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地记录分页
- 本地记录 1
- 本地记录 2
- 本地记录 3
- 本地记录 4
- 本地记录 5
移动端结果
长列表分页
搜索结果分页
使用建议
先明确 total 与 pageSize
分页需要稳定的总量和页大小；数据变化后由宿主校正当前页，避免展示不存在的页码或空切片。
让宿主同步 URL 与数据
onPageChange 只上报页码；URL、历史记录、请求、缓存以及筛选后重置到第一页都由宿主处理。
按空间选择显示模式
常规页面使用 pages，窄区域使用 compact；无论模式都提供能说明数据集合的 aria-label。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BasePagination } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Pagination 不负责数据请求、URL 同步、筛选重置或 page-size selector；这些状态和副作用属于宿主。
- T17 尚缺 manual keyboard/focus、deterministic visual 与最终 packed React 18/19 证据。
- Manual keyboard/focus review, deterministic visual evidence, and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BasePaginationProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'onChange' | 'style'
> {
page?: number;
defaultPage?: number;
pageSize?: number;
total?: number;
mode?: 'compact' | 'pages';
siblingCount?: number;
boundaryCount?: number;
label?: ReactNode;
firstLabel?: ReactNode;
previousLabel?: ReactNode;
nextLabel?: ReactNode;
lastLabel?: ReactNode;
appearance?: BaseAppearance;
className?: string;
classNames?: BasePaginationClassNames;
style?: CSSProperties;
onPageChange?: (page: number) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
page | 分页器当前的受控页码。 | number | — |
defaultPage | 非受控模式下初始显示的页码。 | number | — |
pageSize | 每页对应的数据条数。 | number | 20 |
total | 分页数据的总条数。 | number | 0 |
mode | 分页器使用紧凑导航还是完整页码模式。 | 'compact' | 'pages' | 'compact' |
siblingCount | 当前页两侧最多显示的相邻页码数量。 | number | 1 |
boundaryCount | 分页器两端始终显示的页码数量。 | number | 1 |
label | 分页导航区域的可访问名称。 | ReactNode | — |
firstLabel | 跳转到第一页操作的标签内容。 | ReactNode | — |
previousLabel | 跳转到上一页操作的标签内容。 | ReactNode | — |
nextLabel | 跳转到下一页操作的标签内容。 | ReactNode | — |
lastLabel | 跳转到最后一页操作的标签内容。 | ReactNode | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BasePaginationClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
onPageChange | 用户请求切换页码时调用的回调。 | (page: number) => void | — |