---
name: Paginator 分页器
route: /paginator
menu: 交互组件
---

import { Playground } from "docz";
import Paginator from './index';

## 演示

### 简单示例

<Playground>
  <Paginator total={3} pageSize={1} defaultPage={1} />
  <br />
  <Paginator total={7} pageSize={1} defaultPage={1} />
  <br />
  <Paginator total={8} pageSize={1} defaultPage={1} />
  <br />
  <Paginator total={99} pageSize={1} defaultPage={1} />
</Playground>

### 快速跳转

`quickJump`: `boolean`

<Playground>
  <Paginator
    total={99}
    pageSize={1}
    defaultPage={1}
    quickJump
  />
</Playground>

## API

### Props

| 参数 | 类型 | 默认值 | 说明 |
|-----|------|-------|-----|
| total | `number` | - | 总数。必须 |
| pageSize | `number` | - | 页长。必须 |
| page | `number` | - | - | 当前页码 |
| defaultPage | `number` | `1` | 默认页码 |
| quickJump | `boolean` | - | 是否快速跳转 |
| onChange | `(page: number) => void` | - | 页码变化事件 |
| className | `string` | - | 类名 |
| style | `React.CSSProperties` | - | 样式 |