Pagination
The paginator is used to separate long lists, loading only one page at a time.
Anatomy
1
2
3
4
5
...
15
2
3
1
1: Arrow
There must be
2. Number
There must be
3: Omitted
Optional
Type/Variant
Single Page
Single page +ellipsis
H5
1
2
3
4
5
1
2
3
4
5
...
15
4
/ 55
Usage scenario
1
2
3
4
5
...
15
Interaction
1
Default
The initial or non-interactive state of the component
1
hover
Mouse hover state
1
Selected
The current content has been selected or marked.
1
Disable
Indicates options that are currently non-interactive or unavailable.
...
Default
The initial or non-interactive state of the component
hover
Mouse hover state
Supplement
Note: Omit hover, arrows will appear.
Detailed interaction
Single-page starting Left arrow disabled
1
2
3
4
5
Single omit start left arrow disabled
1
2
3
4
5
...
15
default
1
2
3
4
5
...
15
Click 6 to show 567, click 7 to display 678, and so on.
1
...
5
6
7
...
15
Double omit hover
1
...
4
5
6
...
15
1
...
7
8
9
...
15
Click the left ellipsis: jump forward a fixed number of 3 pages
Click the right ellipsis: jump backward a fixed number of 3 pages
1
...
11
111
13
14
15
Last page Right arrow disabled
Omit the arrow icon that appears on hover
1
2
3
4
5
15
Supplement
The interaction logic can refer to Ant Design: LINK
Label
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
Usage
1
2
3
4
5
...
15
Do
1
2
Caution
It is recommended to use more than three pages; two pages can directly use 'See More'.
Radio box
Selection box
Radio button
Radio control
Selection button