Pagination 分页
分页器用于分隔长列表,每次只加载一个页面。
构成
1
2
3
4
5
...
15
2
3
1
1: 箭头
必有
2.数字
必有
3: 省略
可选
类型/变体
Single Page
Single page +ellipsis
H5
1
2
3
4
5
1
2
3
4
5
...
15
4
/ 55
使用场景
1
2
3
4
5
...
15
交互
1
Default
组件的初始或未交互状态
1
hover
鼠标悬浮状态
1
Selected
当前内容已被选择或标记
1
Disable
表示当前不可交互或不可用的选项
...
Default
组件的初始或未交互状态
hover
鼠标悬浮状态
补充
注:省略hover,出现左右箭头
详细交互
单翻页起始 左箭头禁用
1
2
3
4
5
单省略起始 左箭头禁用
1
2
3
4
5
...
15
默认
1
2
3
4
5
...
15
点击6出现567,点击7显示678,依次类推
1
...
5
6
7
...
15
双省略hover
1
...
4
5
6
...
15
1
...
7
8
9
...
15
点击左侧省略号:向前跳转固定3页数
点击右侧省略号:向后跳转固定3页数
1
...
11
111
13
14
15
末页 右箭头禁用
省略hover出现箭头icon
1
2
3
4
5
15
补充
交互逻辑可参考ant design:LINK
标注
32
4
32
1
2
3
4
5
...
15
4
/ 55
8
40
RTL
1
2
3
4
5
...
15
LTR
15
...
5
4
3
2
1
RTL
用法
1
2
3
4
5
...
15
正确
1
2
慎用
建议超过三页使用,两页可直接使用查看更多
单选框
选择框
单选按钮
单选控件
选择按钮