Skip to content

Commit cdd4413

Browse files
afc163afc163
committed
docs: add Chinese README
1 parent 98c69e3 commit cdd4413

2 files changed

Lines changed: 188 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 mentions textarea with searchable suggestions and keyboard navigation.</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: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<div align="center">
2+
<h1>@rc-component/mentions</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+
- Textarea mentions with prefix based search and selection.
26+
- Keyboard navigation for suggestion menus.
27+
- Data-driven `options` API and `Option` children API.
28+
- Multiple prefixes, custom filtering, custom validation, and split token support.
29+
- Built on `@rc-component/input`, `@rc-component/menu`, and `@rc-component/trigger`.
30+
31+
## 安装
32+
33+
```bash
34+
npm install @rc-component/mentions
35+
```
36+
37+
> The package is published as `@rc-component/mentions`. Legacy `rc-mentions` references should migrate to the scoped package name.
38+
39+
## 使用
40+
41+
```tsx | pure
42+
import Mentions from '@rc-component/mentions';
43+
44+
const options = [
45+
{ value: 'light', label: 'Light' },
46+
{ value: 'bamboo', label: 'Bamboo' },
47+
{ value: 'cat', label: 'Cat' },
48+
];
49+
50+
export default () => (
51+
<Mentions options={options} placeholder="Use @ to mention someone" />
52+
);
53+
```
54+
55+
```tsx | pure
56+
import Mentions from '@rc-component/mentions';
57+
58+
const { Option } = Mentions;
59+
60+
export default () => (
61+
<Mentions prefix={['@', '#']}>
62+
<Option value="design">Design</Option>
63+
<Option value="docs">Docs</Option>
64+
</Mentions>
65+
);
66+
```
67+
68+
Import the styles from `assets/index.less` or the compiled CSS generated by `npm run compile`.
69+
70+
## 示例
71+
72+
本地运行示例：
73+
74+
```bash
75+
npm install
76+
npm start
77+
```
78+
79+
The demo site includes basic usage, dynamic suggestions, custom filtering, multiple prefixes, textarea behavior, and scroll callbacks.
80+
81+
## API
82+
83+
### Mentions
84+
85+
| 参数 | 类型 | 默认值 | 说明 |
86+
| ----------------- | ---------------------------------------------------------- | ------------- | ----------------------------------------------- |
87+
| allowClear | `boolean \| { clearIcon?: ReactNode }` | `false` | Show a clear button for the textarea value. |
88+
| autoFocus | `boolean` | `false` | Focus the textarea when mounted. |
89+
| autoSize | `boolean \| { minRows?: number; maxRows?: number }` | - | Auto resize textarea height. |
90+
| children | `ReactNode` | - | `Mentions.Option` children. |
91+
| className | `string` | - | Class name for the root element. |
92+
| classNames | `MentionsProps['classNames']` | - | Semantic class names for slots. |
93+
| defaultValue | `string` | - | Initial value. |
94+
| direction | `'ltr' \| 'rtl'` | `ltr` | Popup direction. |
95+
| filterOption | `false \| (input: string, option: OptionProps) => boolean` | - | Customize option filtering. |
96+
| getPopupContainer | `() => HTMLElement` | - | Container for the suggestion popup. |
97+
| id | `string` | - | Textarea id. |
98+
| notFoundContent | `ReactNode` | `Not Found` | Content shown when no option matches. |
99+
| options | `DataDrivenOptionProps[]` | - | Data-driven options. |
100+
| placement | `'top' \| 'bottom'` | `bottom` | Suggestion popup placement. |
101+
| popupClassName | `string` | - | Class name for the popup. |
102+
| prefix | `string \| string[]` | `@` | Trigger prefix or prefixes. |
103+
| prefixCls | `string` | `rc-mentions` | Class name prefix. |
104+
| rows | `number` | `1` | Textarea row count. |
105+
| silent | `boolean` | `false` | Ignore Enter behavior during transition phases. |
106+
| split | `string` | `' '` | String inserted after a selected mention. |
107+
| style | `React.CSSProperties` | - | Inline styles for the root element. |
108+
| styles | `MentionsProps['styles']` | - | Semantic styles for slots. |
109+
| transitionName | `string` | - | Popup transition name. |
110+
| validateSearch | `(text: string, split: MentionsProps['split']) => boolean` | - | Customize trigger search logic. |
111+
| value | `string` | - | Controlled value. |
112+
| onBlur | `React.FocusEventHandler<HTMLTextAreaElement>` | - | Triggered when textarea loses focus. |
113+
| onChange | `(text: string) => void` | - | Triggered when value changes. |
114+
| onFocus | `React.FocusEventHandler<HTMLTextAreaElement>` | - | Triggered when textarea receives focus. |
115+
| onKeyDown | `React.KeyboardEventHandler<HTMLTextAreaElement>` | - | Triggered on key down. |
116+
| onKeyUp | `React.KeyboardEventHandler<HTMLTextAreaElement>` | - | Triggered on key up. |
117+
| onPopupScroll | `(event: React.UIEvent<HTMLDivElement>) => void` | - | Triggered when the popup scrolls. |
118+
| onPressEnter | `React.KeyboardEventHandler<HTMLTextAreaElement>` | - | Triggered when Enter is pressed. |
119+
| onResize | `(size: { width: number; height: number }) => void` | - | Triggered when textarea size changes. |
120+
| onSearch | `(text: string, prefix: string) => void` | - | Triggered when a prefix starts a search. |
121+
| onSelect | `(option: OptionProps, prefix: string) => void` | - | Triggered when an option is selected. |
122+
123+
### Option
124+
125+
| 参数 | 类型 | 默认值 | 说明 |
126+
| --------- | --------------------- | ------- | ----------------------------------------- |
127+
| children | `ReactNode` | - | Option label. |
128+
| className | `string` | - | Class name for the option. |
129+
| disabled | `boolean` | `false` | Disable the option. |
130+
| key | `string` | - | React key and option key. |
131+
| style | `React.CSSProperties` | - | Inline option style. |
132+
| value | `string` | - | Mention value inserted into the textarea. |
133+
134+
### Ref
135+
136+
```tsx | pure
137+
import Mentions, { type MentionsRef } from '@rc-component/mentions';
138+
139+
const ref = React.useRef<MentionsRef>(null);
140+
141+
ref.current?.focus();
142+
ref.current?.blur();
143+
```
144+
145+
| 参数 | 类型 | 说明 |
146+
| ------------- | ----------------------------- | ------------------------------ |
147+
| focus | `() => void` | Focus the textarea. |
148+
| blur | `() => void` | Blur the textarea. |
149+
| textarea | `HTMLTextAreaElement \| null` | Deprecated textarea reference. |
150+
| nativeElement | `HTMLElement` | Root native element. |
151+
152+
## 本地开发
153+
154+
```bash
155+
npm install
156+
npm start
157+
npm test
158+
npm run tsc
159+
npm run compile
160+
npm run build
161+
```
162+
163+
## 发布
164+
165+
```bash
166+
npm run prepublishOnly
167+
```
168+
169+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
170+
171+
## 许可证
172+
173+
@rc-component/mentions is released under the [MIT](./LICENSE.md) license.
174+
175+
[npm-image]: https://img.shields.io/npm/v/@rc-component/mentions.svg?style=flat-square
176+
[npm-url]: https://npmjs.org/package/@rc-component/mentions
177+
[github-actions-image]: https://github.com/react-component/mentions/actions/workflows/react-component-ci.yml/badge.svg
178+
[github-actions-url]: https://github.com/react-component/mentions/actions/workflows/react-component-ci.yml
179+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/mentions/master.svg?style=flat-square
180+
[codecov-url]: https://app.codecov.io/gh/react-component/mentions
181+
[download-image]: https://img.shields.io/npm/dm/@rc-component/mentions.svg?style=flat-square
182+
[download-url]: https://npmjs.org/package/@rc-component/mentions
183+
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/mentions
184+
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/@rc-component/mentions?style=flat-square
185+
[dumi-url]: https://github.com/umijs/dumi
186+
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

0 commit comments

Comments
 (0)