ElyriPagination
分页：受控 / 非受控双支持，页码区间自动折叠，可选每页条数选择器与跳转输入框，描边 / 填充两种外观。
安装
添加组件
pnpm dlx @elyri/cli@latest add pagination示例
基础用法
默认描边外观，首尾页数超出时自动用省略号折叠中间区间。
import { Pagination } from './components/elyri/Pagination';
export function Example() {
return <Pagination total={12} defaultPage={1} />;
}完整版
叠加每页条数选择器与首尾页按钮，页码由总条数除以每页条数推导。
import { useState } from 'react';
import { Pagination } from './components/elyri/Pagination';
export function Example() {
const [page, setPage] = useState(3);
const [pageSize, setPageSize] = useState(10);
const totalItems = 97;
const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
return (
<Pagination
total={totalPages}
page={page}
onPageChange={setPage}
pageSize={pageSize}
pageSizeOptions={[10, 20, 50]}
onPageSizeChange={(size) => {
setPageSize(size);
setPage(1);
}}
showEdges
showJump
/>
);
}外观
两种外观都是无边框幽灵按钮，仅当前页的高亮方式不同。
import { useState } from 'react';
import { Pagination } from './components/elyri/Pagination';
export function Example() {
const [page, setPage] = useState(4);
return (
<div className="demo-ui-stack">
<Pagination total={20} page={page} onPageChange={setPage} variant="outline" showEdges />
<Pagination total={20} page={page} onPageChange={setPage} variant="filled" showEdges />
</div>
);
}尺寸
两档尺寸：sm / md。
import { useState } from 'react';
import { Pagination } from './components/elyri/Pagination';
export function Example() {
const [page, setPage] = useState(3);
return (
<div className="demo-ui-stack">
<Pagination total={10} page={page} onPageChange={setPage} size="sm" />
<Pagination total={10} page={page} onPageChange={setPage} size="md" />
</div>
);
}区间折叠
当前页两侧各展开 1 个页码，其余折叠，100 页也能保持精简。
import { Pagination } from './components/elyri/Pagination';
export function Example() {
return <Pagination total={100} defaultPage={50} showEdges />;
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
total | number | — | 总页数 |
page | number | — | 受控当前页（从 1 开始） |
defaultPage | number | 1 | 非受控初始页 |
onPageChange | (page: number) => void | — | 当前页变化回调，受控与非受控都会触发 |
siblingCount | number | '1' | 当前页两侧各展开的页码数 |
boundaryCount | number | '1' | 首尾各固定展示的页码数 |
showEdges | boolean | false | 是否显示首页 / 末页按钮 |
variant | 'outline' | 'filled' | 'outline' | 外观：outline（当前页主色描边 + 淡底）/ filled（当前页实心主色） |
size | 'sm' | 'md' | 'md' | 控件尺寸：sm / md |
disabled | boolean | false | 禁用整组交互 |
pageSize | number | — | 受控每页条数，需配合 pageSizeOptions 显示选择器 |
defaultPageSize | number | — | 非受控初始每页条数，默认取 pageSizeOptions 第一项 |
pageSizeOptions | number[] | — | 每页条数选项，传入后显示选择器 |
onPageSizeChange | (pageSize: number) => void | — | 每页条数变化回调 |
showJump | boolean | false | 是否显示跳转到指定页的输入框 |
labels | Partial<PaginationLabels> | — | 覆盖内置文案（无障碍标签与提示） |
...rest | HTMLAttributes | — | 其余属性透传给原生 nav |