Pagination
分页

采用分页的形式分隔长列表，每次只加载一个页面。

何时使用

当加载/渲染所有数据将花费很多时间时；
可切换页码浏览数据。

代码演示

基本

基础分页。

1
•••
4
5
6
7
8
•••
50
10 条/页

更多分页。

1
2
3
4
5
•••
50
10 条/页

1
2
3
4
5
•••
50
10 条/页

改变

改变每页显示条目数。

1
2
3
4
5
•••
50
10 条/页
跳至页

1
2
3
4
5
•••
50
10 条/页
跳至页

跳转

快速跳转到某一页。

1
2
3
4
5
10 条/页
跳至页

Total 50 items
1
2
3
4
5

Total 50 items
1
2
3
4
5
10 条/页
跳至页

迷你

迷你版本。

简洁

简单的翻页。

受控

受控制的页码。

Total 85 items
1
2
3
4
5
20 条/页

1-20 of 85 items
1
2
3
4
5
20 条/页

总数

通过设置 showTotal 展示总共有多少数据。

Total 85 items
1
2
3
4
5
•••
9
10 条/页
跳至页

全部展示

展示所有配置选项。

Previous
1
2
3
4
5
•••
50
Next
10 条/页

上一步和下一步

修改上一步和下一步为文字链接。

API

通用属性参考：通用属性

<Pagination onChange={onChange} total={50} />

参数	说明	类型	默认值
current	当前页数	number	-
defaultCurrent	默认的当前页数	number	1
defaultPageSize	默认的每页条数	number	10
disabled	禁用分页	boolean	-
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
itemRender	用于自定义页码的结构，可用于优化 SEO	(page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode	-
pageSize	每页条数	number	-
pageSizeOptions	指定每页可以显示多少条	string[] \| number[]	[`10`, `20`, `50`, `100`]
responsive	当 size 未指定时，根据屏幕宽度自动调整尺寸	boolean	-
showLessItems	是否显示较少页面内容	boolean	false
showQuickJumper	是否可以快速跳转至某页	boolean \| { goButton: ReactNode }	false
showSizeChanger	是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true	boolean	-
showTitle	是否显示原生 tooltip 页码提示	boolean	true
showTotal	用于显示数据总量和当前数据顺序	function(total, range)	-
simple	当添加该属性时，显示为简单分页	boolean	-
size	当为 `small` 时，是小尺寸分页	`default` \| `small`	`default`
total	数据总数	number	0
onChange	页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数	function(page, pageSize)	-
onShowSizeChange	pageSize 变化的回调	function(current, size)	-

Design Token

组件 Token

全局 Token

API

通用属性参考：通用属性

<Pagination onChange={onChange} total={50} />

参数	说明	类型	默认值
current	当前页数	number	-
defaultCurrent	默认的当前页数	number	1
defaultPageSize	默认的每页条数	number	10
disabled	禁用分页	boolean	-
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
itemRender	用于自定义页码的结构，可用于优化 SEO	(page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode	-
pageSize	每页条数	number	-
pageSizeOptions	指定每页可以显示多少条	string[] \| number[]	[`10`, `20`, `50`, `100`]
responsive	当 size 未指定时，根据屏幕宽度自动调整尺寸	boolean	-
showLessItems	是否显示较少页面内容	boolean	false
showQuickJumper	是否可以快速跳转至某页	boolean \| { goButton: ReactNode }	false
showSizeChanger	是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true	boolean	-
showTitle	是否显示原生 tooltip 页码提示	boolean	true
showTotal	用于显示数据总量和当前数据顺序	function(total, range)	-
simple	当添加该属性时，显示为简单分页	boolean	-
size	当为 `small` 时，是小尺寸分页	`default` \| `small`	`default`
total	数据总数	number	0
onChange	页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数	function(page, pageSize)	-
onShowSizeChange	pageSize 变化的回调	function(current, size)	-

Namu Design

Pagination
分页

Namu Design

Pagination
分页

何时使用

代码演示

API

Design Token

组件 Token

全局 Token

何时使用

代码演示

API

Design Token

组件 Token

全局 Token

Pagination分页更新日志

Pagination分页更新日志

何时使用

代码演示

API

Design Token

组件 Token

全局 Token

何时使用

代码演示

API

Design Token

组件 Token

全局 Token

Pagination
分页

Pagination
分页