用于信息的选择、筛选、分类。用户通过标签进行信息反馈和交互操作。
基本使用
标签的基本用法
html
<iui-tag>Default</iui-tag><iui-tag>Default</iui-tag>标签尺寸
标签的大小分为：small、medium、large 三种，可以在不同场景下选择合适按钮尺寸。推荐及默认尺寸为 medium。
html
<iui-tag size="large">Large</iui-tag>
<iui-tag size="medium">Medium</iui-tag>
<iui-tag size="small">small</iui-tag><iui-tag size="large">Large</iui-tag>
<iui-tag size="medium">Medium</iui-tag>
<iui-tag size="small">small</iui-tag>标签颜色
通过 color 可以将标签设置为不同颜色。
html
<iui-tag color="#f53f3f">Red</iui-tag>
<iui-tag color="#165dff">Blue</iui-tag>
<iui-tag color="#7bc616">Green</iui-tag><iui-tag color="#f53f3f">Red</iui-tag>
<iui-tag color="#165dff">Blue</iui-tag>
<iui-tag color="#7bc616">Green</iui-tag>带图标的标签
通过 icon 可以在标签左侧添加图标，支持所有内置图标。也可以通过 icon 插槽自定义内容。
html
<iui-tag icon="github-fill">Github</iui-tag><iui-tag icon="github-fill">Github</iui-tag>可关闭的标签
通过 closable 可以设置标签为可关闭状态，关闭标签时会触发 close 事件。
html
<iui-tag closeable>Tag</iui-tag><iui-tag closeable>Tag</iui-tag>可选择的标签
通过 checkable 可以设置标签为可选择状态，选择标签时会触发 change 事件。 通过 checked 可以设置标签为选中状态， checkedColor 可以设置选中状态的颜色。
html
<iui-tag checkable>Checkable</iui-tag>
<iui-tag checkable checked checkedColor="#00B42A">Custom CheckedColor</iui-tag><iui-tag checkable>Checkable</iui-tag>
<iui-tag checkable checked checkedColor="#00B42A">Custom CheckedColor</iui-tag>API
<Tag>props<Tag>events<Tag>slots