# 分页
分页用于将内容分为多个页面，可快速定位或者切换页码浏览内容。
## 使用原则
- 当需要展示大量信息导致滚动区域过长不方便查看，或加载/渲染所有数据将花费很长时间时使用。
- 如页面中全为列表信息或其他原因不适合用分页，推荐使用懒加载方式。
## 组成要素
1. **数据总量** : 显示数据总的数量。
1. **翻页** : 点击左翻页，页面数据和页码均回到上一页。点击右翻页，页面数据和页码均回到下一页。
1. **页码区** : 当前页面所在页码高亮显示，点击页码切换页码数据。
1. **每页展示数量设置区** : 设置每页展示数据量，一般常见的有 10 条/页、20 条/页、50 条/页、100 条/页，可根据实际场景配置。
1. **快速跳转区（可选）** : 用户可输入页码数字，快速跳转页面。
## 控件类型
### 类型总览
分页主要分为两种类型：普通分页、小型分页。
普通分页建议用于页面级页码切换。小型分页建议用于弹窗换页或需要轻量显示的区域。
### 普通分页
#### 使用场景
用于页面级页码切换，如页面级表格。页码建议放在表格右下方，和表格右对齐。场景示例如下
#### 通用规则样式
**尺寸说明**
**翻页尺寸**：固定为 28*28px
**数字页码**：最小尺寸 28*28px，内部左右间距 4px。页码数字超出 3 位数自适应处理
**快捷设置区**：每页显示条目数可按照需求进行配置，建议搭配组合为 10/20/30/40 或 10/20/50/100 条/页，可根据实际场景自由搭配
**跳转至 xx 页面**：最小宽度为 48px，内部左右间距 8px，内容自适应
**翻页、更多、下拉图标大小** 均为 16*16px
**交互说明**
**页码基础交互**
页码只有 1 页时，正常显示页码，并且跳转页码功能禁用
页码最大值，显示最后 1 个页码+更多。页码位数过多，页码框按照自适应规则
**翻页交互说明**
- hover「…」icon，对应 icon 变为跳转 icon
- 点击跳转 icon，会跳至「当前选中页码 + 5」的页数，如当前页码在第 1 页，点击后面「...」，即跳转至第 6 页
- 页码数量过多，默认展示前 5 页+「…」icon+最后一页
- 点击「…」 icon 前面一页，则该页前后两页均显示出来，第 1 页和最后一页始终保留，如点击第 5 页，页码则切换成「第 1 页+更多 icon+ 第 3、4、5、6、7 页+更多 icon +最后一页」
- 点击最后一页，展示出最后一页前四页
**页码快速跳转区交互**
- 页码快速跳转框遵循输入框交互规则
- 如输入值超过最大页数，则直接跳转到最后一页，清空输入框数字
- 如输入值为 0 ，则跳转至第一页
- 输入数字后，回车即可触发跳转，并且页码切换到输入的页码数
- 输入数字后，切换页码，则清空输入的数字
- 输入数字之后，单击页面空白处结束操作，会保留数字
### 小型分页
#### 使用场景
用于小模块性场景，如卡片、弹窗内等等，且页码数量较少场景。场景示例如下
#### 通用规则样式
**尺寸说明**
- 翻页尺寸：固定为 24*24px
- 数字页码：最小尺寸 24*24px，内部左右间距 2px。页码数字自适应处理
- 页码之间间距为 4px
- 翻页和更多图标大小为 16*16px
**交互说明**
**页码基础交互**
- 页码只有 1 页时，也显示页码，并且跳转页码功能禁用
- 页码最大值，显示 5 个页码+更多+最后一页
- 页码位数过多，按照自适应规则
**翻页交互说明**
- 点击跳转 icon，会跳至「当前选中页码 + 5」的页数，如当前页码在第 1 页，点击后面「...」，即跳转至第 6 页
- 页码数量过多，默认展示前 5 页+「…」icon+最后一页
- 点击「…」 icon 前面一页，则该页前后两页均显示出来，第 1 页和最后一页始终保留，如点击第 5 页，页码则切换成「第 1 页+更多 icon+ 第 3、4、5、6、7 页+更多 icon +最后一页」
- 点击最后一页，展示出最后一页前四页
