特性

• 受控和非受控分页状态。
• 页面大小更改器、快速跳转、简单模式、紧凑项目计数和自定义项目渲染。
• 从 @rc-component/pagination/locale/* 公开的语言环境包。
• 用于项目级自定义的语义 classNames 和 styles。
• 属性、本地化、回调和状态的 TypeScript 定义。
• 被 Ant Design 用作共享的 pagination 基础能力。

安装

npm install @rc-component/pagination

使用

import Pagination from '@rc-component/pagination';
import '@rc-component/pagination/assets/index.css';
export default () => (
  <Pagination defaultCurrent={1} total={120} showSizeChanger showQuickJumper />
);

import Pagination from '@rc-component/pagination';
import enUS from '@rc-component/pagination/locale/en_US';
export default () => (
  <Pagination
    defaultCurrent={2}
    total={500}
    locale={enUS}
    showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
  />
);

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Pagination

| 参数 | 类型 | 默认值 | 说明 | | ---------------------------- | ----------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------- | | align | 'start' \| 'center' \| 'end' | - | 对齐分页项目。 | | className | string | - | 根元素的 className。 | | classNames | Partial<Record<'item', string>> | - | 语义 className。 | | current | number | - | 控制当前页面。 | | defaultCurrent | number | 1 | 初始当前页面。 | | defaultPageSize | number | 10 | 初始页面大小。 | | disabled | boolean | false | 禁用分页交互。 | | hideOnSinglePage | boolean | false | 当只有一页时隐藏。 | | itemRender | (page, type, element) => ReactNode | - | 自定义页面、上一个、下一个和跳转项目。 | | jumpNextIcon | ReactNode \| ComponentType | - | 自定义下一跳图标。 | | jumpPrevIcon | ReactNode \| ComponentType | - | 自定义上一跳转图标。 | | locale | PaginationLocale | zh_CN | 区域设置文本。 | | nextIcon | ReactNode \| ComponentType | - | 自定义下一个图标。 | | pageSize | number | - | 受控的页面大小。 | | pageSizeOptions | number[] | - | 页面大小选项。 | | prefixCls | string | rc-pagination | className 前缀。 | | prevIcon | ReactNode \| ComponentType | - | 自定义上一个图标。 | | role | React.AriaRole | - | WAI-ARIA 角色。 | | selectPrefixCls | string | rc-select | 尺寸变换器选择的前缀。 | | showLessItems | boolean | false | 显示较少的页面项目。 | | showPrevNextJumpers | boolean | true | 显示上一个和下一个跳线。 | | showQuickJumper | boolean \| object | false | 显示快速跳页。 | | showSizeChanger | boolean | total > totalBoundaryShowSizeChanger | 显示页面大小更改器。 | | showTitle | boolean | true | 在页面项目上显示标题。 | | showTotal | (total, range) => ReactNode | - | 渲染总文本。 | | simple | boolean \| { readOnly?: boolean } | false | 使用简洁分页器。 | | sizeChangerRender | SizeChangerRender | - | 定制尺寸变换器。 | | style | React.CSSProperties | - | 根内联样式。 | | styles | Partial<Record<'item', CSSProperties>> | - | 语义化样式。 | | total | number | 0 | 项目总数。 | | totalBoundaryShowSizeChanger | number | 50 | 默认的边界 showSizeChanger。 | | onChange | (page: number, pageSize: number, info?: { recommendPage?: number }) => void | - | 当页面或页面大小更改时触发。info.recommendPage 仅在切换 pageSize 时传入，表示基于新页面大小推荐的分页号码。 | | onShowSizeChange | (current: number, size: number) => void | - | 当页面大小改变时触发。 |

本地开发

npm install
npm start
npm test
npm run tsc
npm run coverage
npm run compile
npm run build

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/pagination 基于 MIT 许可证发布。