ant-design/components/mentions/index.en-US.md
zombieJ ecb2eb6ede
feat: Add Mentions component (#16532)
* init

* first demo

* support empty

* add loading support

* add form sample

* update form sample

* omit value & defaultValue

* add 2 rest demo

* placement support

* update docs

* fix test

* update docs

* add test case

* fix lint

* follow textarea style

* update docs style
2019-05-17 12:05:03 +08:00

1.8 KiB

category type title
Components Data Entry Mentions

Mention component.

Mention component is deprecated. Please click here to view old document.

When To Use

When need to mention someone or something.

API

<Mentions onChange={onChange}>
  <Mentions.Option value="sample">Sample</Mentions.Option>
</Mentions>

Mention

Property Description Type Default
autoFocus Auto get focus when component mounted boolean false
defaultValue Default value string -
filterOption Customize filter option logic false | (input: string, option: OptionProps) => boolean -
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 ' '
validateSearch Customize trigger search logic (text: string, props: MentionsProps) => void -
value Set value of mentions string -
onChange Trigger when value changed (text: string) => void -
onSelect Trigger when user select the option (option: OptionProps, prefix: string) => void -
onSearch Trigger when prefix hit (text: string, prefix: string) => void -
onFocus Trigger when mentions get focus () => void -
onBlur Trigger when mentions lose focus () => void -

Mention methods

Name Description
blur() remove focus
focus() get focus

Option

Property Description Type Default
children suggestion content ReactNode -
value value of suggestion, the value will insert into input filed while selected string ''