#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
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
total | number | 必填 | 数据总条数 |
current / defaultCurrent | number | 1 | 受控页码 / 初始页码 |
pageSize / defaultPageSize | number | 10 | 受控每页条数 / 初始条数 |
onChange | (page: number, pageSize: number) => void | — | 页码或每页条数变化 |
showSizeChanger | boolean | false | 展示每页条数选择器 |
pageSizeOptions | readonly number[] | [10, 20, 50, 100] | 可选每页条数 |
showQuickJumper | boolean | false | 允许输入页码,回车跳转 |
showTotal | (total: number, range: readonly [number, number]) => ReactNode | — | 自定义总数说明 |
simple | boolean | false | 使用简洁页码展示 |
disabled / hideOnSinglePage | boolean | false | 禁用 / 单页时隐藏 |
size | 'sm' | 'md' | 'lg' | 'md' | 控件尺寸 |
#类型
定义组件属性或组装列表时可导入相关类型。
import type { PaginationProps } from '@sudden3/leaf-ui';#使用说明
页码从 1 开始。应用根据 onChange 加载对应数据;改变每页条数时,页码会尽量保留当前数据的位置。越界页码会自动限制到有效范围。