Importimport { Mentions } from "antd"; |
Sourcecomponents/mentions |
Importimport { Mentions } from "antd"; |
Sourcecomponents/mentions |
When you need to mention someone or something.
After version 5.1.0, we provide a simpler usage <Mentions options={[...]} /> with better performance and potential of writing simpler code style in your applications.
Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.
// works when >=5.1.0, recommended ✅const options = [{ value: 'sample', label: 'sample' }];return <Mentions options={options} />;// works when <5.1.0, deprecated when >=5.1.0 🙅🏻♀️return (<Mentions onChange={onChange}><Mentions.Option value="sample">Sample</Mentions.Option></Mentions>);
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| allowClear | If allow to remove mentions content with clear icon | boolean | { clearIcon?: ReactNode } | false | 5.13.0 |
| autoFocus | Auto get focus when component mounted | boolean | false | |
| autoSize | Textarea height autosize feature, can be set to true | false or an object { minRows: 2, maxRows: 6 } | boolean | object | false | |
| defaultValue | Default value | string | - | |
| filterOption | Customize filter option logic | false | (input: string, option: OptionProps) => boolean | - | |
| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - | |
| notFoundContent | Set mentions content when not match | ReactNode | Not Found | |
| placement | Set popup placement | top | bottom | bottom | |
| prefix | Set trigger prefix keyword | string | string[] | @ | |
| split | Set split string before and after selected mention | string | | |
| status | Set validation status | 'error' | 'warning' | 'success' | 'validating' | - | 4.19.0 |
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | |
| value | Set value of mentions | string | - | |
| variant | Variants of Input | outlined | borderless | filled | underlined | outlined | 5.13.0 | underlined: 5.24.0 |
| onBlur | Trigger when mentions lose focus | () => void | - | |
| onChange | Trigger when value changed | (text: string) => void | - | |
| onClear | Callback when click the clear button | () => void | - | 5.20.0 |
| onFocus | Trigger when mentions get focus | () => void | - | |
| onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - | |
| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | |
| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | |
| onPopupScroll | Trigger when mentions scroll | (e: Event) => void | - | 5.23.0 |
| options | Option Configuration | Options | [] | 5.1.0 |
| Name | Description |
|---|---|
| blur() | Remove focus |
| focus() | Get focus |
| Property | Description | Type | Default |
|---|---|---|---|
| label | Title of the option | React.ReactNode | - |
| key | The key value of the option | string | - |
| disabled | Optional | boolean | - |
| className | className | string | - |
| style | The style of the option | React.CSSProperties | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| activeBg | Background color when the input box is activated | string | #ffffff |
| activeBorderColor | Active border color | string | #1677ff |
| activeShadow | Box-shadow when active | string | 0 0 0 2px rgba(5,145,255,0.1) |
| addonBg | Background color of addon | string | rgba(0,0,0,0.02) |
| controlItemWidth | Height of menu item | string | number | 100 |
| dropdownHeight | Height of popup | string | number | 250 |
| errorActiveShadow | Box-shadow when active in error status | string | 0 0 0 2px rgba(255,38,5,0.06) |
| hoverBg | Background color when the input box hovers | string | #ffffff |
| hoverBorderColor | Hover border color | string | #4096ff |
| inputFontSize | Font size | number | 14 |
| inputFontSizeLG | Font size of large | number | 16 |
| inputFontSizeSM | Font size of small | number | 14 |
| paddingBlock | Vertical padding of input | number | 4 |
| paddingBlockLG | Vertical padding of large input | number | 7 |
| paddingBlockSM | Vertical padding of small input | number | 0 |
| paddingInline | Horizontal padding of input | number | 11 |
| paddingInlineLG | Horizontal padding of large input | number | 11 |
| paddingInlineSM | Horizontal padding of small input | number | 7 |
| warningActiveShadow | Box-shadow when active in warning status | string | 0 0 0 2px rgba(255,215,5,0.1) |
| zIndexPopup | z-index of popup | number | 1050 |
Basic usage.
async.
Customize Trigger Token by prefix props. Default to @, Array<string> also supported.
Change the suggestions placement.
Height autoSize.
Variants of Mentions, there are four variants: outlined filled borderless and underlined.
Controlled mode, for example, to work with Form.
Configure disabled and readOnly.
Customize clear button.
Add status to Mentions with status, which could be error or warning.
