---
title: Pagination - 分页
order: Pagination
path: /Notification
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 5
  title: 导航
  path: /nav
---

抽屉常通过单击临近的按钮控件打开，从屏幕

## 基础分页

最基础的分页控件，仅展示页码。建议使用在内容少于 10 页的轻量化分页场景。

<code src="./demos/base.tsx" background="#fff" height="400px"/>

## 页数较多

拥有大量数据需要展示，通过分页能够让用户快速定位当前页码。建议使用在内容超过 10 页以上的分页场景。

<code src="./demos/MultiPagination.tsx" background="#fff" height="400px"/>

## 带数据总量显示的分页

关联模块内数据进行展示，以方便用户无需全部浏览即可快速了解数据量级。常用于表格内的数据统计。

<code src="./demos/showTotal.tsx" background="#fff" height="400px"/>

## 带页面展示数量选择的分页

可根据用户需求对每页展示条目数进行调整。

<code src="./demos/sizeChanger.tsx" background="#fff" height="400px"/>

## 带快速跳转的分页

快速调整的分页：当数据有快速定位的需求时，通过选择显示快速跳转的分页。

<code src="./demos/quickJumper.tsx" background="#fff" height="400px"/>

## 迷你版分页

去掉线框的翻页控件，并保留翻页的主要功能。模块内的空间较少，需要轻量化的翻页的场景，以增加页面利用率。

<code src="./demos/miniPagination.tsx" background="#fff" height="400px"/>

## 极简迷你版分页

更小尺寸的迷你风格分页控件，适合内嵌在其他组件中分页导航使用。

<code src="./demos/simple.tsx" background="#fff" height="400px"/>

## API

| 参数             | 说明                                                         | 类型                                                                         | 默认值                     |
| ---------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------- | -------------------------- |
| spaceBetween     | 分布两端                                                     | Boolean                                                                      | false                      |
| 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\[]                                                                    | \[`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)                                                      | -                          |