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