Mention

Composant de saisie pour mentionner des utilisateurs, des tags ou d’autres entités avec suggestions d’autocomplétion.

Import

import { Mention } from 'asterui'

Exemples

Mention basique

Saisie de mention simple avec déclencheur @.

</>

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

Préfixe personnalisé

Utilisation du préfixe # pour les mentions de hashtag.

</>

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

Déclencheurs multiples

Utilisation de plusieurs composants de mention avec différents préfixes.

</>

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

Propriété	Description	Type	Par défaut
options	Tableau d’options de mention	Array<{ value: string, label: string }>	-
value	Valeur contrôlée	string	-
onChange	Callback lorsque la valeur change	(value: string) => void	-
prefix	Caractère qui déclenche les suggestions de mention	string	'@'
split	Caractère utilisé pour séparer les mentions dans la saisie	string	-
placeholder	Texte d’espace réservé de l’input	string	-
disabled	Désactiver la saisie de mention	boolean	false
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Navigation au clavier

• ↑ / ↓ - Naviguer à travers les suggestions de mention
• Entrée - Sélectionner la mention en surbrillance
• Échap - Fermer le menu déroulant de mention

Accessibilité

• Support complet de la navigation au clavier pour sélectionner les mentions
• Attributs ARIA pour que les lecteurs d’écran annoncent les suggestions
• Gestion du focus lors de l’ouverture et de la fermeture du menu déroulant
• Indicateurs visuels clairs pour les éléments sélectionnés et en focus