Tag
タグコンポーネントは、コンテンツを分類するために使用されます。
インポート #
import Tag from 'primevue/tag';
基本 #
タグのラベルは、valueプロパティで定義されます。
新規
<Tag value="New"></Tag>
重要度 #
重要度は、タグのバリアントを定義します。
プライマリセカンダリ成功情報警告危険コントラスト
<Tag value="Primary"></Tag>
<Tag severity="secondary" value="Secondary"></Tag>
<Tag severity="success" value="Success"></Tag>
<Tag severity="info" value="Info"></Tag>
<Tag severity="warn" value="Warn"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<Tag severity="contrast" value="Contrast"></Tag>
ピル #
roundedを有効にすると、タグがピルとして表示されます。
プライマリセカンダリ成功情報警告危険コントラスト
<Tag value="Primary" rounded></Tag>
<Tag severity="secondary" value="Secondary" rounded></Tag>
<Tag severity="success" value="Success" rounded></Tag>
<Tag severity="info" value="Info" rounded></Tag>
<Tag severity="warn" value="Warn" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>
<Tag severity="contrast" value="Contrast" rounded></Tag>
アイコン #
値の横にフォントアイコンをiconプロパティで表示できます。
プライマリセカンダリ成功情報警告危険コントラスト
<Tag icon="pi pi-user" value="Primary"></Tag>
<Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
<Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
テンプレート #
コンポーネントの子は、テンプレートのコンテンツとして渡されます。
イタリア
<Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
<div class="flex items-center gap-2 px-1">
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italy</span>
</div>
</Tag>
アクセシビリティ #
スクリーンリーダー
タグにはデフォルトでロールと属性は含まれていません。すべての属性はルート要素に渡されるため、必要な場合はariaロールと属性を追加できます。タグが動的な場合は、aria-liveも利用できます。バッジをタブで操作可能にする必要がある場合は、カスタムキーハンドラーを実装するためにtabindexを追加できます。
キーボードサポート
コンポーネントには、インタラクティブな要素は含まれていません。