图标

1. 组件概述

图标是一个内容展示组件，用于在页面上显示矢量图标。它可以展示各种常用的图形符号，如箭头、勾选、星星、社交媒体标志等。图标通常用于装饰按钮、标识状态、增强视觉效果，或作为可点击的交互元素。在搭建 AI Agent 应用时，图标可以用来标识不同的功能入口、展示操作状态或美化界面。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：功能入口标识。在学习辅导类应用中，使用不同的图标来标识”提问”、“历史记录”、“设置”等功能入口，让用户一眼就能识别各个功能区域。可以为图标配置”点击”事件，实现点击后打开对应的弹窗或切换显示内容。
• 场景二：状态指示。在答题类应用中，使用勾选图标表示”正确”、叉号图标表示”错误”，通过绑定变量动态切换显示的图标，让用户直观地看到答题结果。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

基本折叠组

配置项	说明
图标	选择要显示的图标。点击后会弹出图标选择器，可以从图标库中挑选合适的图标。平台内置了丰富的图标，涵盖箭头、符号、社交媒体、文件类型等多种类别。选择后图标会立即显示在页面上。

状态折叠组

配置项	说明
可见	控制图标是否显示。默认可见。可以绑定变量，根据条件动态控制图标的显示与隐藏。
隐藏	控制图标是否隐藏。与”可见”相反。
禁用	控制图标是否禁用。禁用后图标会变灰，点击事件不会触发。

高级

事件折叠组

配置项	说明
添加事件	支持”点击”、“鼠标移入”、“鼠标移出”三种触发事件。可以为图标添加交互行为，例如点击图标后打开弹窗、调用工作流，或鼠标悬停时显示提示信息。

设计

基本样式折叠组

配置项	说明
尺寸	设置图标的大小。可以选择预设的尺寸，让图标在页面上显示得更大或更小。
颜色	设置图标的颜色。可以选择任意颜色，让图标与页面整体风格保持一致。例如使用蓝色表示可点击、红色表示警告、绿色表示成功等。
边距	设置图标周围的间距。包括外边距（与其他组件的距离）和内边距，用于调整图标在页面中的位置和留白。