导航
Pagination
带页码的分页，中间省略。
示例
default
说明
带页码的分页。
当前页由一个在数字之间移动的实心药丸标出，而不是靠一个背景在这边关掉、在那边打开。两个背景交叉淡入淡出读起来像两样东西在变；一个形状在移动读起来才是那一样东西真的动了。
一个 <nav> 包一个列表，当前页是 <button aria-current> 而不是加了样式的 <span>——按地标跳转的读者需要找到这个控件，而正停在当前页的读者需要被告知他已经在这儿了。
只有一页或更少时什么都不渲染。为一页做的分页器是摆设。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| onPageChange必填 | (page: number) => void | — | |
| page必填 | number | 从 1 开始。 | |
| pageCount必填 | number | 总页数。小于等于 1 时什么都不渲染。 | |
| label | string | 'Pagination' | — |
| siblings | number | 1 | 当前页两侧各放几个页码。 |
同时接受 Omit<HTMLAttributes<HTMLElement>, 'onChange'> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
组成部分
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
paginationRange
算出可见的页码列表：首页和末页总是在，当前页周围开一个窗口，序列有跳跃的地方放一个省略号。
返回的是数字和一个字面量省略号，而不是渲染好的节点，这样不用 DOM 就能测——窗口两端的差一错误正是这个组件的全部难点。
这个组件没有自己的属性。
键盘操作
| 按键 | 作用 |
|---|---|
| Tab | 能走到每一个控件，包括当前页。 |
| EnterSpace | 跳到那一页。 |
无障碍
- 当前页是带 aria-current 的按钮，不是加了样式的 span——按控件跳转的读者需要能找到它。
- 只有一页时什么都不渲染。为一页做的分页器是摆设。