• 简体中文
  • Pagination 分页

    按页浏览较多的数据。

    基础用法

    交互预览基础用法

    当前第 1 页,每页 10 条。

    basic.tsx
    import { Pagination } from '@sudden3/leaf-ui';
    import { useState } from 'react';
    export function PaginationBasic() {
      const [current, setCurrent] = useState(1);
      const [pageSize, setPageSize] = useState(10);
      return (
        <div className="leaf-demo-stack leaf-demo-stack--wide">
          <Pagination
            total={240}
            current={current}
            pageSize={pageSize}
            showSizeChanger
            showQuickJumper
            showTotal={(total, [start, end]) => `${start}–${end} / ${total} 条`}
            onChange={(page, size) => {
              setCurrent(page);
              setPageSize(size);
            }}
          />
          <Pagination total={50} size="sm" />
          <Pagination total={240} simple disabled />
          <p className="leaf-demo-note">
            当前第 {current} 页,每页 {pageSize} 条。
          </p>
        </div>
      );
    }
    

    Pagination API

    属性类型默认值说明
    totalnumber必填数据总条数
    current / defaultCurrentnumber1受控页码 / 初始页码
    pageSize / defaultPageSizenumber10受控每页条数 / 初始条数
    onChange(page: number, pageSize: number) => void—页码或每页条数变化
    showSizeChangerbooleanfalse展示每页条数选择器
    pageSizeOptionsreadonly number[][10, 20, 50, 100]可选每页条数
    showQuickJumperbooleanfalse允许输入页码,回车跳转
    showTotal(total: number, range: readonly [number, number]) => ReactNode—自定义总数说明
    simplebooleanfalse使用简洁页码展示
    disabled / hideOnSinglePagebooleanfalse禁用 / 单页时隐藏
    size'sm' | 'md' | 'lg''md'控件尺寸

    类型

    定义组件属性或组装列表时可导入相关类型。

    import type { PaginationProps } from '@sudden3/leaf-ui';

    使用说明

    页码从 1 开始。应用根据 onChange 加载对应数据;改变每页条数时,页码会尽量保留当前数据的位置。越界页码会自动限制到有效范围。