Tag 标签

用于标记和分类的小型标签。

类型

标签类型

默认主色成功警告危险信息

示例代码

圆角与尺寸

圆角与尺寸

胶囊标签超小小号中号大号超大

示例代码

size 支持 xs / small / medium（默认）/ large / xl 五档；非法值回落 medium 并提示告警。

可关闭

点击 × 触发 oas-close（cancelable，preventDefault 可阻止移除）。

可关闭标签

可关闭点 × 关闭关闭后消失

示例代码

自定义关闭

close-icon 自定义关闭按钮图标（oas-icon 图标集名，缺省 ×）；close-label 自定义关闭按钮的 aria-label（屏幕阅读器朗读，缺省走 locale「关闭」）。

自定义关闭图标与朗读文案

垃圾桶关闭减号关闭自定义朗读文案

示例代码

胶囊与可点击

chip：胶囊圆角 + 紧凑 padding；clickable：整签可点，点击/Enter/Space 派发 oas-click。

chip 胶囊

默认 chip主色 chip成功 chip警告 chip可关闭 chip

示例代码

clickable 可点击

点我派发 oas-click可点 chip普通可点标签禁用不可点

示例代码

chip 态下 disabled 不可点（不派发 oas-click）不可关（关闭按钮 disabled）。

图标标签

默认插槽可放图标——图标 + 文字组合成图标标签。

图标标签

精选已完成关注定时

示例代码

可选中

checkable 开启可选中：点击 / Enter / Space 切换 checked 并派发 oas-change（detail: { checked }）；选中态为实心填充，文字前渲染 √ 勾选图标（checked-icon 可自定义图标名）。checkable 与 closable 互斥（关闭按钮隐藏）。

checkable 可选中

默认成功胶囊禁用不可选

示例代码

checkable 勾选图标

已选（√）星标勾选圆勾胶囊

示例代码

形态

variant 提供三种形态：outlined（描边）/ filled（浅底）/ solid（实心）；缺省保持原有类型渲染（default 白底灰框、有色 type 浅底、primary 实心）。

outlined 描边

默认主色成功危险

示例代码

filled 浅底

默认主色成功警告

示例代码

solid 实心

默认主色成功警告危险

示例代码

自定义颜色

color 接受任意 CSS 色值，覆盖 type 语义色；未指定 variant 时按 filled 渲染。

color 自定义色

紫色天蓝描边玫红实心绿色浅底

示例代码

图标

icon 属性复用 oas-icon 图标集，图标渲染在文字前、尺寸跟随字号。

icon 图标标签

精选已完成定时邮件

示例代码

尾部图标

icon-end 与 icon 对称：图标渲染在文字尾部（关闭按钮之前），复用 oas-icon 图标集、尺寸跟随字号；可与头部 icon 同签并存。

icon-end 尾部图标

前往详情限时活动外链跳转邮件（可关闭）

示例代码

链接

href 设置后内部渲染为原生链接 <a>，target 透传打开方式。

href 链接标签

新窗口打开描边链接

示例代码

超长省略

max-width 限制标签内容宽度，超出部分以省略号截断。

max-width 省略

这是一段超长的标签文本内容，超出最大宽度后将以省略号截断显示短标签

示例代码

预设颜色

color 支持按名引用 11 个预设色（magenta / red / volcano / orange / gold / lime / green / cyan / blue / geekblue / purple，映射 --oas-preset-* token，dark 主题自动调亮）；也支持任意 CSS 色值（见上方自定义颜色）。非法预设名按普通色值处理。

预设色 filled

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

示例代码

预设色 solid

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

示例代码

状态点

dot 在文字前渲染小圆点（颜色跟随 type / color）；processing 圆点带脉冲动画（prefers-reduced-motion 下停用）并隐含 dot。

dot 状态点

默认已发布审核中自定义色点

示例代码

processing 脉冲

处理中等待中轮询中

示例代码

描边加重与强调

hit 用不透明的语义色描边（有 color 时跟随自定义色）；strong 文字加粗（font-weight 600）。

hit 描边加重

默认主色描边自定义色描边outlined 命中

示例代码

strong 加粗

重要标签加粗 chip

示例代码

多行

multiline 允许内容换行显示（高度自适应 + 上下 padding 补偿，移动端长内容场景）；与 max-width 同设时不省略，但 max-width 仍约束宽度——内容在约束内换行而非截断。

multiline 多行

这是一段较长的标签文本，在移动端或窄容器里会自然换行显示，而不是被截断省略第二段多行说明文字，展示 height auto 与上下 padding 补偿后的排版效果

示例代码

头像标签

默认插槽放 oas-avatar（或 <img>）时自动适配：尺寸随 tag 档位、圆形、负 margin 贴左缘。

头像标签

李李雷韩韩梅梅王王小二赵赵敏

示例代码

拖拽排序

一组 closable 签支持原生 HTML5 拖拽重排（dragstart / dragover / drop，数组重排后重渲染；不依赖三方库）。

拖拽排序

示例代码

关闭动画

oas-close 是 cancelable 事件：preventDefault 后组件不自动移除，可自行做淡出过渡再移除。

关闭动画

淡出后移除点 × 触发过渡动画关闭

示例代码

异步关闭

loading 进入关闭加载态：关闭按钮显示 spinner 并禁点（aria-busy 同步）。宿主在 oas-close 中 preventDefault 阻止自动移除，做异步操作后调用 event.detail.done() 退出 loading，再手动移除标签。

异步关闭

点 × 模拟异步确认异步后移除

示例代码

标签组

oas-tag-group 把多个 checkable 签组合为选值组：单选（value 单值）与多选（multiple + 逗号分隔 value），点击签切换选中并派发 oas-change（单选 detail: { value } / 多选 detail: { value: [] }）；disabled 禁用整组。子签自身 checked 由组统一接管（受控）。

tag-group 单选

选项 A选项 B选项 C

示例代码

tag-group 多选

标签 A标签 B标签 C

示例代码

tag-group disabled

禁用 A禁用 B禁用 C

示例代码

移动端触控

触屏设备（pointer: coarse）下触控目标自动抬升，桌面（fine pointer）完全不受影响：

• closable 的关闭 × 命中区扩展至 44px（--oas-touch-target-min），视觉 × 图标大小不变；
• clickable / checkable 整签最小高度抬升至 44px（含 multiline 多行档）；非交互标签保持原尺寸。

可用 DevTools 设备仿真（如 iPhone SE 375×667）体验；桌面浏览器访问无变化。

API

oas-tag

属性

属性	说明	类型	默认值
checkable	可选中：点击 / Enter / Space 切换 checked 并派发 oas-change；与 closable 互斥	boolean	—
checked	选中态（checkable 时生效）	boolean	—
checked-icon	checkable 选中时标签前的勾选图标（内置图标名，默认 check）	string	check
chip	胶囊	boolean	—
clickable	整签可点	boolean	—
closable	可关闭	boolean	—
close-icon	自定义关闭按钮图标（内置图标名），替换默认 ×	string	—
close-label	关闭按钮的 aria-label（a11y 上下文朗读，如「移除标签 xx」），默认走 locale「关闭」	string	—
color	自定义颜色：支持 11 个预设名（magenta / red / volcano / orange / gold / lime / green / cyan / blue / geekblue / purple，映射 --oas-preset-* token）或任意 CSS 色值，覆盖 type 语义色；未指定 variant 时按 filled 渲染	string	—
disabled	禁用	boolean	—
dot	文字前渲染状态小圆点（8px，颜色跟随 type / color）	boolean	—
hit	加重描边：语义色全不透明边框（有 color 时跟随自定义色）	boolean	—
href	链接地址：设置后内部渲染为原生链接 <a>	string	—
icon	图标名（复用 oas-icon 图标集），置于文字前，尺寸跟随字号	string	—
icon-end	图标名（复用 oas-icon 图标集），置于文字尾部（关闭按钮前），尺寸跟随字号；可与 icon 并存	string	—
loading	加载态：关闭流程中转 spinner 并禁点（oas-close detail 含 done() 回调，宿主异步完成后调用退出 loading）	boolean	—
max-width	标签内容最大宽度（如 120px），超出省略显示；与 multiline 同设时不省略，仅约束宽度让内容换行	string	—
multiline	多行：内容允许换行（高度自适应 + 上下 padding 补偿）；与 max-width 同设时换行而非省略	boolean	—
processing	状态点脉冲动画（隐含 dot）；prefers-reduced-motion 下停用	boolean	—
round	圆角	boolean	—
size	尺寸：xs / small / medium（默认）/ large / xl；非法值回落 medium 并告警	TagSize	medium
strong	文字加粗（font-weight 600）	boolean	—
target	链接打开方式（_blank / _self 等），配合 href	string	—
type	类型	TagType	default
variant	形态（与 type 正交）：outlined（描边）/ filled（浅底）/ solid（实心）；缺省保持类型默认渲染	string	—

事件

事件	说明
oas-change	checkable 时选中态切换，detail: { checked }
oas-click	整签点击（clickable 时），detail 含 originalEvent
oas-close	关闭，cancelable，preventDefault 阻止移除

插槽

名称	说明
默认	标签内容

CSS 变量

CSS 变量	说明	默认值
--oas-tag-avatar-size	头像适配尺寸：avatar 模式随 size 档位派生，未匹配档位时沿用 control-height-sm − 4px	calc(var(--oas-control-height-sm) - 4px)
--oas-tag-color	文字色：color 属性经该变量参与派生；--tag-color 是组件内部当前色，未显式设置时回落 text-primary	var(--tag-color, var(--oas-color-text-primary))
--oas-tag-color-deep	文字安全档（deep 档位）：filled/outlined 的文字色与 solid/checked 的实底色都经该变量派生，未设置时回落 text-primary	var(--tag-color-deep, var(--oas-color-text-primary))

oas-tag-group

属性

属性	说明	类型	默认值
aria-label	组容器可访问名称（默认走 i18n「标签组」）	—	—
disabled	禁用整个组（子签不可切）	boolean	—
multiple	多选模式（value 逗号分隔多个选中值）	boolean	—
value	选中值：单选为单值，多选用逗号分隔	string	—

事件

事件	说明
oas-change	选中变化。单选 detail: { value }；多选 detail: { value: [] }

插槽

名称	说明
默认	多个 <oas-tag checkable value="x"> 子签

标签组 API 表由生成器输出。