标签

1. 组件概述

标签是一个内容展示组件，用于以醒目的方式展示标记信息。它可以用来标识状态、分类、属性等简短信息，支持多种显示模式和颜色配置。在 AI Agent 应用中，标签常用于展示 AI 分析结果的分类、知识点标记、难度等级等信息。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：展示知识点分类。在学习辅导类应用中，AI 分析用户提问后，用标签展示该问题涉及的知识点分类，如”代数”、“几何”、“函数”等。可以为不同学科设置不同的主题颜色，便于用户快速识别。
• 场景二：标记内容难度等级。在答题练习应用中，用标签展示题目的难度等级，如”简单”、“中等”、“困难”。可以使用状态模式配合图标，让难度标识更加直观。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
标签内容	标签上显示的文字。可以设置为静态文字或绑定变量。例如”已完成”、“进行中”、“待审核”等。
模式	标签的显示样式，有三种可选：普通（默认，实心填充样式，适合强调重要标记）、圆角（线性边框样式，视觉上更轻量，适合辅助性标记）、状态（带图标的样式，适合展示带状态含义的标记，如成功、警告等）。
可关闭	开启后，标签右侧会显示关闭按钮，用户点击可触发关闭事件。适用于可移除的标签场景，如用户选择的筛选条件、已添加的标签等。

高级

状态折叠组

配置项	说明
可见	控制标签是否显示。可以绑定变量实现动态控制，例如只在特定条件下显示某个状态标签。
隐藏	控制标签是否隐藏，与”可见”相反。
禁用	控制标签是否禁用。禁用后标签会变灰，点击等交互事件不会触发。

事件折叠组

配置项	说明
添加事件	支持四种触发事件：点击（用户点击标签时触发）、鼠标移入（鼠标悬停到标签上时触发）、鼠标移出（鼠标离开标签时触发）、点击关闭（用户点击关闭按钮时触发，需开启”可关闭”配置）。可以配合这些事件实现标签的交互功能，如点击标签筛选内容、关闭标签移除筛选条件等。

设计

颜色折叠组

配置项	说明
主题	标签的主题颜色。在普通模式下作为背景色，在圆角模式下作为边框色。可以从预设颜色中选择，也可以自定义颜色值。
背景色	自定义标签的背景颜色，会覆盖主题颜色的背景效果。适用于需要精确控制背景色的场景。
边框	自定义标签的边框颜色。在圆角模式下特别有用，可以设置与主题不同的边框色。
文字	自定义标签内文字的颜色。默认会根据背景色自动适配，如需特殊效果可手动设置。