更新时间:2026-03-16 GMT+08:00
分享

设置UI引擎前端页面图标组件属性

图标是Web页面设计中不可或缺的元素,广泛应用于操作按钮、状态指示、导航菜单等场景。通过直观的视觉符号,图标能够有效提升用户交互体验和信息传递效率。

前提条件

已在当前页面添加“图标”组件,具体操作请参见为UI引擎前端页面添加物料组件

配置入口

  1. 在页面设计器的中心画布区,单击选中“图标”组件。
  2. 在右侧设置面板中,单击,即可展开“属性”设置面板。

基础信息

属性名称

说明

是否支持变量绑定

图标类型

用于选择组件展示的图标样式,默认值为“Del”

图标选择面板支持以下操作:

  • 搜索图标:在搜索框输入图标名称(不区分大小写),快速定位目标图标。
  • 选中图标:单击面板中的图标,即可同步更新至属性配置项与画布预览区。
  • 关闭面板:单击右上角“关闭”退出选择界面。

title

对应HTML原生“title”属性,鼠标悬浮在图标上时会显示提示文本。提示样式随浏览器环境自动适配。

其他

如下属性适用于UI引擎所有组件,用于精细化控制。

属性名称

说明

是否支持变量绑定

元素id值

对应HTML标签的“id”属性,同一页面内必须唯一。

样式类

对应HTML标签的“class”属性,为空格分隔的类名列表,用于自定义组件样式。默认为“component-base-style”

ref引用类

对应Vue的“ref”属性,用于注册模板引用以访问组件实例方法。

如果为“数据源表单”组件,会自动填充默认值。

相关文档