Skip to content

Commit 0065a00

Browse files
committed
docs: add Chinese README
1 parent fc0d148 commit 0065a00

2 files changed

Lines changed: 116 additions & 0 deletions

File tree

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<p>🔽 A trigger-driven dropdown component for React.</p>
55
</div>
66

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

810
<div align="center">
911

README.zh-CN.md

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<div align="center">
2+
<h1>@rc-component/dropdown</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<p>⬇️ React 下拉菜单基础组件,基于 trigger 和 menu 能力构建。</p>
5+
</div>
6+
7+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
8+
9+
10+
<div align="center">
11+
12+
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]
13+
14+
</div>
15+
16+
[npm-image]: https://img.shields.io/npm/v/@rc-component/dropdown.svg?style=flat-square
17+
[npm-url]: https://npmjs.org/package/@rc-component/dropdown
18+
[github-actions-image]: https://github.com/react-component/dropdown/actions/workflows/ci.yml/badge.svg
19+
[github-actions-url]: https://github.com/react-component/dropdown/actions/workflows/ci.yml
20+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/dropdown/master.svg?style=flat-square
21+
[codecov-url]: https://app.codecov.io/gh/react-component/dropdown
22+
[download-image]: https://img.shields.io/npm/dm/@rc-component/dropdown.svg?style=flat-square
23+
[download-url]: https://npmjs.org/package/@rc-component/dropdown
24+
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/%40rc-component%2Fdropdown?style=flat-square
25+
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/dropdown
26+
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
27+
[dumi-url]: https://github.com/umijs/dumi
28+
29+
## 特性
30+
31+
- Built on `@rc-component/trigger`.
32+
- 支持 hover, click, context menu, and custom trigger actions.
33+
- Accepts a React element or render function as dropdown overlay.
34+
- 支持 align point behavior and trigger-width matching.
35+
36+
## 安装
37+
38+
```bash
39+
npm install @rc-component/dropdown
40+
```
41+
42+
## 使用
43+
44+
```tsx | pure
45+
import Dropdown from '@rc-component/dropdown';
46+
import '@rc-component/dropdown/assets/index.css';
47+
48+
export default function App() {
49+
return (
50+
<Dropdown overlay={<div>Dropdown content</div>} trigger={['click']}>
51+
<button type="button">Open</button>
52+
</Dropdown>
53+
);
54+
}
55+
```
56+
57+
## 示例
58+
59+
```bash
60+
npm install
61+
npm start
62+
```
63+
64+
然后打开 `http://localhost:8000`
65+
66+
## API
67+
68+
Additional props are passed to the underlying [`@rc-component/trigger`](https://github.com/react-component/trigger) component.
69+
70+
| 参数 | 说明 | 类型 | 默认值 |
71+
| --- | --- | --- | --- |
72+
| alignPoint | Align popup to the click point | boolean | false |
73+
| animation | Popup animation name | string | - |
74+
| defaultVisible | Initial visible state | boolean | - |
75+
| getPopupContainer | Container where dropdown is rendered | `(node: HTMLElement) => HTMLElement` | `() => document.body` |
76+
| minOverlayWidthMatchTrigger | Whether overlay width should be at least trigger width | boolean | `true` unless `alignPoint` is set |
77+
| openClassName | Class name added to trigger when dropdown is open | string | `${prefixCls}-open` |
78+
| overlay | Dropdown overlay | `React.ReactElement \| (() => React.ReactElement)` | - |
79+
| overlayClassName | Additional overlay class name | string | - |
80+
| overlayStyle | Overlay style | `React.CSSProperties` | - |
81+
| placement | Dropdown placement | string | `bottomLeft` |
82+
| prefixCls | Component class name prefix | string | `rc-dropdown` |
83+
| transitionName | Popup transition class name | string | - |
84+
| trigger | Trigger action | `ActionType \| ActionType[]` | `['hover']` |
85+
| visible | Controlled visible state | boolean | - |
86+
| onOverlayClick | Callback when overlay is clicked | `(event: React.MouseEvent) => void` | - |
87+
| onVisibleChange | Callback when visibility changes | `(visible: boolean) => void` | - |
88+
89+
## 本地开发
90+
91+
```bash
92+
npm install
93+
npm start
94+
```
95+
96+
```bash
97+
npm test
98+
npm run tsc
99+
npm run lint
100+
npm run compile
101+
npm run build
102+
```
103+
104+
## 发布
105+
106+
```bash
107+
npm run prepublishOnly
108+
```
109+
110+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
111+
112+
## 许可证
113+
114+
@rc-component/dropdown is released under the [MIT](./LICENSE) license.

0 commit comments

Comments
 (0)