标签
标签组件用于对内容进行分类。
导入 #
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 以实现自定义键处理程序。
键盘支持
组件不包含任何交互元素。