数据展示/标签

Label 标签

Label 用于展示轻量级状态、分类或属性信息,支持颜色、类型、尺寸和前后图标配置。

颜色

Color 支持 Neutral、Blue、Green、Red、Orange、Purple、Magenta、Cyan、Link 等色彩语义,也支持自定义主色。

自定义颜色

常规标签可通过 customColor 配置主色,并支持单独覆盖文本、背景和描边颜色。

类型

Type 分为 Outline、Soft、Subtle、Solid 四类。

尺寸

Size 支持 S、D、M、L 四种尺寸,尺寸越大内边距、字号与图标尺寸越大。

历史记录

用于展示搜索或浏览历史记录,支持默认与 Hover 状态,Hover 时右上角删除按钮可配置显示或隐藏。

认证标识

用于展示认证状态,固定 16×16 尺寸,支持橙色、红色、灰色三种背景。

API 参考

一般标签

参数 说明 类型 可选值 默认值
text标签文本string-LABLE
color标签颜色语义stringneutral | blue | green | red | orange | purple | magenta | cyan | linkneutral
type标签类型stringoutline | soft | subtle | solidsoft
size标签尺寸strings | d | m | ll
customColor自定义主色,会自动推导 Soft 背景和描边透明色stringCSS color''
customBackgroundColor自定义背景色,优先级高于 customColor 推导背景stringCSS color''
customBorderColor自定义描边色,优先级高于 customColor 推导描边stringCSS color''
customTextColor自定义文本和图标颜色stringCSS color''
customTextOnSolidSolid 类型下的自定义文本和图标颜色stringCSS color''
iconBefore是否展示前置图标booleantrue | falsefalse
iconAfter是否展示后置图标booleantrue | falsefalse
beforeIcon前置图标 HTMLstring-''
afterIcon后置图标 HTMLstring-''
className自定义类名string-''
id自定义 idstring-''

历史记录

参数 说明 类型 可选值 默认值
text历史记录文本string-LABLE
type标签类型,历史记录固定使用 historystringhistoryhistory
state历史记录展示状态,仅用于静态状态调用stringdefault | hoverdefault
showDeleteHover 时是否展示右上角删除按钮booleantrue | falsetrue
deleteIcon删除按钮图标 HTMLstring-关闭图标
onDelete点击删除按钮回调function-null
className自定义类名string-''
id自定义 idstring-''

认证标识

参数 说明 类型 可选值 默认值
type标签类型,认证标识固定使用 certificationstringcertification | 认证标识certification
certColor认证标识背景色stringorange | red | grayorange
certIconSrc中间 SVG 资源路径string-../image/Community/认证.svg
certTooltipHover 时展示的 Tooltips 文案string-按颜色自动匹配
className自定义类名string-''
id自定义 idstring-''