跳到主要内容

图标

语义化的矢量图形,用于增强界面识别度与用户体验。


何时使用

  • 帮助用户更快理解功能含义
  • 增强视觉效果和界面美感
  • 在按钮、表单、导航等元素中强化交互提示

一、属性说明

1. 功能

  • 图标可从图标库中选取,支持丰富的语义化图形

示意图:

图标选择器


2. 外观设置

(1)颜色

  • 可设置图标颜色,支持四种方式:
    • 固定值
    • 数据绑定
    • 组件绑定
    • 参数视图

颜色选择界面:

颜色设置界面

效果预览:

图标颜色调整效果


(2)尺寸

  • 使用像素值设置图标大小

尺寸调整效果示意:

图标尺寸示意


3. 数据设置

(1)徽标类型(Badge)

图标可配置徽标信息以提示状态或通知:

  • 无(默认)
  • 小红点
  • 数字徽标

效果图如下:

徽标效果图


二、样式

暂无特殊样式配置,详见:通用样式


三、常见使用场景

1. 导航菜单图标

用于侧边栏或底部导航中的功能标识,提升导航清晰度。

示例:

导航菜单中的图标


2. 图标按钮

在按钮中嵌入图标,增强按钮功能表达与点击引导。

示例:

按钮上的图标


3. 表单控件图标

在表单输入框中嵌入图标,用于提示功能(如搜索、清空、校验等)。

示例:

表单项图标示意


4. 自定义控件装饰

与卡片、列表项等控件组合使用,提升组件语义和视觉效果。

示例:

图文结合卡片


5. 状态指示图标

用图标表达系统状态,如成功、失败、警告、提示等。

示例:

状态图标示意