Pagination分页

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

何时使用#

  • 当加载/渲染所有数据将花费很多时间时；

  • 可切换页码浏览数据。

代码演示

基本

基础分页。

expand codeexpand code
import { PixelIcon, Space } from 'antd';

ReactDOM.render(
  <Space>
    <PixelIcon icon="settings" />
    <PixelIcon icon="settings" variant="fill" />
    <PixelIcon icon="settings" variant="duotone" />
  </Space>,
  mountNode,
);
旋转

旋转。

expand codeexpand code
import { PixelIcon,Space } from 'antd';

ReactDOM.render(
  <Space>
    <PixelIcon icon="settings" spin /> 
    <PixelIcon icon="settings" spin variant="fill" /> 
    <PixelIcon icon="settings" spin variant="duotone" />
  </Space>
, mountNode);
自定义样式

您可以更改图标的 css 样式，例如 font-size、color 等

expand codeexpand code
import { PixelIcon,Space } from 'antd';

ReactDOM.render(
  <Space align="center">
    <PixelIcon icon="settings" style={{color:'red',fontSize:'64px'}} /> 
    <PixelIcon icon="settings" style={{fontSize:'32px'}} variant="fill" /> 
    <PixelIcon icon="settings" style={{fontSize:'48px'}} variant="duotone" />
  </Space>
, mountNode);
尺寸

除了在 style 属性中使用 fontSize 外，您还可以使用 size 属性设置图标大小。 注意：如果一个图标包含 style 和 size 属性，那么将读取的是 size 属性的值。

expand codeexpand code
import { PixelIcon, Space } from 'antd';

ReactDOM.render(
  <Space>
    <PixelIcon icon="settings" size={64} />
    <PixelIcon icon="settings" size={128} variant="fill" />
    <PixelIcon icon="settings" size={32} style={{ fontSize: 256 }} variant="duotone" />
  </Space>,
  mountNode,
);

API#

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