---
name: Pagination 分页
route: /pagination
parent: 组件
menu: 导航
---
import { Playground, Props } from 'docz'
import  Pagination  from '../components/pagination'


# Pagination 分页
>提示: 展开代码编辑器可以在线编辑，实时生效

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

## 何时使用
- 当加载/渲染所有数据将花费很多时间时
- 可切换页码浏览数据

## 基础用法
基础分页样式
<Playground>
    <Pagination total={50} showPageSizeOptions={false}/>
    <br/>
    <Pagination total={100} showPageSizeOptions={false}/>
</Playground>

## 调整每页显示条数
超过8条时，随着用户切换分页按钮，分页上的折叠变化

<Playground>
    <Pagination total={100} />
</Playground>

## 跳转效果
快速跳转到某一页

<Playground>
    <Pagination total={100} showJumper={true} showPageSizeOptions={false}/>
</Playground>

## 简洁的翻页样式

<Playground>
    <Pagination type="mini" total={100}  showPageSizeOptions={false}/>
    <br/>
    <Pagination type="mini" total={100}  showJumper={true}/>
</Playground>

## API


<Props of={Pagination} />