引入
代码演示
基础用法
通过 `type` 属性控制标签颜色。
空心样式
设置 `plain` 属性设置为空心样式。
圆角样式
通过 `round` 设置为圆角样式。
标记样式
通过 `mark` 设置为标记样式(半圆角)。
可关闭标签
添加 `closeable` 属性表示标签是可关闭的,关闭标签时会触发 `close` 事件,在 `close` 事件中可以执行隐藏标签的逻辑。
标签大小
通过 `size` 属性调整标签大小。
自定义颜色
通过 `color` 和 `text-color` 属性设置标签颜色。
API
Props
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
type | 类型,可选值为primary success danger warning | string | default | |
size | 大小, 可选值为large medium | string | - | |
color | 标签颜色 | string | - | |
plain | 是否为空心样式 | boolean | false | |
round | 是否为圆角样式 | boolean | false | |
mark | 是否为标记样式 | boolean | false | |
text-color | 文本颜色,优先级高于color 属性 | string | white | |
closeable | 是否为可关闭标签 | boolean | false |
Slots
名称 | 说明 | |
---|---|---|
default | 标签显示内容 |
Events
事件名 | 说明 | 回调参数 | |
---|---|---|---|
click | 点击时触发 | event: Event | |
close | 关闭标签时触发 | - |
样式变量
组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考
。
名称 | 默认值 | 描述 | |
---|---|---|---|
@tag-padding | 0 @padding-base | - | |
@tag-text-color | @white | - | |
@tag-font-size | @font-size-sm | - | |
@tag-border-radius | 2px | - | |
@tag-line-height | 16px | - | |
@tag-medium-padding | 2px 6px | - | |
@tag-large-padding | @padding-base @padding-xs | - | |
@tag-large-border-radius | @border-radius-md | - | |
@tag-large-font-size | @font-size-md | - | |
@tag-round-border-radius | @border-radius-max | - | |
@tag-danger-color | @red | - | |
@tag-primary-color | @blue | - | |
@tag-success-color | @green | - | |
@tag-warning-color | @orange | - | |
@tag-default-color | @gray-6 | - | |
@tag-plain-background-color | @white | - |
效果图: