Skip to content

Commit 8a704be

Browse files
committed
docs: add Chinese README
1 parent b425b8c commit 8a704be

2 files changed

Lines changed: 96 additions & 0 deletions

File tree

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
</p>
1313
</div>
1414

15+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
16+
1517

1618
## Highlights
1719

README.zh-CN.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<div align="center">
2+
<h1>@rc-component/virtual-list</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<p>🧾 React 虚拟列表组件,用于高性能渲染长列表。</p>
5+
<p>
6+
<a href="https://www.npmjs.com/package/@rc-component/virtual-list"><img src="https://img.shields.io/npm/v/@rc-component/virtual-list.svg?style=flat-square" alt="npm version" /></a>
7+
<a href="https://www.npmjs.com/package/@rc-component/virtual-list"><img src="https://img.shields.io/npm/dm/@rc-component/virtual-list.svg?style=flat-square" alt="npm downloads" /></a>
8+
<a href="https://github.com/react-component/virtual-list/actions/workflows/react-component-ci.yml"><img src="https://github.com/react-component/virtual-list/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a>
9+
<a href="https://app.codecov.io/gh/react-component/virtual-list"><img src="https://img.shields.io/codecov/c/github/react-component/virtual-list/master.svg?style=flat-square" alt="Codecov" /></a>
10+
<a href="https://bundlephobia.com/package/@rc-component/virtual-list"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/virtual-list" alt="bundle size" /></a>
11+
<a href="https://github.com/umijs/dumi"><img src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square" alt="dumi" /></a>
12+
</p>
13+
</div>
14+
15+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
16+
17+
18+
## 特性
19+
20+
- Built for React and maintained by the rc-component team.
21+
- 被 Ant Design 使用和其他 React 组件库使用。
22+
- 提供 TypeScript declarations with both ES module and CommonJS outputs.
23+
- 保留 examples, tests, and preview builds aligned with the package source.
24+
25+
## 安装
26+
27+
```bash
28+
npm install @rc-component/virtual-list
29+
```
30+
31+
## 使用
32+
33+
```tsx
34+
import List from '@rc-component/virtual-list';
35+
36+
const data = Array.from({ length: 1000 }).map((_, index) => ({
37+
id: index,
38+
label: `Item ${index}`,
39+
}));
40+
41+
export default () => (
42+
<List data={data} height={240} itemHeight={32} itemKey="id">
43+
{(item) => <div>{item.label}</div>}
44+
</List>
45+
);
46+
```
47+
48+
## 示例
49+
50+
Run the local dumi site to explore the examples:
51+
52+
```bash
53+
npm install
54+
npm start
55+
```
56+
57+
## API
58+
59+
### List
60+
61+
| 属性 | 说明 | 类型 | 默认值 |
62+
| ---------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
63+
| children | Render function for each item. The third argument contains measuring props used by legacy browser compatibility paths. | `(item, index, props) => ReactElement` | - |
64+
| component | Custom list container element. | `string` \| `ComponentType` | `div` |
65+
| data | Items rendered by the virtual list. | `T[]` | - |
66+
| disabled | Disable scroll position checks, usually while coordinating animation. | `boolean` | `false` |
67+
| fullHeight | Whether the holder should keep full height. | `boolean` | `true` |
68+
| height | Visible list height. | `number` | - |
69+
| itemHeight | Minimum item height used to calculate the virtual range. | `number` | - |
70+
| itemKey | Key field or key getter for items. | `string` \| `(item) => React.Key` | - |
71+
| onScroll | Called when the list scrolls. | `React.UIEventHandler<HTMLElement>` | - |
72+
| styles | Custom scrollbar part styles. | `object` | - |
73+
| virtual | Enable virtual rendering. | `boolean` | `true` |
74+
75+
## 本地开发
76+
77+
```bash
78+
npm install
79+
npm start
80+
npm test
81+
npm run build
82+
```
83+
84+
## 发布
85+
86+
```bash
87+
npm run prepublishOnly
88+
```
89+
90+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
91+
92+
## 许可证
93+
94+
@rc-component/virtual-list is released under the [MIT](./LICENSE) license.

0 commit comments

Comments
 (0)