标签 Tag
一般用来展示一些东西的特性（不是指 bug）。
主题
和按钮一样，标签有几种不同颜色的主题：'primary'（默认）、'success'、'warning'、'danger'、'info'、'sakura'、'notice'。
Primary
Notice
Success
Warning
Danger
Info
Sakura
隐藏源代码
标签变体
标签也有几种不同的样式变体：'primary'（默认）、'plain'、'outline'。
Primary
Notice
Success
Warning
Danger
Info
Sakura
Primary
Notice
Success
Warning
Danger
Info
Sakura
Primary
Notice
Success
Warning
Danger
Info
Sakura
隐藏源代码
标签尺寸
标签是有大小变化的。
Small
Medium
Large
隐藏源代码
圆角边框
标签是长圆角的。
精力和技术力不太充足，自定义圆角还有需要优化的地方，但整体不影响使用。
Default
Round
[16, 8, 12, 4]
隐藏源代码
关闭按钮
标签的关闭按钮也是通的。
Primary
Success
Warning
Danger
Info
Sakura
隐藏源代码
禁用状态
禁用状态的标签关闭按钮是不通的。
Primary
Notice
Success
Warning
Danger
Info
Sakura
隐藏源代码
自定义颜色
自定义主色，内部基于此生成完整色板，该色板优先级高于 theme 提供的预设色版。详见 支持的颜色解析。
#409EFF
#FAE13C
#E956AE
#909399
隐藏源代码
API
TagProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | 是 | | 圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。 | 0.0.2 |
| shape | 'rect' | 'round' | 是 | 'rect' | 标签形状。 | 0.0.3 |
| size | 'medium' | 'large' | 'small' | 是 | 'medium' | 标签尺寸。 | 0.0.2 |
| disabled | boolean | 是 | false | 是否禁用。 | 0.0.2 |
| variant | 'primary' | 'plain' | 'outline' | 是 | 'primary' | 标签样式变体。 | 0.0.2 |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice' | 是 | 'primary' | 标签主题。 | 0.0.2 |
| color | string | 是 | | 自定义主色，详见 支持的颜色解析。 | 0.0.2 |
| closable | boolean | 是 | | 0.0.2 | |
| pollSizeChange | boolean | 是 | false | 开启轮询组件尺寸变化，可能会影响性能。 | 0.1.0 |
TagEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| close | e: MouseEvent | 关闭事件。 | 0.0.2 |
TagSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | 标签内容。 | 0.0.2 |
NumberOrPercentage
ts
export type NumberOrPercentage = number | `${number}%`