设置组件属性和事件

创建页面并添加组件后，你可以进一步设置这些组件的属性和事件，以实现所需的功能和交互效果。你可以调整组件的外观，例如修改颜色、字体和大小，同时设置交互事件，例如 onclick、onload 等，以响应用户的操作，不仅增强了页面的可用性，还提升了用户体验，使低代码应用更加生动。

属性效果

选中画布中的组件后，可在右侧属性页签调整外观、布局、状态和可见性。常见效果如下：

类型	典型配置	作用
位置	相对、绝对、固定定位	控制组件在父容器或页面中的位置
尺寸	固定值、百分比、填充容器、适应内容	控制组件宽高与响应式表现
布局	纵向、横向、换行、间距和对齐	排列容器或列表中的子组件
样式	填充、背景图、圆角、边框、阴影、模糊	调整视觉效果
变换	缩放、旋转、位移、倾斜	添加几何变化
状态	悬浮、点击、选中、加载、出现	配置交互前后的样式变化
可见性	常用条件或表达式	根据变量和组件值控制显示隐藏

组件交互通过右侧事件页签配置。事件由“触发条件 + 执行动作”组成，例如单击按钮后调用工作流、设置变量或跳转页面。

属性配置

不同的组件有不同的属性配置参数，但通常包含常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

常用设置

各个组件的属性设置中，常用设置相关的属性各不相同。以文本组件为例，常用设置相关的属性说明如下。

属性	说明
内容	配置文本组件显示内容，可填写固定文字，也可绑定工作流、变量或其他组件的数据。动态内容配置请参见设置组件内容参数。
字号	配置文本组件显示字体大小，数值越大字体越大。
字重	配置文本组件显示字重大小，依次增大。
字间距	配置文本组件文字间的间距，数值越大间距越大。
水平对齐	配置文本水平对齐方式，依次为：左对齐、居中、右对齐、右两边对齐文本，使得每一行的宽度相同。
垂直对齐	配置文本垂直对齐方式。
行高	配置文本组件文字显示行高，数值越大行高越高。
颜色	配置文本组件文字显示颜色。
最大行数	配置文本组件最大显示行数，超过最大行数显示为 ... 。

位置设置

确定组件在页面或容器中的具体位置的参数。

属性	说明
相对定位	元素根据父级容器的布局方式自动排列。 在堆叠布局下，元素自动向下或向右排列。
绝对定位	元素相对于父级容器进行定位，可设置元素距离父元素 left 、 top 、 right 、 bottom 的像素值，用于修改水平和垂直方向上的位置，也可以设置元素的图层顺序。 页面滚动时，绝对定位的元素会随页面内容一起滚动。
固定定位	元素相对于浏览器窗口进行定位，可设置元素距离父元素 left 、 top 、 right 、 bottom 的像素值，用于修改水平和垂直方向上的位置，也可以设置元素的图层顺序，一般用于固定元素在浏览器中显示的位置。 页面滚动时可保持元素的位置不变。

布局设置

页面或布局类组件（容器、列表）支持布局配置。以容器组件为例，布局设置相关的属性说明如下。

属性	说明
排列方向	配置组件内各元素的排列方向，支持将容器组件中各个元素进行纵向、横向或换行排列。
元素间距	配置组件中各元素的间距，支持自动和固定间距。
间距	当配置固定间距时，设置间距值。
元素分布	配置组件内元素的分布方式。

尺寸设置

控制组件大小的参数。以文本组件为例，尺寸设置相关的属性说明如下。

属性	说明
宽度	配置组件的宽度值，数值越大宽度越宽。
高度	配置组件的高度值，数值越大高度越高。
尺寸限制	配置组件的尺寸限制，支持配置最大高度、最小高度、最大宽度、最小宽度。

样式设置

控制组件视觉表现的参数，例如颜色、字体和边框等。

属性	说明
填充	配置组件背景显示颜色。
圆角	配置组件背景的圆角，支持单独设置四个角的圆角。
内边距	配置组件背景的内边距，可以单独设置四个方向的内边距。
边框	配置组件背景的边框样式。支持如下设置方式： 预设样式：提供预设的边框样式，可直接使用。 自定义样式：通过边框线的颜色、粗细和样式，自定义边框样式。
阴影	配置组件背景的阴影样式，增强组件的立体感。支持如下设置方式： 预设样式：提供预设的阴影样式，可直接使用。 自定义样式：支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色，自定义阴影样式。
溢出	配置容器内组件溢出容器的相关设置。 滚动：滚动查看超出的内容。 可见：显示全部内容。 隐藏：隐藏超出容器的内容。

例如，为容器设置填充颜色时，先在 填充 字段打开颜色选择器，再选择预设色或输入自定义颜色值。

设置完成后，应回到画布确认颜色是否应用到正确的容器，而不是仅检查颜色字段。

变换设置

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

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

指针设置

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

你可以选择根据元素类型自动显示，由系统自动判断并显示相应的指针样式，也可以在使用自定义样式区域，选择固定的指针样式。

说明

仅网页端中的页面、容器、列表、文本、徽章、图标、Markdown、图片组件支持配置指针属性。

状态设置

控制组件加载态、悬浮态、点击态、选中态、出现态的视觉效果参数。不同组件支持的状态设置不同，此处以列表组件为例。

属性	说明
加载态	配置列表组件的加载状态。具体配置说明如下： 说明 列表组件中，只有插槽部分支持设置加载状态。 列表组件中，只有插槽部分支持设置加载状态。 设置为 true：组件展示加载状态，隐藏内容。 设置为 false：关闭加载状态。 设置为变量：通过变量值（true 或 false）动态控制列表组件的加载状态。 例如可以通过开关组件控制列表组件的加载状态。开关组件 ID 为 Switch 1 ，当你将列表组件中插槽部分的 加载态 设置为 {{ Switch1.value}} 后，开关打开时， {{ Switch1.value}} 值为 true，列表组件展示加载态。
悬浮效果	配置组件的悬浮态效果。具体配置说明如下： 基础设置：当鼠标悬浮到列表组件上时，列表内容样式的变化情况。包括字号、字间距等。详细说明，请参考 常用设置 。 样式效果：当鼠标悬浮到列表组件上时，列表组件的样式变化情况。包括背景色、边框等。详细说明，请参考 样式设置 。 变换效果：当鼠标悬浮到列表组件上时，列表组件的动态变化情况。包括缩放、旋转等。详细说明，请参考 变换设置 。 过渡效果：设置列表组件悬浮态的动画效果。 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 持续时间：设置动画的持续时间，单位为毫秒。 延迟时间：设置动画延迟出现的时间，单位为毫秒。 生效范围：设置动画的生效范围。 应用于全部变化：动画效果将应用于基础设置、样式设置和变换设置所产生的所有变化。 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。
选中效果	配置列表组件的选中态效果。具体配置说明如下： 样式效果：选中列表组件中的某个列表项时，列表项的样式变化情况。详细说明，请参考 样式设置 。 变换效果：选中列表组件中的某个列表项时，列表项的动态变化情况。详细说明，请参考 变换设置 。 过渡效果：设置列表组件中列表项选中态的动画效果。 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 持续时间：设置动画的持续时间，单位为毫秒。 延迟时间：设置动画延迟出现的时间，单位为毫秒。 生效范围：设置动画的生效范围。 应用于全部变化：动画效果将应用于样式设置和变换设置所产生的所有变化。 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。
点击效果	配置组件的点击态效果。具体配置说明如下： 基础设置：点击列表组件时，内容样式变化情况。详细说明，请参考 常用设置 。 样式效果：点击列表组件时，组件样式变化情况。详细说明，请参考 样式设置 。 变换效果：单击列表组件时，组件动态变化情况。详细说明，请参考 变换设置 。 过渡效果：设置列表组件点击态的动画效果。 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 持续时间：设置动画的持续时间，单位为毫秒。 延迟时间：设置动画延迟出现的时间，单位为毫秒。 生效范围：设置动画的生效范围。 应用于全部变化：动画效果将应用于基础设置、样式设置和变换设置所产生的所有变化。 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。
出场效果	设置组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入。

以按钮的悬浮效果为例，可分别设置填充、边框、圆角、阴影、变换与过渡动画。

预览页面后，将鼠标移动到按钮上，检查悬浮样式和过渡是否符合预期。

可见性设置

控制组件隐藏或显示的参数，支持在特定条件下隐藏组件。支持通过设置条件或表达式进行配置。

• 表达式方式

• 设置为 false：显示组件。

• 设置为 true：隐藏组件。

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

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

• 常用条件方式

• 支持通过可视化界面设置条件，以控制组件的可见性。

使用条件方式时，依次选择参与判断的数据、运算符和值，再指定满足条件时显示或隐藏组件。

事件配置

用户界面编辑器支持为组件配置事件，通过配置交互事件，用户界面可以实现多样化的交互效果。配置事件时，你需要选择事件类型并指定执行动作。

说明

支持为单个组件添加多个事件配置，多个事件将并行执行。

事件类型

事件类型定义了在何种用户操作或系统状态下会触发特定的响应，用户界面编辑器支持以下事件类型：

• 加载时：当组件完全加载到页面时触发。

• 点击时：当用户点击组件时触发。

• 双击时：当用户双击组件时触发。

• 鼠标移动时：当鼠标在组件上移动时触发。

• 鼠标悬停时：当鼠标悬停在组件上时触发。

• 鼠标移出时：当鼠标从组件上移出时触发。

• 鼠标进入时：当鼠标进入组件时触发。

• 鼠标离开时：当鼠标离开组件时触发。

• 鼠标按下时：当用户在组件上按下鼠标按键时触发。

• 鼠标释放时：当用户在组件上释放鼠标按键时触发。

• 点击单元格时：当用户点击列表单元格时触发。

• 提交时：当表单提交时触发。

• 提交失败时：当表单提交失败时触发。

• 数据改变时：当输入字段的内容改变时触发。

• 鼠标失焦时：当元素失去焦点时触发。

• 鼠标聚焦时：当元素获得焦点时触发。

执行工作

当某个预定义的事件被触发时，会执行一个预设的动作，这个动作是你希望在事件发生时执行的具体任务，用户界面编辑器支持以下执行动作：

• 调用工作流：为组件绑定工作流，当执行预定动作时，系统会自动调用绑定的工作流，执行相应的业务逻辑。

• 说明

  支持绑定低代码应用内的工作流或资源库中的工作流，资源库中的工作流必须为已发布状态，而低代码应用内的工作流无此限制。

• 页面跳转：组件能够控制页面间的导航，实现从一个页面跳转到另一个页面。

• 展示提示信息：用于在用户执行特定操作时显示信息提示，例如警告、成功、失败、说明。

• 控制组件：当执行动作为控制组件时，通常会调用一个或多个组件方法来完成所需的功能。组件方法是组件提供的具体功能实现，它们是内置的。

• 界面变量赋值：为界面变量设置静态值或动态值。具体操作，请参考为变量赋值。

组件方法

用户界面编辑器的组件支持以下方法，不同组件支持的方法不同，以实际界面为准。

• 失焦：使组件失去焦点，通常用于文本输入类组件。

• 聚焦：将焦点设置到指定的组件，使其成为活动状态。

• 清除：清除组件的内容，例如文本输入框中的文字。

• 清除验证：移除组件上的所有验证错误信息。

• 验证：检查组件的当前值是否符合预设的验证规则。

• 重置：将组件恢复到初始状态。

• 滚动到视图：将组件滚动到可视区域内。

• 仅网页端组件支持，小程序端组件不支持。

• 设置数据：为组件设置或更新数据。

• 设置禁用：使组件变为禁用状态，用户无法与之交互。

• 设置隐藏：隐藏组件，使其不可见。

• 复制到剪切板：复制文本内容到剪切板。

• 将容器内容保存为图片：将容器组件中的内容保存为图片。

• 下载到本地：支持下载图片、音频到本地。

• 在网页端应用中，下载后的文件名格式为 image+时间戳、audio+时间戳。

操作步骤

参考以下操作，配置交互事件：

在用户界面页签下，单击画布中要设置事件的组件。

在右侧属性面板，单击事件页签。

单击 + 新建。

在弹窗中，配置事件类型和执行动作。

事件类型：选择在何种用户操作和系统状态下触发执行动作。

执行动作：当满足触发条件后，指定要执行的动作。

执行动作	说明
调用工作流	执行动作选择 调用工作流 ，操作步骤如下： 选择要调用的工作流。 将鼠标悬浮至 content 参数的文本框上，然后单击右侧的图标。 在展开的配置面板中，找到组件目录，单击目标组件的 value ，将组件中内容输入到 content 参数中。 配置工作流调用失败时的提示文案。
页面跳转	执行动作选择 页面跳转 ，操作步骤如下： 选择页面类型： 当前项目页面：选择当前项目中的页面名称，当满足触发条件时，会打开当前项目中的页面。支持配置页面入参。 URL：输入要打开的页面的 URL。
展示提示信息	执行动作选择 展示提示信息 ，操作步骤如下： 选择提示框类型，支持成功、警告、失败、说明。 输入提示内容。 设置提示内容的展示时间，支持自动消失和常驻。选择自动消失时，配置多长时间后取消提示框，单位 ms。
控制组件	执行动作选择 控制组件 ，操作步骤如下： 选择要控制的组件。 选择控制组件的方法，不同组件内置的方法不同。
界面变量赋值	执行动作选择 界面变量赋值 ，操作步骤如下： 选择你已创建的界面变量。 设置变量值，支持设置静态值或动态值。具体操作，请参考 为变量赋值 。

执行动作

说明

调用工作流

执行动作选择调用工作流，操作步骤如下：

选择要调用的工作流。

将鼠标悬浮至 content 参数的文本框上，然后单击右侧的图标。

在展开的配置面板中，找到组件目录，单击目标组件的 value，将组件中内容输入到 content 参数中。

配置工作流调用失败时的提示文案。

页面跳转

执行动作选择页面跳转，操作步骤如下：

选择页面类型：

• 当前项目页面：选择当前项目中的页面名称，当满足触发条件时，会打开当前项目中的页面。支持配置页面入参。

• URL：输入要打开的页面的 URL。

展示提示信息

执行动作选择展示提示信息，操作步骤如下：

选择提示框类型，支持成功、警告、失败、说明。

输入提示内容。

设置提示内容的展示时间，支持自动消失和常驻。选择自动消失时，配置多长时间后取消提示框，单位 ms。

控制组件

执行动作选择控制组件，操作步骤如下：

选择要控制的组件。

选择控制组件的方法，不同组件内置的方法不同。

界面变量赋值

执行动作选择界面变量赋值，操作步骤如下：

选择你已创建的界面变量。

设置变量值，支持设置静态值或动态值。具体操作，请参考为变量赋值。

单击确认，完成事件配置。

配置示例

复制文本内容

在文本生成类应用中，使用者生成内容后，通常希望一键单击按钮即可快速将内容复制到剪切板，无需手动选择文本并执行复制操作。基于此需求，AI 编程提供了组件方法复制到剪切板，支持通过为组件添加事件的方式，实现一键将文本内容复制到剪切板。

例如在网页类型的应用搭建过程中，你可以通过添加一个名为复制文本的按钮组件，并为该组件绑定事件，实现文本一键复制功能。事件配置的重要参数说明如下：

• 执行动作：选择控制组件。

• 选择组件：待复制的文本内容所在的组件，例如Markdown1。

• 组件方法：选择复制到剪切板。

在预览页面生成文本后，单击复制文本，页面将提示复制成功，随后即可在剪切板中粘贴文本内容。

进入预览页面并单击 复制文本 后，页面会显示复制成功提示。

把剪贴板内容粘贴到文本编辑器中，可以进一步确认复制的是完整内容，而不只是提示执行成功。

下载图片到本地

在图像类应用中，使用者输入文本生成对应的图片后，通常希望一键单击按钮即可快速将图片下载到本地，以便后续使用或分享。基于此需求，AI 编程提供了组件方法下载到本地，支持通过为组件添加事件的方式，实现图片一键下载功能。

例如在文生图应用搭建过程中，你可以通过添加一个名为下载图片的按钮组件，并为该组件绑定事件，实现图片一键下载功能。事件配置的重要参数说明如下：

• 执行动作：选择控制组件。

• 选择组件：待复制的文本内容所在的组件，例如Image1。

• 组件方法：选择下载到本地。

在预览页面生成图片后，单击下载图片，页面将提示下载成功，随后你可以在本地打开图片。

进入预览页面生成图片并单击 下载图片，确认页面显示下载成功。

最后在本地打开下载文件，检查图片内容、清晰度和文件格式是否正确。