Tag 设计文档
标签：light/solid/ghost 三态，16 色板 + white，可关闭(closable)、可交互(onClick/keydown)、头像(avatarSrc)、AI 多彩(colorful/gradient)、前后缀图标。受控 visible 不回写，仅通过 onClose 通知。配套 TagGroup（折叠 +N）与 SplitTagGroup（连接式组合），对齐 Semi 同页三组件。
← API 文档使用建议
标签：light/solid/ghost 三态，16 色板 + white，可关闭(closable)、可交互(onClick/keydown)、头像(avatarSrc)、AI 多彩(colorful/gradient)、前后缀图标。受控 visible 不回写，仅通过 onClose 通知。配套 TagGroup（折叠 +N）与 SplitTagGroup（连接式组合），对齐 Semi 同页三组件。
Accessibility
- clickable（有 onClick 或 closable）时根 div role=button + tabIndex；Enter 激活 onClick、Delete/Backspace 关闭、Esc 失焦。
设计变量
变量 | 默认值 | 用法 |
|---|---|---|
| --cd-tag-avatar-bg | var(--cd-color-bg-4) | 头像标签背景色（Semi $color-tag_avatar-bg-default） |
| --cd-tag-avatar-border | var(--cd-color-border) | 头像标签描边色（Semi $color-tag_avatar-border-default） |
| --cd-tag-avatar-square-img-bg | var(--cd-color-default) | 方形头像图片背景色（Semi $color-tag_avatar_square_img-bg-default = var(--semi-color-default)） |
| --cd-tag-avatar-text | var(--cd-color-text-0) | 头像标签文字色（Semi $color-tag_avatar-text-default） |
| --cd-tag-close-icon-active | var(--cd-color-text-0) | 关闭按钮按下颜色（Semi $color-tag_close-icon-active） |
| --cd-tag-close-icon-default | var(--cd-color-text-2) | 可删除标签删除按钮颜色（Semi $color-tag_close-icon-default） |
| --cd-tag-close-icon-hover | var(--cd-color-text-1) | 关闭按钮悬浮颜色（Semi $color-tag_close-icon-hover） |
| --cd-tag-colorful-ghost-bg | var(--cd-color-white) | AI Tag 白色底背景（Semi $color-tag_colorful_ghost-bg） |
| --cd-tag-colorful-ghost-border | var(--cd-color-ai-general) | AI Tag 白色底描边（Semi $color-tag_colorful_ghost-border） |
| --cd-tag-colorful-ghost-text | var(--cd-color-ai-purple) | AI Tag 白色底字色（Semi $color-tag_colorful_ghost-text） |
显示第 1 条-第 10 条，共 22 条
- 1
- 2
- 3