ant-design/components/mentions/index.en-US.md
lijianan a134dbb07c
feat: InputTextAreaMentions support onClear prop ()
* feat: Input support onClear

* chore: lint

* chore: lint

* Update package.json

Signed-off-by: lijianan <574980606@qq.com>

* docs: update docs

* fix: fix

* Update package.json

Signed-off-by: lijianan <574980606@qq.com>

* Update package.json

Signed-off-by: lijianan <574980606@qq.com>

* chore: fix

* chore: fix

* chore: fix

* feat: test

* feat: 1.6.2

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: 叶枫 <645381995@qq.com>
2024-07-19 10:10:48 +08:00

4.4 KiB
Raw Blame History

category group title description cover coverDark demo
Components Data Entry Mentions Used to mention someone or something in an input. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e4bXT7Uhi9YAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*pxR2S53P_xoAAAAAAAAAAAAADrJ8AQ/original
cols
2

When To Use

When you need to mention someone or something.

Usage upgrade after 5.1.0

:::info{title="Upgrade Tip"} 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>
);

Examples

Basic Variants Asynchronous loading With Form Customize Trigger Token disabled or readOnly Placement With clear icon autoSize Status _InternalPanelDoNotUseOrYouWillBeFired Component Token

API

Common props refCommon props

Mention

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 outlined 5.13.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 -
options Option Configuration Options [] 5.1.0

Mention methods

Name Description
blur() Remove focus
focus() Get focus

Option

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 -

Design Token