Pagination 设计文档
分页器，用于切换大量数据的页码。严格对齐 Semi Design：default（完整页码 + 省略号折叠，7 格上限）与 small（current/total 紧凑视图，可 hoverShowPageSelect 悬停弹全部页码切页）两类布局。showTotal 显示总页数；省略号 hover 弹出隐藏页码。越界的当前页/每页条数与快速跳页输入均会被钳制到有效范围（纯函数实现，受控 prop 仅经回调上报）。
← API 文档使用建议
分页器，用于切换大量数据的页码。严格对齐 Semi Design：default（完整页码 + 省略号折叠，7 格上限）与 small（current/total 紧凑视图，可 hoverShowPageSelect 悬停弹全部页码切页）两类布局。showTotal 显示总页数；省略号 hover 弹出隐藏页码。越界的当前页/每页条数与快速跳页输入均会被钳制到有效范围（纯函数实现，受控 prop 仅经回调上报）。
Accessibility
ARIA role：list
- 严格对齐 Semi：根节点 <ul>（default）/ <div>（small），无 nav 地标；页码/上一页/下一页为 li[role=button]
- 硬编码英文 aria-label（"Previous"/"Next"/"Page size selector"/"Page X"/"More"），不走 locale；当前页 aria-current=page
- 无 roving tabindex、无键盘导航（Semi handleKeyDown 为空实现，页码仅可鼠标点击）
- 省略号可 hover 弹出隐藏页码
设计变量
变量 | 默认值 | 用法 |
|---|---|---|
| --cd-color-pagination-item-bg-active | var(--cd-color-fill-1) | 翻页器 页码 按下态背景颜色 |
| --cd-color-pagination-item-bg-default | transparent | 翻页器 页码 背景颜色 |
| --cd-color-pagination-item-bg-disabled | transparent | 翻页器 页码 禁用态背景颜色 |
| --cd-color-pagination-item-bg-hover | var(--cd-color-fill-0) | 翻页器 页码 悬浮态背景颜色 |
| --cd-color-pagination-item-bg-selected | var(--cd-color-primary-light-default) | 翻页器 页码 选中态背景颜色 |
| --cd-color-pagination-item-bg-selected-disabled | var(--cd-color-disabled-fill) | 翻页器 页码 选中禁用态背景颜色 |
| --cd-color-pagination-item-border-active | transparent | 翻页器 页码 激活边框颜色 |
| --cd-color-pagination-item-border-default | transparent | 翻页器 页码 默认边框颜色 |
| --cd-color-pagination-item-border-disabled | transparent | 翻页器 页码 禁用边框颜色 |
| --cd-color-pagination-item-border-hover | transparent | 翻页器 页码 悬浮边框颜色 |
显示第 1 条-第 10 条，共 20 条
- 1
- 2