Ant Design

⌘ K

5.21.3

Mentions

Used to mention someone or something in an input.

가져오기import{ Mentions }from"antd";

소스components/mentions

문서

이 페이지 수정 변경 로그

Ant Design

⌘ K

5.21.3

Mentions

Used to mention someone or something in an input.

가져오기import{ Mentions }from"antd";

소스components/mentions

문서

이 페이지 수정 변경 로그

When To Use

When you need to mention someone or something.

Usage upgrade after 5.1.0

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

API

Common props ref：Common 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

컴포넌트 토큰어떻게 사용하나요?

토큰 이름	설명	타입	기본값
activeBg	输入框激活状态时背景颜色	string	#ffffff
activeBorderColor	激活态边框色	string	#1677ff
activeShadow	激活态阴影	string	0 0 0 2px rgba(5, 145, 255, 0.1)
addonBg	前/后置标签背景色	string	rgba(0, 0, 0, 0.02)
controlItemWidth	菜单项高度	string \| number	100
dropdownHeight	弹层高度	string \| number	250
errorActiveShadow	错误状态时激活态阴影	string	0 0 0 2px rgba(255, 38, 5, 0.06)
hoverBg	输入框hover状态时背景颜色	string	#ffffff
hoverBorderColor	悬浮态边框色	string	#4096ff
inputFontSize	字体大小	number	14
inputFontSizeLG	大号字体大小	number	16
inputFontSizeSM	小号字体大小	number	14
paddingBlock	输入框纵向内边距	number	4
paddingBlockLG	大号输入框纵向内边距	number	7
paddingBlockSM	小号输入框纵向内边距	number	0
paddingInline	输入框横向内边距	number	11
paddingInlineLG	大号输入框横向内边距	number	11
paddingInlineSM	小号输入框横向内边距	number	7
warningActiveShadow	警告状态时激活态阴影	string	0 0 0 2px rgba(255, 215, 5, 0.1)
zIndexPopup	弹层 z-index	number	1050

글로벌 토큰어떻게 사용하나요?