Pagination 分页Pagination
把很长的列表切成一页一页，并让人知道一共有多少、现在在哪。内容是连续阅读的信息流时，“加载更多”通常比分页合适。
基本用法
count 是总页数。页数不多时全部列出。窄于 520px 时自动简化成“上一页 · 当前页 / 总页数 · 下一页”。
页数很多时
放不下的页码折成省略号：首尾各固定显示 boundaries 个，当前页两侧各显示 siblings 个。按钮总数保持不变，翻页时布局不会左右跳。
正在显示第 51–60 条，共 200 条
siblings 与 boundaries
尺寸与禁用
两档尺寸：md（默认）和 sm。disabled 让整个分页不可用（比如数据加载中）。
接口
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
count* | number | — | 总页数。 |
page / defaultPage | number | 1 | 当前页，从 1 开始；受控 / 非受控。超出范围会被夹到 1 和 count 之间。 |
onChange | (page: number) => void | — | 翻页时。 |
siblings | number | 1 | 当前页两侧各显示几个页码。 |
boundaries | number | 1 | 首尾各固定显示几个页码。 |
label | string | '分页' | 导航地标的名字。一页里有多个分页时要各不相同。 |
size | 'sm' | 'md' | 'md' | 尺寸。 |
disabled | boolean | — | 整体禁用。 |
另外导出了纯函数 paginationRange(count, page, siblings?, boundaries?)，返回页码数组（0 代表省略号），自己画分页时可以直接用。
无障碍
- 外层是
nav地标；每个页码是按钮，名字是“第 N 页”，当前页带aria-current="page"。 - 上一页 / 下一页是带名字的图标按钮，到头时用原生 disabled 禁用。
- Tab 在按钮间移动，Enter 或空格翻页。省略号是装饰，对读屏隐藏。
- 翻页后通过
role="status"播报“第 N 页，共 M 页”；窄屏下可见的“N / M”对读屏隐藏，避免读两遍。 - 翻页后请自己把焦点或滚动位置带回列表顶部，组件不替你决定。