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

慎用

建议超过三页使用,两页可直接使用查看更多



单选框
选择框
单选按钮
单选控件
选择按钮

DESIGN

中文