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 尺寸,支持橙色、红色、灰色三种背景。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | 标签文本 | string | - | LABLE |
| color | 标签颜色语义 | string | neutral | blue | green | red | orange | purple | magenta | cyan | link | neutral |
| type | 标签类型 | string | outline | soft | subtle | solid | soft |
| size | 标签尺寸 | string | s | d | m | l | l |
| customColor | 自定义主色,会自动推导 Soft 背景和描边透明色 | string | CSS color | '' |
| customBackgroundColor | 自定义背景色,优先级高于 customColor 推导背景 | string | CSS color | '' |
| customBorderColor | 自定义描边色,优先级高于 customColor 推导描边 | string | CSS color | '' |
| customTextColor | 自定义文本和图标颜色 | string | CSS color | '' |
| customTextOnSolid | Solid 类型下的自定义文本和图标颜色 | string | CSS color | '' |
| iconBefore | 是否展示前置图标 | boolean | true | false | false |
| iconAfter | 是否展示后置图标 | boolean | true | false | false |
| beforeIcon | 前置图标 HTML | string | - | '' |
| afterIcon | 后置图标 HTML | string | - | '' |
| className | 自定义类名 | string | - | '' |
| id | 自定义 id | string | - | '' |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | 历史记录文本 | string | - | LABLE |
| type | 标签类型,历史记录固定使用 history | string | history | history |
| state | 历史记录展示状态,仅用于静态状态调用 | string | default | hover | default |
| showDelete | Hover 时是否展示右上角删除按钮 | boolean | true | false | true |
| deleteIcon | 删除按钮图标 HTML | string | - | 关闭图标 |
| onDelete | 点击删除按钮回调 | function | - | null |
| className | 自定义类名 | string | - | '' |
| id | 自定义 id | string | - | '' |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 标签类型,认证标识固定使用 certification | string | certification | 认证标识 | certification |
| certColor | 认证标识背景色 | string | orange | red | gray | orange |
| certIconSrc | 中间 SVG 资源路径 | string | - | ../image/Community/认证.svg |
| certTooltip | Hover 时展示的 Tooltips 文案 | string | - | 按颜色自动匹配 |
| className | 自定义类名 | string | - | '' |
| id | 自定义 id | string | - | '' |