Skip to content

Commit 8c40a34

Browse files
committed
docs: add Chinese README
1 parent 3bbbb55 commit 8c40a34

2 files changed

Lines changed: 127 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 composable dialog 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: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<div align="center">
2+
<h1>@rc-component/dialog</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<p>💬 可组合的 React 对话框组件。</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/dialog.svg?style=flat-square
17+
[npm-url]: https://npmjs.org/package/@rc-component/dialog
18+
[github-actions-image]: https://github.com/react-component/dialog/actions/workflows/react-component-ci.yml/badge.svg
19+
[github-actions-url]: https://github.com/react-component/dialog/actions/workflows/react-component-ci.yml
20+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/dialog/master.svg?style=flat-square
21+
[codecov-url]: https://app.codecov.io/gh/react-component/dialog
22+
[download-image]: https://img.shields.io/npm/dm/@rc-component/dialog.svg?style=flat-square
23+
[download-url]: https://npmjs.org/package/@rc-component/dialog
24+
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/%40rc-component%2Fdialog?style=flat-square
25+
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/dialog
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+
- 支持 controlled visibility, mask, keyboard close, and focus restoration.
32+
- 支持自定义标题、页脚、关闭图标、容器、动画和弹窗内容渲染。
33+
- 提供 semantic `classNames` and `styles` hooks for the dialog structure.
34+
- 提供编译后的 JavaScript、TypeScript 类型定义和 CSS 资源。
35+
36+
## 安装
37+
38+
```bash
39+
npm install @rc-component/dialog
40+
```
41+
42+
## 使用
43+
44+
```tsx | pure
45+
import Dialog from '@rc-component/dialog';
46+
import '@rc-component/dialog/assets/index.css';
47+
48+
export default function App() {
49+
return (
50+
<Dialog title="Dialog" visible onClose={() => {}}>
51+
<p>Dialog content</p>
52+
</Dialog>
53+
);
54+
}
55+
```
56+
57+
## 示例
58+
59+
```bash
60+
npm install
61+
npm start
62+
```
63+
64+
然后打开 `http://localhost:8000`
65+
66+
在线演示: https://dialog.react-component.vercel.app/
67+
68+
## API
69+
70+
| 参数 | 说明 | 类型 | 默认值 |
71+
| --- | --- | --- | --- |
72+
| afterClose | Callback after close animation ends | `() => void` | - |
73+
| animation | Dialog animation name | string | - |
74+
| className | Additional dialog class name | string | - |
75+
| classNames | Semantic class names | `{ header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string }` | - |
76+
| closable | Whether to show close button, or close button props | boolean \| object | true |
77+
| closeIcon | Custom close icon | `React.ReactNode` | - |
78+
| destroyOnHidden | Unmount children after dialog closes | boolean | false |
79+
| focusTriggerAfterClose | Focus trigger element after close | boolean | true |
80+
| footer | Dialog footer | `React.ReactNode` | - |
81+
| forceRender | Render dialog before it is first shown | boolean | false |
82+
| getContainer | Container where dialog is mounted | `() => HTMLElement` | - |
83+
| keyboard | Whether pressing Esc closes the dialog | boolean | true |
84+
| mask | Whether to show mask | boolean | true |
85+
| maskAnimation | Mask animation name | string | - |
86+
| maskClosable | Whether clicking mask closes the dialog | boolean | true |
87+
| maskTransitionName | Mask transition class name | string | - |
88+
| modalRender | Custom modal content renderer | `(node: React.ReactNode) => React.ReactNode` | - |
89+
| mousePosition | Mouse position used for transform origin | `{ x: number; y: number }` | - |
90+
| prefixCls | Component class name prefix | string | `rc-dialog` |
91+
| scrollLock | Whether to lock body scroll when open | boolean | true |
92+
| style | Root dialog style | `React.CSSProperties` | - |
93+
| styles | Semantic styles | `{ header?: React.CSSProperties; body?: React.CSSProperties; footer?: React.CSSProperties; mask?: React.CSSProperties; content?: React.CSSProperties; wrapper?: React.CSSProperties }` | - |
94+
| title | Dialog title | `React.ReactNode` | - |
95+
| transitionName | Dialog transition class name | string | - |
96+
| visible | Whether the dialog is visible | boolean | false |
97+
| zIndex | Dialog z-index | number | - |
98+
| onClose | Callback when close button or mask is clicked | `(event: React.SyntheticEvent) => void` | - |
99+
100+
## 本地开发
101+
102+
```bash
103+
npm install
104+
npm start
105+
```
106+
107+
```bash
108+
npm test
109+
npm run tsc
110+
npm run lint
111+
npm run compile
112+
npm run build
113+
```
114+
115+
## 发布
116+
117+
```bash
118+
npm run prepublishOnly
119+
```
120+
121+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
122+
123+
## 许可证
124+
125+
@rc-component/dialog is released under the [MIT](./LICENSE.md) license.

0 commit comments

Comments
 (0)