图标
语义化的矢量图形,用于增强界面识别度与用户体验。
何时使用
- 帮助用户更快理解功能含义
- 增强视觉效果和界面美感
- 在按钮、表单、导航等元素中强化交互提示
一、属性说明
1. 功能
- 图标可从图标库中选取,支持丰富的语义化图形
示意图:
2. 外观设置
(1)颜色
- 可设置图标颜色,支持四种方式:
- 固定值
- 数据绑定
- 组件绑定
- 参数视图
颜色选择界面:
效果预览:
(2)尺寸
- 使用像素值设置图标大小
尺寸调整效果示意:
3. 数据设置
(1)徽标类型(Badge)
图标可配置徽标信息以提示状态或通知:
- 无(默认)
- 小红点
- 数字徽标
效果图如下:
二、样式
暂无特殊样式配置,详见:通用样式
三、常见使用场景
1. 导航菜单图标
用于侧边栏或底部导航中的功能标识,提升导航清晰度。
示例:
2. 图标按钮
在按钮中嵌入图标,增强按钮功能表达与点击引导。
示例:
3. 表单控件图标
在表单输入框中嵌入图标,用于提示功能(如搜索、清空、校验等)。
示例:
4. 自定义控件装饰
与卡片、列表项等控件组合使用,提升组件语义和视觉效果。
示例:
5. 状态指示图标
用图标表达系统状态,如成功、失败、警告、提示等。
示例: