助手
扣子 AI 帮助与支持
你好,我是 扣子 文档问答助手 🎉 你在阅读当前文档的过程中,无论对文档概念的解释,还是文档内容方面的疑问,都可以随时向我提问,我会全力为你解答
推荐问题
如何快速了解这个空间的核心内容?
有哪些近期更新的重点文档?
我应该从哪些文档开始阅读?
文档反馈

图标

更新于: 2026-06-24 15:44:40

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

属性设置

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

常用设置

属性

说明

来源

配置图标的来源,支持从本地上传和从图标库选择图标。

  • 本地上传:支持上传.png.jpg 格式的图标,但目前不支持 .svg 格式,上传的图标最大不超过 5M。
  • 图标库选择图标:可从图标库选择.svg格式的图标。

图标颜色

图标库的图标支持颜色配置,本地上传的图标配置颜色后不生效。

位置设置

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

  • 相对定位:堆叠布局下,元素自动向下或向右排列。
  • 绝对定位:页面滚动时,绝对定位的元素会随页面一起滚动。
  • 固定定位:页面滚动时,固定定位的元素会保持固定位置不变。

尺寸设置

图标组件支持宽度设置,支持以下宽度设置方式:

  • 固定:固定的像素值,不会随容器大小变化。
  • 百分比:元素的宽度占容器宽度的百分比。
  • 填充容器:元素的宽度填满容器的可用空间。
  • 适应内容:元素的宽度会随着内容的大小自动调整。

样式设置

属性

说明

填充

配置图标组件背景的显示颜色。

圆角

配置图标组件背景的圆角,支持单独设置四个角的圆角。

内边距

配置图标组件背景的内边距,可以单独设置四个方向的内边距。

外边距

配置图标组件背景的外边距,可以单独设置四个方向的外边距。

边框

配置图标组件背景的边框样式。支持如下设置方式:

  • 预设样式:提供预设的边框样式,可直接使用。
  • 自定义样式:通过边框线的颜色、粗细和样式,自定义边框样式。

阴影

配置图标组件背景的阴影样式,增强组件的立体感。支持如下设置方式:

  • 预设样式:提供预设的阴影样式,可直接使用。
  • 自定义样式:支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色,自定义阴影样式。

模糊

配置图标组件的模糊效果,数值越大,模糊效果越明显。支持设置图层模糊和背景模糊。

  • 图层模糊:当前图层内包含的所有元素都将被模糊处理。
  • 背景模糊:支持模糊处理当前组件底部所覆盖部分。

变换设置

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

属性

说明

缩放

配置图标组件大小的缩放比例。

旋转

配置图标组件围绕中心点旋转的角度。

位移

配置图标组件在水平和垂直方向上的移动距离。

倾斜

配置图标组件在水平和垂直方向上的倾斜角度。

指针设置

配置鼠标在指定组件区域内的指针样式。
你可以选择根据元素类型自动显示,也可以指定某一特定的指针样式。

属性配置项
Image

效果图
Image

状态设置

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

属性

说明

悬浮效果

配置图标组件的悬浮态效果。具体配置说明如下:

  • 样式效果:当鼠标悬浮到图标组件上时,图标组件的样式变化情况。包括背景色、边框等。详细说明,请参考样式设置
  • 变换效果:当鼠标悬浮到图标组件上时,图标组件的动态变化情况。包括缩放、旋转等。详细说明,请参考状态设置
  • 过渡效果:设置图标组件悬浮态的动画效果。
    • 动画效果:支持设置为缓入缓出、缓入、缓出、线性等动画。
    • 持续时间:设置动画的持续时间,单位为毫秒。
    • 延迟时间:设置动画延迟出现的时间,单位为毫秒。
    • 生效范围:设置动画的生效范围。
      • 应用于全部变化:动画效果将应用于样式设置和变换设置所产生的所有变化。
      • 仅应用于变换效果:动画效果仅应用于变换设置所产生的变化。

点击效果

配置图标组件的点击态效果。具体配置说明如下:

  • 样式效果:点击图标组件时,图标组件的样式变化情况。详细说明,请参考样式设置
  • 变换效果:点击图标组件时,图标组件的动态变化情况。详细说明,请参考状态设置
  • 过渡效果:设置图标组件点击态的动画效果。
    • 动画效果:支持设置为缓入缓出、缓入、缓出、线性等动画。
    • 持续时间:设置动画的持续时间,单位为毫秒。
    • 延迟时间:设置动画延迟出现的时间,单位为毫秒。
    • 生效范围:设置动画的生效范围。
      • 应用于全部变化:动画效果将应用于样式设置和变换设置所产生的所有变化。
      • 仅应用于变换效果:动画效果仅应用于变换设置所产生的变化。

出场效果

设置图标组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入。

可见性设置

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

  • 设置为 false:显示组件。
  • 设置为 true:隐藏组件。
  • 设置为变量:通过变量值(true 或 false)动态控制图标组件的可见性。
    例如可以通过开关组件控制图标组件的可见性。开关组件 ID 为 Switch 1,当你将图标组件的可见性设置为{{ Switch1.value}}后,开关打开时,{{ Switch1.value}}值为 true,图标组件将被隐藏。

事件设置

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

事件项

说明

事件类型

支持以下事件类型:

  • 点击时:当用户点击组件时触发。
  • 加载时:当组件完成加载时触发。

组件方法

支持以下方法:

  • 滚动到视图:将组件滚动到可视区域内。
  • 设置隐藏:隐藏组件,使其不可见。