> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coze.cn/llms.txt
> Use this file to discover all available pages before exploring further.

创建页面并添加组件后，你可以进一步设置这些组件的属性和事件，以实现所需的功能和交互效果。你可以调整组件的外观，例如修改颜色、字体和大小，同时设置交互事件，例如 onclick、onload 等，以响应用户的操作，不仅增强了页面的可用性，还提升了用户体验，使低代码应用更加生动。
## 属性效果 {#cd67360e}
常见属性的配置效果如下所示，具体的属性说明请参考[属性配置](/guides/set_properties_events#7fec4f5b)。
### 组件位置 {#d143e87d}
你可以在**位置**属性中，选择**相对定位**、**绝对定位**或**固定定位**，调整组件的位置。例如对容器组件内的按钮组件设置不同的定位方式，对应的属性配置说明及位置效果展示如下所示。

::::cols
@col 33
**初始位置**
![Image=1205x942](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/634094ff6534414b8487a3f2ea4ba897~tplv-goo7wpa0wc-image.image)




@col 33
**属性配置**

* 相对定位
   ![Image=265x64](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f7c1473b2f6f436592d41ce17e715a1b~tplv-goo7wpa0wc-image.image)
* 绝对定位
   ![Image=20000x11734](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0d109c792b9648318c1b4b378871b41d~tplv-goo7wpa0wc-image.image)
* 固定定位
   ![Image=20000x12103](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/711669e7d3524cb9b40ed3c7748ab85d~tplv-goo7wpa0wc-image.image)


@col 33
**UI 效果**
![Image=1210x915](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4fb5fecb45924af09abb8e47d2e666c0~tplv-goo7wpa0wc-image.image)


::::

### 组件尺寸 {#8523ed5c}
你可以在画布中选中目标组件，拖拽组件的四个角调整组件大小，也可以在**尺寸**属性中设置组件的宽度、高度，精准调整组件的尺寸。例如针对容器组件内的按钮组件，你可以选择不同的尺寸设置方式，调整其尺寸，对应的属性配置说明及效果展示如下所示。

::::cols
@col 33
**初始尺寸**
![Image=570x201](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2302671890d04e7895ca8a12dc73e01d~tplv-goo7wpa0wc-image.image)





@col 33
**属性配置**

* 固定尺寸
   ![Image=264x144](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b253fdd707124944bc98e40f674260bd~tplv-goo7wpa0wc-image.image)
* 百分比尺寸
   ![Image=268x139](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c31ba4b8bca14c0187cdff880ca4cdce~tplv-goo7wpa0wc-image.image)
* 填充容器（百分比100%）
   ![Image=257x132](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d8dd0678d8314f95b33de0f4d88aba0e~tplv-goo7wpa0wc-image.image)
* 适用内容
   ![Image=256x130](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ddb12ff0777043d9afdcfd367a3baccc~tplv-goo7wpa0wc-image.image)




@col 33
**UI 效果**

* 固定尺寸
   ![Image=575x200](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e51f0ee4dbeb4a139523675b0e2e43a5~tplv-goo7wpa0wc-image.image)
* 百分比尺寸
   ![Image=567x199](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e00ac7d1fc1e447197a31fddda5cbf81~tplv-goo7wpa0wc-image.image)
* 填充容器（百分比100%）
   ![Image=588x207](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/95a8d1612dee4b2eba2b29e9f92a8b7b~tplv-goo7wpa0wc-image.image)
* 适用内容
   ![Image=586x204](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4c68a0d39619461991fd6c4208f3eb5e~tplv-goo7wpa0wc-image.image)



::::

### 组件布局 {#9fbda998}
页面或布局类组件（容器、列表）支持布局配置，可一键排列组件内的元素。例如针对容器组件内的 4 个图标组件，轻松实现纵向、横向或自动换行等排列方式，对应的属性配置说明及排列效果展示如下所示。

::::cols
@col 33
**初始位置**
![Image=184x205](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/10a3813ba914422389a5f2898d30f6b0~tplv-goo7wpa0wc-image.image)




@col 33
**属性配置**

* 纵向（自动间距、居中排列）
   ![Image=260x239](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d904bb83d080418da195901181f5df26~tplv-goo7wpa0wc-image.image)
* 横向（自动间距、居中排列）
   ![Image=265x206](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f0708b58516d4ad49b889102a20a211a~tplv-goo7wpa0wc-image.image)
* 换行（固定间距 30 px、居中排列）
   ![Image=261x240](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/57fe2a084a3242338fe63464a0d27a01~tplv-goo7wpa0wc-image.image)




@col 33
**UI 效果**

* 纵向（自动间距、居中排列）
   ![Image=185x210](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/155fe153eb594781838ad40462ab1170~tplv-goo7wpa0wc-image.image)
* 横向（自动间距、居中排列）
   ![Image=180x206](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/03f5dc5cc5ac4d1ea19de019d626d74b~tplv-goo7wpa0wc-image.image)
* 换行（固定间距 30 px、居中排列）
   ![Image=181x209](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d681b2065c8e46c1ba330a701952b70f~tplv-goo7wpa0wc-image.image)



::::

### 背景颜色 {#98322867}
你可以在**填充**属性中，通过颜色库或自定义颜色，为组件设置背景颜色。例如将容器组件的背景色设置为黄色，对应的属性配置说明及填充效果展示如下所示。

::::cols
@col 50
**属性配置**
![Image=20000x20952](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/24e685cc786e466d9ff16483319add3c~tplv-goo7wpa0wc-image.image)



@col 50
**UI 效果**
![Image=20000x8190](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6d8e2cc9c6b043ecab42d2bf0e02d349~tplv-goo7wpa0wc-image.image)




::::

### 背景图片 {#e09274e0}
你可以在**填充**属性中，上传图片，为组件设置背景图片。例如将容器组件的背景色设置为图片，对应的属性配置说明及填充效果展示如下所示。

::::cols
@col 50
**属性配置**
![Image=20000x21000](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c4013e80432c47b291c62f59ff56efdc~tplv-goo7wpa0wc-image.image)



@col 50
**UI 效果**
![Image=20000x17142](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b52660e5f4664d8f8e97a907087ecde5~tplv-goo7wpa0wc-image.image)


::::

### 组件边框 {#505043cc}
你可以在**边框样式**属性中，设置组件的边框样式。例如为文本框添加边框，对应的属性配置说明及边框效果展示如下所示。

::::cols
@col 50
**预设边框**

* 属性配置
   ![Image=20000x12237](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/42e9eb30d6454369944eb7959bf2a3a4~tplv-goo7wpa0wc-image.image)
* UI 效果
   ![Image=280x79](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d759b9ed4a974583ab6f8a6b64809ab1~tplv-goo7wpa0wc-image.image)




@col 50
**自定义边框**

* 属性配置
   ![Image=371x246](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/acd01ab829fd4811a2155da696dcdcd8~tplv-goo7wpa0wc-image.image)
* UI 效果
   ![Image=273x72](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/71112c0c0a754f0680a7584194e631d2~tplv-goo7wpa0wc-image.image)



::::

### 组件阴影 {#e0c856cb}
你可以在**阴影样式**属性中，设置组件的阴影样式。例如为文本框添加阴影，对应的属性配置说明及阴影效果展示如下所示。

::::cols
@col 50
**预设阴影**

* 属性配置
   ![Image=459x428](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/032e5986926f4f188d0b2db02972b7a2~tplv-goo7wpa0wc-image.image)
* UI 效果
   ![Image=303x90](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/22f8ba0710a6416a8c74361b61e046f3~tplv-goo7wpa0wc-image.image)




@col 50
**自定义阴影**

* 属性配置
   ![Image=382x374](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a8ae27dd21e14a2daad34a161c3865de~tplv-goo7wpa0wc-image.image)
* UI 效果
   ![Image=297x79](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6409e925e8144e9e86e779dc256354b1~tplv-goo7wpa0wc-image.image)



::::

### 模糊效果 {#2a639471}
你可以在**模糊**属性中，设置组件的模糊效果。网页端组件支持图层模糊和背景模糊，移动端组件仅支持图层模糊。

* **图层模糊**：当前图层内包含的所有元素都将被模糊处理。例如选中一个图片组件，设置图层模糊，那么整张图片都将被模糊处理。


::::cols
@col 33
   **原始效果**
   ![Image=1100x888](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/17e3f659520d4cbd84c1d3b2b00ad9ce~tplv-goo7wpa0wc-image.image)


@col 33
**属性配置**
![Image=640x162](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c9f12bd9d50e4b46b288dc837fdc44bb~tplv-goo7wpa0wc-image.image)



@col 33
**模糊效果** 
![Image=1076x892](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bb0d3aac57094aff91effd0459ef8896~tplv-goo7wpa0wc-image.image)

::::


* **背景模糊**：支持模糊处理当前组件底部所覆盖部分。例如一个图标组件叠放在一个图片组件上，为图标组件设置背景模糊后，图标组件与图片组件重叠部分将被模糊处理。


::::cols
@col 33
   **原始效果**
   ![Image=1034x846](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3a7125a4337e49ca9a069849a80878e8~tplv-goo7wpa0wc-image.image)


@col 33
**属性配置**
![Image=646x147](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1a1ab88d92114f55b372726451cf1e0d~tplv-goo7wpa0wc-image.image)


@col 33
模糊效果
![Image=1032x851](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ee639cffb7d94854afd9425f7d831a62~tplv-goo7wpa0wc-image.image)

::::

### 溢出效果 {#b87a2c6b}
你可以在**溢出**属性中，为组件设置不同的溢出效果。例如通过为容器组件设置不同的溢出配置，当容器内的 Markdown 组件超出容器边界时，系统将进行不同的处理，对应的属性配置说明及效果展示如下所示。

::::cols
@col 33
**可见**
固定展示整个 Markdown 组件内容
![Image=930x730](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6e994ca3b6c0454a930b51156b3db68e~tplv-goo7wpa0wc-image.image)



@col 33
**隐藏**
隐藏 Markdown 组件超出容器部分
![Image=934x720](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d8f79982a34940418775e5e86da53148~tplv-goo7wpa0wc-image.image)



@col 33
**滚动**
通过滚动查看 Markdown 组件内容
![Image=965x715](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c18b5056311646978fa3b162b9820113~tplv-goo7wpa0wc-image.image)


::::

### 变换设置 {#c53336af}
你在可以在**变换**区域，为组件添加缩放、旋转、位移、倾斜等属性配置。例如将图片组件缩放 50%、旋转 30度；将图片组件沿 X、Y 轴各倾斜 10 度，对应的属性配置说明及效果展示如下所示。

::::cols
@col 33
**初始图片**
![Image=271x310](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a34aebd7737141a1a75a17ab11010fb8~tplv-goo7wpa0wc-image.image)




@col 33
**属性配置**

* 缩放 50%，旋转 30 度
   ![Image=335x213](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8a09d73df58c40f3b005b73c918272bb~tplv-goo7wpa0wc-image.image)
*  X 轴倾斜 10 度，Y 轴倾斜 10 度
   ![Image=334x211](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c36afa24610e4a76b615f875c65b6229~tplv-goo7wpa0wc-image.image)




@col 33
**UI 效果**

* 缩放 50%，旋转 30 度
   ![Image=202x208](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5e5268e7acec4aaf9288572c6275f85a~tplv-goo7wpa0wc-image.image)
*  X 轴倾斜 10度，Y 轴倾斜 10度
   ![Image=330x353](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/645e211c2ed24631b50d6079468dd02d~tplv-goo7wpa0wc-image.image)



::::

### 选中效果 {#63033b48}
列表组件中的列表项支持设置选中效果，即你可以在画布中选中列表组件的列表项（Listltem），为其设置选中效果。设置完成后，当你单击其中一个列表项时，将显示相应的变化效果，对应的属性配置说明及效果展示如下所示。

::::cols
@col 33
**原始效果**
![Image=445x325](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/02ef7055d8684f6a94e132e2d3321180~tplv-goo7wpa0wc-image.image)



@col 33
**属性配置**
![Image=364x472](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/335bf1fe41094594983e1982c81cb92d~tplv-goo7wpa0wc-image.image)



@col 33
**UI 效果**
![Image=446x330](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8bb51705f141404984ae5b2edda5231e~tplv-goo7wpa0wc-image.image)


::::

### 悬浮效果 {#3e5c68ab}
你可以为组件配置鼠标悬浮时的交互效果。例如添加一个按钮组件，为其设置悬浮效果。当你将鼠标悬浮在按钮上时，边框变为蓝色，提供直观的交互效果，对应的属性配置说明及效果展示如下所示。

::::cols
@col 33
**原始效果**
![Image=213x76](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d3c68a46d2e642a5a66a71221957efa8~tplv-goo7wpa0wc-image.image)



@col 33
**属性配置**
![Image=450x590](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/cbef89309aeb4f5cbc7cdb36d79f37da~tplv-goo7wpa0wc-image.image)



@col 33
**UI 效果**
![Image=255x81](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4da443766c2f47bba6c258456de0703d~tplv-goo7wpa0wc-image.image)



::::


### 指针设置 {#c10a296a}
配置鼠标在指定组件区域内的指针样式。例如为文本组件设置自定义的指针样式，当鼠标悬停在文本组件内时，指针变为指定的样式，对应的属性配置说明及效果展示如下所示。

::::cols
@col 50
**属性配置**
![Image=269x273](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/53cbb4d927384ee28857b044f9a76f76~tplv-goo7wpa0wc-image.image)


@col 50
**UI 效果**
![Image=236x78](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/673347049d974cf385313640f4cb8b03~tplv-goo7wpa0wc-image.image)


::::

### 隐藏组件 {#46d8e38f}
你可以通过组件的**可见性**属性，控制组件的隐藏或显示。例如添加开关组件和文本输入组件，并通过开关控制文本输入组件的可见性。开关组件 ID 为 `Switch 1`，你可以通过如下方式进行配置。

* 常用条件方式
   设置条件为`Switch1.value= Ture`时，隐藏文本输入组件（Textarea2）。当打开开关时，`{{ Switch1.value}}`值为 true，文本输入组件将被隐藏；当关闭开关时，`{{ Switch1.value}}`值为 false，展示文本输入组件。


::::cols
@col 50
   **属性配置**
   ![Image=1092x398](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b07ceb0869734232bfdeb48c797e634f~tplv-goo7wpa0wc-image.image)




@col 50
**UI 效果**

* 关闭开关
   ![Image=426x149](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/37df7760871a4cb291ef098a8ec24bf6~tplv-goo7wpa0wc-image.image)
* 打开开关
   ![Image=382x138](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/47d24a1117674999911b38e6d3840aea~tplv-goo7wpa0wc-image.image)

::::


* 表达式方式
   将文本输入组件的**可见性**设置为`{{ Switch1.value}}`。当打开开关时，`{{ Switch1.value}}`值为 true，文本输入组件将被隐藏；当关闭开关时，`{{ Switch1.value}}`值为 false，展示文本输入组件。


::::cols
@col 49
   **属性配置**
   ![Image=886x282](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5a2b4789c921485bb26750cca4b88967~tplv-goo7wpa0wc-image.image)




@col 49
**UI 效果**

* 关闭开关
   ![Image=426x149](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/37df7760871a4cb291ef098a8ec24bf6~tplv-goo7wpa0wc-image.image)
* 打开开关
   ![Image=382x138](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/47d24a1117674999911b38e6d3840aea~tplv-goo7wpa0wc-image.image)



::::

## 属性配置 {#7fec4f5b}
不同的组件有不同的属性配置参数，但通常包含常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。
### 常用设置 {#f9c53b5e}
各个组件的属性设置中，常用设置相关的属性各不相同。以文本组件为例，常用设置相关的属性说明如下。
<!-- @cols-width: 182,673 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|内容 |配置文本组件显示内容，可选项包括 string、JSExpression。 |\
| |:::tip 说明 |\
| |JSExpression 表示其属性支持动态数据绑定，用于绑定工作流等动态数据，详情请参见[设置组件内容参数](/guides/set_content_parameters)。 |\
| |::: |
| | | \
|字号 |配置文本组件显示字体大小，数值越大字体越大。 |
| | | \
|字重 |配置文本组件显示字重大小，依次增大。 |
| | | \
|字间距 |配置文本组件文字间的间距，数值越大间距越大。 |
| | | \
|水平对齐 |配置文本水平对齐方式，依次为：左对齐、居中、右对齐、右两边对齐文本，使得每一行的宽度相同。 |
| | | \
|垂直对齐 |配置文本垂直对齐方式。 |
| | | \
|行高 |配置文本组件文字显示行高，数值越大行高越高。 |
| | | \
|颜色 |配置文本组件文字显示颜色。 |
| | | \
|最大行数 |配置文本组件最大显示行数，超过最大行数显示为` ...`。 |

### 位置设置 {#14252782}
确定组件在页面或容器中的具体位置的参数。
<!-- @cols-width: 182,679 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|相对定位 |元素根据父级容器的布局方式自动排列。 |\
| |在堆叠布局下，元素自动向下或向右排列。 |
| | | \
|绝对定位 |元素相对于父级容器进行定位，可设置元素距离父元素 `left`、`top`、`right`、`bottom` 的像素值，用于修改水平和垂直方向上的位置，也可以设置元素的图层顺序。 |\
| |页面滚动时，绝对定位的元素会随页面内容一起滚动。 |
| | | \
|固定定位 |元素相对于浏览器窗口进行定位，可设置元素距离父元素 `left`、`top`、`right`、`bottom` 的像素值，用于修改水平和垂直方向上的位置，也可以设置元素的图层顺序，一般用于固定元素在浏览器中显示的位置。 |\
| |页面滚动时可保持元素的位置不变。 |

### 布局设置 {#de19cdc7}
页面或布局类组件（容器、列表）支持布局配置。以容器组件为例，布局设置相关的属性说明如下。
<!-- @cols-width: 186,673 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|排列方向 |配置组件内各元素的排列方向，支持将容器组件中各个元素进行纵向、横向或换行排列。 |
| | | \
|元素间距 |配置组件中各元素的间距，支持自动和固定间距。 |
| | | \
|间距 |当配置固定间距时，设置间距值。 |
| | | \
|元素分布 |配置组件内元素的分布方式。 |

### 尺寸设置 {#fc8dc5dd}
控制组件大小的参数。以文本组件为例，尺寸设置相关的属性说明如下。
<!-- @cols-width: 188,668 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|宽度 |配置组件的宽度值，数值越大宽度越宽。 |
| | | \
|高度 |配置组件的高度值，数值越大高度越高。 |
| | | \
|尺寸限制 |配置组件的尺寸限制，支持配置最大高度、最小高度、最大宽度、最小宽度。 |

### 样式设置 {#f54e1c00}
控制组件视觉表现的参数，例如颜色、字体和边框等。
<!-- @cols-width: 190,667 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|填充 |配置组件背景显示颜色。 |
| | | \
|圆角 |配置组件背景的圆角，支持单独设置四个角的圆角。 |
| | | \
|内边距 |配置组件背景的内边距，可以单独设置四个方向的内边距。 |
| | | \
|边框 |配置组件背景的边框样式。支持如下设置方式： |\
| | |\
| |* 预设样式：提供预设的边框样式，可直接使用。 |\
| |* 自定义样式：通过边框线的颜色、粗细和样式，自定义边框样式。 |
| | | \
|阴影 |配置组件背景的阴影样式，增强组件的立体感。支持如下设置方式： |\
| | |\
| |* 预设样式：提供预设的阴影样式，可直接使用。 |\
| |* 自定义样式：支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色，自定义阴影样式。 |
| | | \
|溢出 |配置容器内组件溢出容器的相关设置。 |\
| | |\
| |* 滚动：滚动查看超出的内容。 |\
| |* 可见：显示全部内容。 |\
| |* 隐藏：隐藏超出容器的内容。 |

### 变换设置 {#9d52f197}
丰富界面视觉效果的参数。
<!-- @cols-width: 191,661 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|缩放 |配置组件大小的缩放比例。 |
| | | \
|旋转 |配置组件围绕中心点旋转的角度。 |
| | | \
|位移 |配置组件在水平和垂直方向上的移动距离。 |
| | | \
|倾斜 |配置组件在水平和垂直方向上的倾斜角度。 |

### 指针设置 {#19be1e73}
配置鼠标在指定组件区域内的指针样式。
你可以选择**根据元素类型自动显示**，由系统自动判断并显示相应的指针样式，也可以在**使用自定义样式**区域，选择固定的指针样式。
:::tip 说明
仅网页端中的页面、容器、列表、文本、徽章、图标、Markdown、图片组件支持配置指针属性。
:::
### 状态设置 {#d6a68b87}
控制组件加载态、悬浮态、点击态、选中态、出现态的视觉效果参数。不同组件支持的状态设置不同，此处以列表组件为例。
<!-- @cols-width: 137,702 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|加载态 |配置列表组件的加载状态。具体配置说明如下： |\
| |:::tip 说明 |\
| |列表组件中，只有插槽部分支持设置加载状态。 |\
| |::: |\
| | |\
| |* 设置为 true：组件展示加载状态，隐藏内容。 |\
| |* 设置为 false：关闭加载状态。 |\
| |* 设置为变量：通过变量值（true 或 false）动态控制列表组件的加载状态。 |\
| |   例如可以通过开关组件控制列表组件的加载状态。开关组件 ID 为 `Switch 1`，当你将列表组件中插槽部分的**加载态**设置为`{{ Switch1.value}}`后，开关打开时，`{{ Switch1.value}}`值为 true，列表组件展示加载态。 |
| | | \
|悬浮效果 |配置组件的悬浮态效果。具体配置说明如下： |\
| | |\
| |* 基础设置：当鼠标悬浮到列表组件上时，列表内容样式的变化情况。包括字号、字间距等。详细说明，请参考[常用设置](/guides/set_properties_events#f9c53b5e)。 |\
| |* 样式效果：当鼠标悬浮到列表组件上时，列表组件的样式变化情况。包括背景色、边框等。详细说明，请参考[样式设置](/guides/set_properties_events#f54e1c00)。 |\
| |* 变换效果：当鼠标悬浮到列表组件上时，列表组件的动态变化情况。包括缩放、旋转等。详细说明，请参考[变换设置](/guides/set_properties_events#9d52f197)。 |\
| |* 过渡效果：设置列表组件悬浮态的动画效果。 |\
| |   * 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 |\
| |   * 持续时间：设置动画的持续时间，单位为毫秒。 |\
| |   * 延迟时间：设置动画延迟出现的时间，单位为毫秒。 |\
| |   * 生效范围：设置动画的生效范围。 |\
| |      * 应用于全部变化：动画效果将应用于基础设置、样式设置和变换设置所产生的所有变化。 |\
| |      * 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。 |
| | | \
|选中效果 |配置列表组件的选中态效果。具体配置说明如下： |\
| | |\
| |* 样式效果：选中列表组件中的某个列表项时，列表项的样式变化情况。详细说明，请参考[样式设置](/guides/set_properties_events#f54e1c00)。 |\
| |* 变换效果：选中列表组件中的某个列表项时，列表项的动态变化情况。详细说明，请参考[变换设置](/guides/set_properties_events#9d52f197)。 |\
| |* 过渡效果：设置列表组件中列表项选中态的动画效果。 |\
| |   * 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 |\
| |   * 持续时间：设置动画的持续时间，单位为毫秒。 |\
| |   * 延迟时间：设置动画延迟出现的时间，单位为毫秒。 |\
| |   * 生效范围：设置动画的生效范围。 |\
| |      * 应用于全部变化：动画效果将应用于样式设置和变换设置所产生的所有变化。 |\
| |      * 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。 |
| | | \
|点击效果 |配置组件的点击态效果。具体配置说明如下： |\
| | |\
| |* 基础设置：点击列表组件时，内容样式变化情况。详细说明，请参考[常用设置](/guides/set_properties_events#f9c53b5e)。 |\
| |* 样式效果：点击列表组件时，组件样式变化情况。详细说明，请参考[样式设置](/guides/set_properties_events#f54e1c00)。 |\
| |* 变换效果：单击列表组件时，组件动态变化情况。详细说明，请参考[变换设置](/guides/set_properties_events#9d52f197)。 |\
| |* 过渡效果：设置列表组件点击态的动画效果。 |\
| |   * 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 |\
| |   * 持续时间：设置动画的持续时间，单位为毫秒。 |\
| |   * 延迟时间：设置动画延迟出现的时间，单位为毫秒。 |\
| |   * 生效范围：设置动画的生效范围。 |\
| |      * 应用于全部变化：动画效果将应用于基础设置、样式设置和变换设置所产生的所有变化。 |\
| |      * 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。 |
| | | \
|出场效果 |设置组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入。 |

### 可见性设置 {#1a9607b0}
控制组件隐藏或显示的参数，支持在特定条件下隐藏组件。支持通过设置条件或表达式进行配置。

* 表达式方式
   * 设置为 false：显示组件。
   * 设置为 true：隐藏组件。
   * 设置为变量：通过变量值（true 或 false）动态控制组件的可见性。
      例如可以通过开关组件控制文本组件的可见性。开关组件 ID 为 `Switch 1`，当你将文本组件的**可见性**设置为`{{ Switch1.value}}`后，开关打开时，`{{ Switch1.value}}`值为 true，文本组件将被隐藏。
* 常用条件方式
   支持通过可视化界面设置条件，以控制组件的可见性。
   ![Image=553x156](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1fbb270ff89046f3bf3fe6b5a650e38f~tplv-goo7wpa0wc-image.image)

## 事件配置 {#15013d47}
用户界面编辑器支持为组件配置事件，通过配置交互事件，用户界面可以实现多样化的交互效果。配置事件时，你需要选择事件类型并指定执行动作。
:::tip 说明
支持为单个组件添加多个事件配置，多个事件将并行执行。
:::
### 事件类型 {#becf4519}
事件类型定义了在何种用户操作或系统状态下会触发特定的响应，用户界面编辑器支持以下事件类型：

* 加载时：当组件完全加载到页面时触发。
* 点击时：当用户点击组件时触发。
* 双击时：当用户双击组件时触发。
* 鼠标移动时：当鼠标在组件上移动时触发。
* 鼠标悬停时：当鼠标悬停在组件上时触发。
* 鼠标移出时：当鼠标从组件上移出时触发。
* 鼠标进入时：当鼠标进入组件时触发。
* 鼠标离开时：当鼠标离开组件时触发。
* 鼠标按下时：当用户在组件上按下鼠标按键时触发。
* 鼠标释放时：当用户在组件上释放鼠标按键时触发。
* 点击单元格时：当用户点击列表单元格时触发。
* 提交时：当表单提交时触发。
* 提交失败时：当表单提交失败时触发。
* 数据改变时：当输入字段的内容改变时触发。
* 鼠标失焦时：当元素失去焦点时触发。
* 鼠标聚焦时：当元素获得焦点时触发。

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

* 调用工作流：为组件绑定工作流，当执行预定动作时，系统会自动调用绑定的工作流，执行相应的业务逻辑。
   :::tip 说明
   支持绑定低代码应用内的工作流或资源库中的工作流，资源库中的工作流必须为已发布状态，而低代码应用内的工作流无此限制。
   :::
* 页面跳转：组件能够控制页面间的导航，实现从一个页面跳转到另一个页面。
* 展示提示信息：用于在用户执行特定操作时显示信息提示，例如警告、成功、失败、说明。
* 控制组件：当执行动作为控制组件时，通常会调用一个或多个组件方法来完成所需的功能。组件方法是组件提供的具体功能实现，它们是内置的。
* 界面变量赋值：为界面变量设置静态值或动态值。具体操作，请参考[为变量赋值](/guides/set_interface_variables#4f65ee6a)。

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

* 失焦：使组件失去焦点，通常用于文本输入类组件。
* 聚焦：将焦点设置到指定的组件，使其成为活动状态。
* 清除：清除组件的内容，例如文本输入框中的文字。
* 清除验证：移除组件上的所有验证错误信息。
* 验证：检查组件的当前值是否符合预设的验证规则。
* 重置：将组件恢复到初始状态。
* 滚动到视图：将组件滚动到可视区域内。
   仅网页端组件支持，小程序端组件不支持。
* 设置数据：为组件设置或更新数据。
* 设置禁用：使组件变为禁用状态，用户无法与之交互。
* 设置隐藏：隐藏组件，使其不可见。
* 复制到剪切板：复制文本内容到剪切板。
* 将容器内容保存为图片：将容器组件中的内容保存为图片。
* 下载到本地：支持下载图片、音频到本地。
   在网页端应用中，下载后的文件名格式为 `image+时间戳`、`audio+时间戳`。

### 操作步骤 {#6b117449}
参考以下操作，配置交互事件：

1. 在**用户界面**页签下，单击画布中要设置事件的组件。
2. 在右侧属性面板，单击**事件**页签。
3. 单击 **+ 新建。**
4. 在弹窗中，配置事件类型和执行动作。
   1. 事件类型：选择在何种用户操作和系统状态下触发执行动作。
   2. 执行动作：当满足触发条件后，指定要执行的动作。
      <!-- @cols-width: 138,669 -->
      | | | \
      |**执行动作** |**说明** |
      |---|---|
      | | | \
      |调用工作流 |执行动作选择**调用工作流**，操作步骤如下： |\
      | | |\
      | |1. 选择要调用的工作流。 |\
      | |2. 将鼠标悬浮至 `content` 参数的文本框上，然后单击右侧的图标。 |\
      | |3. 在展开的配置面板中，找到组件目录，单击目标组件的 `value`，将组件中内容输入到 `content` 参数中。 |\
      | |4. 配置工作流调用失败时的提示文案。 |
      | | | \
      |页面跳转 |执行动作选择**页面跳转**，操作步骤如下： |\
      | |选择页面类型： |\
      | | |\
      | |   * 当前项目页面：选择当前项目中的页面名称，当满足触发条件时，会打开当前项目中的页面。支持配置页面入参。 |\
      | |   * URL：输入要打开的页面的 URL。 |
      | | | \
      |展示提示信息 |执行动作选择**展示提示信息**，操作步骤如下： |\
      | | |\
      | |1. 选择提示框类型，支持成功、警告、失败、说明。 |\
      | |2. 输入提示内容。 |\
      | |3. 设置提示内容的展示时间，支持自动消失和常驻。选择自动消失时，配置多长时间后取消提示框，单位 ms。 |
      | | | \
      |控制组件 |执行动作选择**控制组件**，操作步骤如下： |\
      | | |\
      | |1. 选择要控制的组件。 |\
      | |2. 选择控制组件的方法，不同组件内置的方法不同。 |
      | | | \
      |界面变量赋值 |执行动作选择**界面变量赋值**，操作步骤如下： |\
      | | |\
      | |1. 选择你已创建的界面变量。 |\
      | |2. 设置变量值，支持设置静态值或动态值。具体操作，请参考[为变量赋值](/guides/set_interface_variables#4f65ee6a)。 |

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

## 配置示例 {#c200e727}
### 复制文本内容 {#854e69dd}
在文本生成类应用中，使用者生成内容后，通常希望一键单击按钮即可快速将内容复制到剪切板，无需手动选择文本并执行复制操作。基于此需求，扣子编程提供了组件方法**复制到剪切板**，支持通过为组件添加事件的方式，实现一键将文本内容复制到剪切板。
例如在网页类型的应用搭建过程中，你可以通过添加一个名为**复制文本**的按钮组件，并为该组件绑定事件，实现文本一键复制功能。事件配置的重要参数说明如下：

* **执行动作**：选择**控制组件**。
* **选择组件**：待复制的文本内容所在的组件，例如`Markdown1`。
* **组件方法**：选择**复制到剪切板**。

![Image=1929x1043](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/281b0282a20e4439902f052c23a869f8~tplv-goo7wpa0wc-image.image)
在预览页面生成文本后，单击**复制文本**，页面将提示**复制成功**，随后即可在剪切板中粘贴文本内容。

::::cols
@col 50
**预览页面**
![Image=20000x13395](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7d5342a2caa94779bc7d0d106b311719~tplv-goo7wpa0wc-image.image)



@col 50
**复制到剪切板**
![Image=684x590](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5d623faa8e4f46e0bb31e0b9e01f8daa~tplv-goo7wpa0wc-image.image)


::::

### 下载图片到本地 {#42166c00}
在图像类应用中，使用者输入文本生成对应的图片后，通常希望一键单击按钮即可快速将图片下载到本地，以便后续使用或分享。基于此需求，扣子编程提供了组件方法**下载到本地**，支持通过为组件添加事件的方式，实现图片一键下载功能。
例如在文生图应用搭建过程中，你可以通过添加一个名为**下载图片**的按钮组件，并为该组件绑定事件，实现图片一键下载功能。事件配置的重要参数说明如下：

* **执行动作**：选择**控制组件**。
* **选择组件**：待复制的文本内容所在的组件，例如`Image1`。
* **组件方法**：选择**下载到本地**。

![Image=1893x913](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d405cc1907d14a0eaa426a3b5c964a16~tplv-goo7wpa0wc-image.image)
在**预览**页面生成图片后，单击下载图片，页面将提示**下载成功**，随后你可以在本地打开图片。

::::cols
@col 50
预览效果
![Image=1333x1118](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d05b5bed9dec45e4ba7871703c627d37~tplv-goo7wpa0wc-image.image)



@col 50
下载到本地
![Image=937x758](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9bcc650a59ed4a2ea34027bed3ce1f05~tplv-goo7wpa0wc-image.image)


::::