タグ

タグコンポーネントはコンテンツを分類するために使用されます。

インポート#


import { Tag } from 'primereact/tag';
         

基本#

タグのラベルはvalueプロパティで定義されます。

新規

<Tag value="New"></Tag>
         

重要度#

重要度はタグの色を定義します。可能な値は、デフォルトのテーマカラーに加えて、success、info、warning、dangerです。

プライマリー成功情報警告危険セカンダリコントラスト

<Tag value="Primary"></Tag>
<Tag severity="success" value="Success"></Tag>
<Tag severity="info" value="Info"></Tag>
<Tag severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<Tag severity="secondary" value="Secondary"></Tag>
<Tag severity="contrast" value="Contrast"></Tag>
         

ピル#

roundedを有効にすると、タグがピルとして表示されます。

プライマリー成功情報警告危険セカンダリコントラスト

<Tag value="Primary" rounded></Tag>
<Tag severity="success" value="Success" rounded></Tag>
<Tag severity="info" value="Info" rounded></Tag>
<Tag severity="warning" value="Warning" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>
<Tag severity="secondary" value="Secondary" rounded></Tag>
<Tag severity="contrast" value="Contrast" rounded></Tag>
         

アイコン#

iconプロパティを使用して、値の横にフォントアイコンを表示できます。

プライマリー成功情報警告危険

<Tag className="mr-2" icon="pi pi-user" value="Primary"></Tag>
<Tag className="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag className="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag className="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
         

テンプレート#

コンポーネントの子要素は、テンプレートのコンテンツとして渡されます。

国イタリア

<Tag style={{background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}}>
    <div className="flex align-items-center gap-2">
        <img alt="Country" src="/images/flag/flag_placeholder.png" className="flag flag-it" style={{ width: '18px' }}/>
        <span className="text-base">Italy</span>
        <i className="pi pi-times text-xs"></i>
    </div>
</Tag>
         

アクセシビリティ#

スクリーンリーダー

タグはデフォルトではロールや属性を含んでいません。すべての属性はルート要素に渡されるため、必要に応じてariaロールや属性を追加できます。タグが動的な場合は、aria-liveも使用できます。バッジをタブで移動可能にする必要がある場合は、tabIndexを追加してカスタムキーハンドラーを実装できます。

キーボードサポート

コンポーネントにはインタラクティブな要素が含まれていません。

                PrimeReact 10.8.3 by PrimeTek