导航类 · Pagination
翻页器
分页器帮助用户在多个页之间进行导航

代码演示

如何引入

基本

基础分页,通过 total 设置总页数,pageSize 设置每页容量

总页数显示

通过 showTotal 属性控制是否展示总页数

指定当前页码

可以通过 defaultCurrentPage 指定当前激活的页码

每页容量切换

通过设置 showSizeChangertrue,允许通过 Select 组件快速切换每页容量

快速跳转至某页

通过设置 showQuickJumpertrue, 允许通过Input控件输入页码,快速跳转
当Input失去焦点时,若Input中为有效数字,会直接进行跳转。你亦可在Input聚焦时,输入期望跳转的页码后直接敲击回车进行跳转
若你输入页码大于分页器总页数,我们会自动为你跳转至最后一页
showQuickJumper于 v1.31后提供

页码受控

传入 currentPage 后,分页器即为受控组件,一般配合 onPageChange 使用。当前激活页码完全取决于传入的 currentPage的 值

预设每页容量可选值

传入 pageSizeOpts 数组,指定切换每页容量的可选值

迷你版本

size 设置为 small
开启 hoverShowPageSelect,可以 hover 页码快速切换(v1.27.0后提供)

API 参考

属性说明类型默认值版本
className类名string
currentPage当前页码number
defaultCurrentPage默认的当前页码number
hideOnSinglePage总页数小于 2 时,是否自动隐藏分页器,当 showSizeChanger 为true时,此开关不再生效booleanfalse
hoverShowPageSelecthover 页码时是否展示切换页数的Select控件,仅当 size = 'small'时生效booleanfalse1.27.0
nextText下一页文本string|ReactNode
pageSize每页条数number10
pageSizeOpts指定每页显示多少条array[10, 20, 40, 100]
popoverPosition浮层方向,具体可见 Popover·API 参考·positionstring"bottomLeft"
popoverZIndex浮层 z-index 值number1030
prevText上一页文本string|ReactNode
style样式object
size尺寸string
showTotal是否显示总页数boolean
showSizeChanger是否显示切换页容量的 Select,size为small时不生效booleanfalse
showQuickJumper是否显示切换页码的 Inputbooleanfalse1.31.0
total总条数number1
onChange页码、每页容量变化时的回调函数function(currentPage: number, pageSize: number)
onPageChange页码变化的回调函数function(currentPage: number)
onPageSizeChange每页容量变化时的回调函数function(pageSize: number)

Accessibility

ARIA

  • aria-label: 描述组件内页码、前一页、后一页等元素的标签
  • aria-current: 指向当前页的页码元素

设计变量

FAQ

  • 为什么页数下拉选择器最多只有1,000,000条?
    因为创建列表时, 浏览器对Array.from()创建数组的大小存在限制; 同时为了兼顾Array.from()的开销,我们设定了1,000,000这个阈值。

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED