Skip to content

Commit f8e1490

Browse files
afc163afc163
committed
docs: add Chinese README
1 parent e4526e7 commit f8e1490

2 files changed

Lines changed: 149 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<p>📄 React pagination primitives for page navigation, size changing, quick jumping, and locale-aware controls.</p>
66
</div>
77

8+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
9+
810

911
<div align="center">
1012

‎README.zh-CN.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<div align="center">
2+
<h1>@rc-component/pagination</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
5+
<p>📄 React 分页组件，支持页码、快速跳转、尺寸切换和本地化。</p>
6+
</div>
7+
8+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
9+
10+
11+
<div align="center">
12+
13+
[![NPM version][npm-image]][npm-url]
14+
[![npm download][download-image]][download-url]
15+
[![build status][github-actions-image]][github-actions-url]
16+
[![Codecov][codecov-image]][codecov-url]
17+
[![bundle size][bundlephobia-image]][bundlephobia-url]
18+
[![dumi][dumi-image]][dumi-url]
19+
20+
</div>
21+
22+
23+
## 特性
24+
25+
- Controlled and uncontrolled pagination state.
26+
- Page-size changer, quick jumper, simple mode, compact item count, and custom item rendering.
27+
- Locale packages exposed from `@rc-component/pagination/locale/*`.
28+
- Semantic `classNames` and `styles` for item-level customization.
29+
- TypeScript definitions for props, locale, callbacks, and state.
30+
- 被 Ant Design 用作共享的 pagination 基础能力。
31+
32+
## 安装
33+
34+
```bash
35+
npm install @rc-component/pagination
36+
```
37+
38+
## 使用
39+
40+
```tsx | pure
41+
import Pagination from '@rc-component/pagination';
42+
import '@rc-component/pagination/assets/index.css';
43+
export default () => (
44+
<Pagination defaultCurrent={1} total={120} showSizeChanger showQuickJumper />
45+
);
46+
```
47+
48+
```tsx | pure
49+
import Pagination from '@rc-component/pagination';
50+
import enUS from '@rc-component/pagination/locale/en_US';
51+
export default () => (
52+
<Pagination
53+
defaultCurrent={2}
54+
total={500}
55+
locale={enUS}
56+
showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
57+
/>
58+
);
59+
```
60+
61+
## 示例
62+
63+
本地运行示例：
64+
65+
```bash
66+
npm install
67+
npm start
68+
```
69+
70+
然后在浏览器中打开 dumi 开发服务地址。
71+
72+
## API
73+
74+
### Pagination
75+
76+
| 参数 | 类型 | 默认值 | 说明 |
77+
| ---------------------------- | ------------------------------------------ | -------------------------------------- | ----------------------------------------------- |
78+
| align | `'start' \| 'center' \| 'end'` | - | Align pagination items. |
79+
| className | `string` | - | Class name for the root element. |
80+
| classNames | `Partial<Record<'item', string>>` | - | Semantic class names. |
81+
| current | `number` | - | Controlled current page. |
82+
| defaultCurrent | `number` | `1` | Initial current page. |
83+
| defaultPageSize | `number` | `10` | Initial page size. |
84+
| disabled | `boolean` | `false` | Disable pagination interactions. |
85+
| hideOnSinglePage | `boolean` | `false` | Hide when there is only one page. |
86+
| itemRender | `(page, type, element) => ReactNode` | - | Customize page, previous, next, and jump items. |
87+
| jumpNextIcon | `ReactNode \| ComponentType` | - | Custom next-jump icon. |
88+
| jumpPrevIcon | `ReactNode \| ComponentType` | - | Custom previous-jump icon. |
89+
| locale | `PaginationLocale` | `zh_CN` | Locale text. |
90+
| nextIcon | `ReactNode \| ComponentType` | - | Custom next icon. |
91+
| pageSize | `number` | - | Controlled page size. |
92+
| pageSizeOptions | `number[]` | - | Page-size options. |
93+
| prefixCls | `string` | `rc-pagination` | Class name prefix. |
94+
| prevIcon | `ReactNode \| ComponentType` | - | Custom previous icon. |
95+
| role | `React.AriaRole` | - | WAI-ARIA role. |
96+
| selectPrefixCls | `string` | `rc-select` | Prefix for the size changer select. |
97+
| showLessItems | `boolean` | `false` | Show fewer page items. |
98+
| showPrevNextJumpers | `boolean` | `true` | Show previous and next jumpers. |
99+
| showQuickJumper | `boolean \| object` | `false` | Show quick page jumper. |
100+
| showSizeChanger | `boolean` | `total > totalBoundaryShowSizeChanger` | Show page-size changer. |
101+
| showTitle | `boolean` | `true` | Show title on page items. |
102+
| showTotal | `(total, range) => ReactNode` | - | Render total text. |
103+
| simple | `boolean \| { readOnly?: boolean }` | `false` | Use simple pager. |
104+
| sizeChangerRender | `SizeChangerRender` | - | Customize the size changer. |
105+
| style | `React.CSSProperties` | - | Root inline style. |
106+
| styles | `Partial<Record<'item', CSSProperties>>` | - | Semantic styles. |
107+
| total | `number` | `0` | Total item count. |
108+
| totalBoundaryShowSizeChanger | `number` | `50` | Boundary for default `showSizeChanger`. |
109+
| onChange | `(page: number, pageSize: number) => void` | - | Triggered when page or page size changes. |
110+
| onShowSizeChange | `(current: number, size: number) => void` | - | Triggered when page size changes. |
111+
112+
## 本地开发
113+
114+
```bash
115+
npm install
116+
npm start
117+
npm test
118+
npm run tsc
119+
npm run coverage
120+
npm run compile
121+
npm run build
122+
```
123+
124+
## 发布
125+
126+
```bash
127+
npm run prepublishOnly
128+
```
129+
130+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
131+
132+
## 许可证
133+
134+
@rc-component/pagination is released under the [MIT](./LICENSE.md) license.
135+
136+
[npm-image]: https://img.shields.io/npm/v/@rc-component/pagination.svg?style=flat-square
137+
[npm-url]: https://npmjs.org/package/@rc-component/pagination
138+
[github-actions-image]: https://github.com/react-component/pagination/actions/workflows/react-component-ci.yml/badge.svg
139+
[github-actions-url]: https://github.com/react-component/pagination/actions/workflows/react-component-ci.yml
140+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/pagination/master.svg?style=flat-square
141+
[codecov-url]: https://app.codecov.io/gh/react-component/pagination
142+
[download-image]: https://img.shields.io/npm/dm/@rc-component/pagination.svg?style=flat-square
143+
[download-url]: https://npmjs.org/package/@rc-component/pagination
144+
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/pagination
145+
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/pagination
146+
[dumi-url]: https://github.com/umijs/dumi
147+
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

0 commit comments

Comments
 (0)