图标

图标组件用于展示一个图标，增强界面的视觉效果和交互性。

属性设置

图标组件支持丰富的属性设置，例如常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

常用设置

属性	说明
来源	配置图标的来源，支持从本地上传和从图标库选择图标。 本地上传：支持上传 .png 和 .jpg 格式的图标，但目前不支持 .svg 格式，上传的图标最大不超过 5M。 图标库选择图标：可从图标库选择 .svg 格式的图标。
图标颜色	图标库的图标支持颜色配置，本地上传的图标配置颜色后不生效。

位置设置

图标组件提供三种位置类型选项，以灵活配置组件在界面中的位置。

• 相对定位：堆叠布局下，元素自动向下或向右排列。

• 绝对定位：页面滚动时，绝对定位的元素会随页面一起滚动。

• 固定定位：页面滚动时，固定定位的元素会保持固定位置不变。

尺寸设置

图标组件支持宽度设置，支持以下宽度设置方式：

• 固定：固定的像素值，不会随容器大小变化。

• 百分比：元素的宽度占容器宽度的百分比。

• 填充容器：元素的宽度填满容器的可用空间。

• 适应内容：元素的宽度会随着内容的大小自动调整。

样式设置

属性	说明
填充	配置图标组件背景的显示颜色。
圆角	配置图标组件背景的圆角，支持单独设置四个角的圆角。
内边距	配置图标组件背景的内边距，可以单独设置四个方向的内边距。
外边距	配置图标组件背景的外边距，可以单独设置四个方向的外边距。
边框	配置图标组件背景的边框样式。支持如下设置方式： 预设样式：提供预设的边框样式，可直接使用。 自定义样式：通过边框线的颜色、粗细和样式，自定义边框样式。
阴影	配置图标组件背景的阴影样式，增强组件的立体感。支持如下设置方式： 预设样式：提供预设的阴影样式，可直接使用。 自定义样式：支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色，自定义阴影样式。
模糊	配置图标组件的模糊效果，数值越大，模糊效果越明显。支持设置图层模糊和背景模糊。 图层模糊：当前图层内包含的所有元素都将被模糊处理。 背景模糊：支持模糊处理当前组件底部所覆盖部分。

变换设置

丰富界面视觉效果的参数。

属性	说明
缩放	配置图标组件大小的缩放比例。
旋转	配置图标组件围绕中心点旋转的角度。
位移	配置图标组件在水平和垂直方向上的移动距离。
倾斜	配置图标组件在水平和垂直方向上的倾斜角度。

指针设置

配置鼠标在指定组件区域内的指针样式。

你可以选择根据元素类型自动显示，也可以指定某一特定的指针样式。

属性配置项

效果图

属性配置项

效果图

状态设置

控制图标组件悬浮态、点击态和出现态的视觉效果参数。

属性	说明
悬浮效果	配置图标组件的悬浮态效果。具体配置说明如下： 样式效果：当鼠标悬浮到图标组件上时，图标组件的样式变化情况。包括背景色、边框等。详细说明，请参考 样式设置 。 变换效果：当鼠标悬浮到图标组件上时，图标组件的动态变化情况。包括缩放、旋转等。详细说明，请参考 状态设置 。 过渡效果：设置图标组件悬浮态的动画效果。 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 持续时间：设置动画的持续时间，单位为毫秒。 延迟时间：设置动画延迟出现的时间，单位为毫秒。 生效范围：设置动画的生效范围。 应用于全部变化：动画效果将应用于样式设置和变换设置所产生的所有变化。 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。
点击效果	配置图标组件的点击态效果。具体配置说明如下： 样式效果：点击图标组件时，图标组件的样式变化情况。详细说明，请参考 样式设置 。 变换效果：点击图标组件时，图标组件的动态变化情况。详细说明，请参考 状态设置 。 过渡效果：设置图标组件点击态的动画效果。 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 持续时间：设置动画的持续时间，单位为毫秒。 延迟时间：设置动画延迟出现的时间，单位为毫秒。 生效范围：设置动画的生效范围。 应用于全部变化：动画效果将应用于样式设置和变换设置所产生的所有变化。 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。
出场效果	设置图标组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入。

可见性设置

控制图标组件隐藏或显示的参数，支持在特定条件下隐藏图标组件。

• 设置为 false：显示组件。

• 设置为 true：隐藏组件。

• 设置为变量：通过变量值（true 或 false）动态控制图标组件的可见性。

• 例如可以通过开关组件控制图标组件的可见性。开关组件 ID 为 Switch 1，当你将图标组件的可见性设置为{{ Switch1.value}}后，开关打开时，{{ Switch1.value}}值为 true，图标组件将被隐藏。

事件设置

通过配置图标组件的事件，可以为图标组件添加丰富的交互功能，例如点击、加载等，以增强用户体验和界面的互动性。

事件项	说明
事件类型	支持以下事件类型： 点击时：当用户点击组件时触发。 加载时：当组件完成加载时触发。
组件方法	支持以下方法： 滚动到视图：将组件滚动到可视区域内。 设置隐藏：隐藏组件，使其不可见。

当前版本实操

本页使用独立的 图标 示例页面，页面内不混放其他组件。

1. 进入低代码应用的 用户界面，确认搭建类型为 桌面网页。
2. 单击画布底部的 新建页面，创建一个空白页面。
3. 在左侧 组件 面板中找到 图标，单击或拖入当前页面。
4. 切换到 结构 面板，确认该页面只包含当前 图标 组件。
5. 选中组件，在右侧 属性 面板中选择图标并调整尺寸、颜色和对齐方式。
6. 检查画布中的实际显示效果，再使用页面顶部的预览入口验证交互。