メンション

メンションコンポーネントは、テキスト内のオブジェクトをタグ付けするために使用されます。

インポート#


import { Mention } from 'primereact/mention';
         

基本#

メンションは、valueおよびonChangeプロパティを持つ制御コンポーネントとして使用されます。さらに、結果をクエリするためにsuggestionsとonSearchが必要です。


<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />
         

トリガー#

誰かや何かをメンションするための、入力フィールドで期待されるキーワードを定義するために使用されます。


<Mention value={value} onChange={(e) => setValue(e.target.value)} trigger={['@', '#']} suggestions={multipleSuggestions} onSearch={onMultipleSearch}
    field={['nickname']} placeholder="Enter @ to mention people, # to mention tag" itemTemplate={multipleItemTemplate} rows={5} cols={40} />
         

自動リサイズ#

autoResizeが有効になっている場合、テキストエリアはスクロールバーを表示するのではなく、拡大します。


<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} autoResize />
         

フロートラベル#

フォーカスされたとき、フロートラベルが入力フィールドの上に表示されます。


<span className="p-float-label">
    <Mention inputId="newpost" value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} 
        field="nickname" rows={5} cols={40} itemTemplate={itemTemplate} />
    <label htmlFor="newpost">New Post</label>
</span>
         

無効#

検証に失敗したことを示すために、p-invalidクラスを使用して無効状態のスタイルが追加されます。


<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} inputClassName="p-invalid" />
         

無効化#

disabledが存在する場合、要素を編集したり、フォーカスしたりすることはできません。


<Mention disabled />
         

アクセシビリティ#

スクリーンリーダー

コンポーネントを説明する値は、labelタグとinputId propの組み合わせ、またはaria-labelledby、aria-labelプロパティを使用して提供できます。入力要素には、comboboxロールに加えて、 aria-autocomplete、aria-haspopup、およびaria-expanded属性があります。入力とポップアップの関係はaria-controlsで作成され、aria-activedescendant属性は、ポップアップリスト内でのキーボードナビゲーション中に、どのオプションを読み上げるかをスクリーンリーダーに指示するために使用されます。

ポップアップリストには、入力要素のaria-controls属性を参照するIDがあり、ロールとしてlistboxを使用します。各リスト項目には、optionロールと、入力要素のaria-activedescendantと一致するIDがあります。


<label htmlFor="men1">Username</label>
<Mention inputId="men1" />

<span id="men2">Email</span>
<Mention aria-labelledby="men2" />

<Mention aria-label="City" />
     

キーボードサポート

キー機能
tabポップアップが表示されていない場合は、入力要素にフォーカスを移動します。ポップアップが開いていて、項目が強調表示されている場合、ポップアップが閉じられ、項目が選択され、フォーカスが次のフォーカス可能な要素に移動します。
上矢印ポップアップが表示されている場合、前の項目を強調表示します。
下矢印ポップアップが表示されている場合、次の項目を強調表示します。
enterポップアップが表示されている場合、強調表示された項目を選択してポップアップを閉じます。
homeポップアップが表示されている場合、最初の項目を強調表示します。
endポップアップが表示されている場合、最後の項目を強調表示します。
escapeポップアップを非表示にします。
                  PrimeReact 10.8.3 by PrimeTek