按钮组件用于触发事件或动作,例如提交表单。
属性设置
按钮组件支持丰富的属性设置,例如常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。
常用设置
|
属性
|
说明
|
|
按钮样式
|
选择按钮的显示样式,不同样式的按钮显示效果不同。
|
|
按钮文案
|
按钮文案的设置开关,开启后可以自定义修改文案,关闭后按钮显示为+。
|
|
内容
|
按钮组件的文案默认显示为+按钮,你可以自定义修改文案,支持配置静态文案和动态绑定数据,详情请参见设置组件内容参数。
仅开启了按钮文案的设置开关,才支持此配置项。
|
|
图标
|
按钮组件默认未配置图标,你可以打开图标的开关,支持从本地上传和从图标库选择图标。
- 本地上传:支持上传
.png 和.jpg 格式的图标,但目前不支持 .svg 格式,上传的图标最大不超过 5M。
- 图标库选择图标:可从图标库选择
.svg格式的图标,支持设置图标颜色。
|
|
禁用态
|
可控制按钮组件在什么情况下展示禁用状态。
在内容生成类的应用场景中,建议为生成键(按钮组件)的禁用态和加载态属性同时绑定工作流的loading值。绑定后,可以防止用户在工作流的执行过程中重复点击生成按钮,避免不必要的重复操作。
|
|
加载态
|
可控制按钮组件在什么情况下展示加载状态。
在内容生成类的应用场景中,建议为生成键(按钮组件)的禁用态和加载态属性同时绑定工作流的loading值。绑定后,可以防止用户在工作流的执行过程中重复点击生成按钮,避免不必要的重复操作。
|
位置设置
按钮组件提供三种位置类型选项,以灵活配置组件在界面中的位置。
- 相对定位:堆叠布局下,元素自动向下或向右排列。
- 绝对定位:页面滚动时,绝对定位的元素会随页面一起滚动。
- 固定定位:页面滚动时,固定定位的元素会保持固定位置不变。
尺寸设置
|
属性
|
说明
|
|
宽度
|
配置按钮组件的宽度值,支持以下宽度设置方式:
- 固定:固定的像素值,不会随容器大小变化。
- 百分比:元素的宽度占容器宽度的百分比。
- 填充容器:元素的宽度填满容器的可用空间。
- 适应内容:元素的宽度会随着内容的大小自动调整。
|
|
高度
|
配置按钮组件的高度值,支持以下高度设置方式:
- 固定:固定的像素值,不会随容器大小变化。
- 百分比:元素的高度占容器高度的百分比。
- 填充容器:元素的高度填满容器的可用空间。
- 适应内容:元素的高度会随着内容的大小自动调整。
|
|
尺寸限制
|
配置按钮组件的尺寸限制,支持配置最大高度、最小高度、最大宽度、最小宽度。
合理设置尺寸限制参数可以确保组件在不同屏幕尺寸下保持布局的稳定性和一致性,避免因屏幕尺寸差异而导致的布局问题。
|
样式设置
|
属性
|
说明
|
|
填充
|
配置按钮组件的背景显示颜色。
|
|
圆角
|
配置按钮组件背景的圆角,支持单独设置四个角的圆角。
|
|
内边距
|
配置按钮组件背景的内边距,可以单独设置四个方向的内边距。
|
|
外边距
|
配置按钮组件背景的外边距,可以单独设置四个方向的外边距。
|
|
边框
|
配置按钮组件背景的边框样式。支持如下设置方式:
- 预设样式:提供预设的边框样式,可直接使用。
- 自定义样式:通过边框线的颜色、粗细和样式,自定义边框样式。
|
|
阴影
|
配置按钮组件背景的阴影样式,增强组件的立体感。支持如下设置方式:
- 预设样式:提供预设的阴影样式,可直接使用。
- 自定义样式:支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色,自定义阴影样式。
|
|
模糊
|
配置按钮组件的模糊效果,数值越大,模糊效果越明显。支持设置图层模糊和背景模糊。
- 图层模糊:当前图层内包含的所有元素都将被模糊处理。
- 背景模糊:支持模糊处理当前组件底部所覆盖部分。
|
变换设置
丰富界面视觉效果的参数。
|
属性
|
说明
|
|
缩放
|
配置按钮组件大小的缩放比例。
|
|
旋转
|
配置按钮组件围绕中心点旋转的角度。
|
|
位移
|
配置按钮组件在水平和垂直方向上的移动距离。
|
|
倾斜
|
配置按钮组件在水平和垂直方向上的倾斜角度。
|
状态设置
控制按钮组件悬浮效果、点击效果和出场效果的视觉效果参数。
|
属性
|
说明
|
|
悬浮效果
|
配置按钮组件的悬浮态效果。具体配置说明如下:
- 样式效果:当鼠标悬浮到按钮组件上时,按钮组件的样式变化情况。包括背景色、边框等。详细说明,请参考样式设置。
- 变换效果:当鼠标悬浮到按钮组件上时,按钮组件的动态变化情况。包括缩放、旋转等。详细说明,请参考变换设置。
- 过渡效果:设置按钮组件悬浮态的动画效果。
- 动画效果:支持设置为缓入缓出、缓入、缓出、线性等动画。
- 持续时间:设置动画的持续时间,单位为毫秒。
- 延迟时间:设置动画延迟出现的时间,单位为毫秒。
- 生效范围:设置动画的生效范围。
- 应用于全部变化:动画效果将应用于样式设置和变换设置所产生的所有变化。
- 仅应用于变换效果:动画效果仅应用于变换设置所产生的变化。
|
|
点击效果
|
配置按钮组件的点击态效果。具体配置说明如下:
- 样式效果:点击按钮组件时,按钮组件的样式变化情况。详细说明,请参考样式设置。
- 变换效果:点击按钮组件时,按钮组件的动态变化情况。详细说明,请参考变换设置。
- 过渡效果:设置按钮组件点击态的动画效果。
- 动画效果:支持设置为缓入缓出、缓入、缓出、线性等动画。
- 持续时间:设置动画的持续时间,单位为毫秒。
- 延迟时间:设置动画延迟出现的时间,单位为毫秒。
- 生效范围:设置动画的生效范围。
- 应用于全部变化:动画效果将应用于样式设置和变换设置所产生的所有变化。
- 仅应用于变换效果:动画效果仅应用于变换设置所产生的变化。
|
|
出场效果
|
设置按钮组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入。
|
可见性
控制按钮组件隐藏或显示的参数,支持在特定条件下隐藏按钮组件。
- 设置为 false:显示组件。
- 设置为 true:隐藏组件。
- 设置为变量:通过变量值(true 或 false)动态控制按钮组件的可见性。
例如可以通过开关组件控制按钮组件的可见性。开关组件 ID 为 Switch1,当你将按钮组件的可见性设置为{{ Switch1.value}}后,开关打开时,{{ Switch1.value}}值为 true,按钮组件将被隐藏。
事件设置
通过配置按钮组件的事件,可以为按钮组件添加丰富的交互功能,例如点击、加载等,以增强用户体验和界面的互动性。
|
事件项
|
说明
|
|
事件类型
|
支持以下事件类型:
- 点击时:当用户点击组件时触发。
- 加载时:当组件完成加载时触发。
|
|
组件方法
|
支持以下方法:
- 滚动到视图:将组件滚动到可视区域内。
- 设置内容:为组件设置或更新内容。
- 设置禁用:使组件变为禁用状态,用户无法与之交互。
- 设置加载:使组件变为加载状态,用户无法与之交互。
- 设置隐藏:隐藏组件,使其不可见。
|