Mention

用于提及用户、标签或其他实体的输入组件，带自动完成建议。

导入

import { Mention } from 'asterui'

示例

基础提及

带 @ 触发器的简单提及输入。

</>

import { Mention } from 'asterui'
import { useState } from 'react'

function App() {
  const users = [
    { value: 'john', label: 'John Doe' },
    { value: 'jane', label: 'Jane Smith' },
    { value: 'bob', label: 'Bob Johnson' },
    { value: 'alice', label: 'Alice Williams' },
  ]
  
  const [text, setText] = useState('')
  
  return (
      <div>
        <Mention
          options={users}
          value={text}
          onChange={setText}
          placeholder="Type @ to mention someone"
        />
        <div className="mt-2 text-sm text-base-content/70">
          Text: {text || '(empty)'}
        </div>
      </div>
    )
}

export default App

自定义前缀

使用 # 前缀进行标签提及。

</>

import { Mention } from 'asterui'
import { useState } from 'react'

function App() {
  const tags = [
    { value: 'react', label: 'React' },
    { value: 'typescript', label: 'TypeScript' },
    { value: 'javascript', label: 'JavaScript' },
    { value: 'webdev', label: 'Web Development' },
  ]
  
  const [text, setText] = useState('')
  
  return (
      <div>
        <Mention
          options={tags}
          value={text}
          onChange={setText}
          prefix="#"
          placeholder="Type # to add hashtag"
        />
        <div className="mt-2 text-sm text-base-content/70">
          Text: {text || '(empty)'}
        </div>
      </div>
    )
}

export default App

多个触发器

使用不同前缀的多个提及组件。

</>

import { Mention, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const users = [
    { value: 'john', label: 'John Doe' },
    { value: 'jane', label: 'Jane Smith' },
    { value: 'bob', label: 'Bob Johnson' },
    { value: 'alice', label: 'Alice Williams' },
  ]
  
  const tags = [
    { value: 'react', label: 'React' },
    { value: 'typescript', label: 'TypeScript' },
    { value: 'javascript', label: 'JavaScript' },
    { value: 'webdev', label: 'Web Development' },
  ]
  
  const [userText, setUserText] = useState('')
  const [tagText, setTagText] = useState('')
  
  return (
      <Space direction="vertical" size="md">
        <div>
          <label className="block mb-2 text-sm font-medium">
            Mention Users (@)
          </label>
          <Mention
            options={users}
            value={userText}
            onChange={setUserText}
            prefix="@"
            placeholder="Type @ to mention users"
          />
          <div className="mt-1 text-xs text-base-content/70">
            {userText || '(empty)'}
          </div>
        </div>
  
        <div>
          <label className="block mb-2 text-sm font-medium">
            Add Tags (#)
          </label>
          <Mention
            options={tags}
            value={tagText}
            onChange={setTagText}
            prefix="#"
            placeholder="Type # to add tags"
          />
          <div className="mt-1 text-xs text-base-content/70">
            {tagText || '(empty)'}
          </div>
        </div>
      </Space>
    )
}

export default App

API

Mention

属性	描述	类型	默认值
options	提及选项数组	Array<{ value: string, label: string }>	-
value	受控值	string	-
onChange	值改变时的回调	(value: string) => void	-
prefix	触发提及建议的字符	string	'@'
split	用于在输入中分隔提及的字符	string	-
placeholder	输入占位符文本	string	-
disabled	禁用提及输入	boolean	false
className	额外的 CSS 类名	string	-
data-testid	用于测试的测试 ID	string	-

键盘导航

• ↑ / ↓ - 浏览提及建议
• Enter - 选择高亮显示的提及
• Esc - 关闭提及下拉菜单

无障碍

• 完整的键盘导航支持以选择提及
• ARIA 属性，供屏幕阅读器朗读建议
• 下拉菜单打开和关闭时的焦点管理
• 选中和聚焦项目的清晰视觉指示器