更新时间:2024-11-19 GMT+08:00
按钮
按钮组件是自定义页面设计中一个非常重要的元素,它允许用户通过单击触发一个动作。
在左侧组件区域,选择“按钮”组件,并拖拽至设计区域,如图1所示。
基础配置
- 文本:输出按钮显示的内容。输入内容不得超过32个字符。
- 文本大小:设置按钮文本大小,默认为14px,取值范围为[8,100]。
- 文本颜色:默认为黑色,可自定义修改。
- 按钮形态:设置按钮形态,支持“实心”、“轮廓线”、“文本”和“图标按钮”四种形态。
- 当“按钮形态”选择“实心”、“轮廓线”或“文本”时,需设置按钮主题。flow提供了“主要按钮”、“次要按钮”和“警示按钮”三种常见的按钮类型,每种按钮都有其特定的用途和视觉特征,您可按需选择。
- 主要按钮:表示界面中最主要或最重要的操作,如提交表单、确认购买等。通常具有醒目的颜色,以便在页面上突出显示。
- 次要按钮:用于表示次要或辅助的操作,如取消操作、返回上一步等。
- 警示按钮:用于表示操作可能带来风险。通常采用红色或其他警示颜色,以引起警觉。
- 当“按钮形态”选择“图标按钮”时,需设置以下参数。
- 图标大小:设置图标显示大小,可选择小、中和大三种规格。
- 图标样式:设置图标显示的样式,纯色或图片。
- 背景:当“图标样式”选择“纯色”时配置,选择图标的背景颜色。
- 上传自定义图片:当“图标样式”选择“图片”时配置,上传图标背景图片。
上传的图片支持jpg、jpeg、png、gif格式,图片大小单张在5MB以内。
- 文本位置:设置按钮文本的位置,可设置在图标右侧或图标下方。
- 当“按钮形态”选择“实心”、“轮廓线”或“文本”时,需设置按钮主题。flow提供了“主要按钮”、“次要按钮”和“警示按钮”三种常见的按钮类型,每种按钮都有其特定的用途和视觉特征,您可按需选择。
- 按钮操作:设置单击触发的动作,默认为“打开已发布表单”,可根据需求选择“打开已发布表单”、“打开已发布数据管理页”、“打开已发布自定义页面”或“打开外部链接”。
- 打开方式:根据应用场景选择打开方式,支持“当前页面打开”、“新页面打开”和“弹框打开”三种方式。
- 选择页面:下拉框中选择已发布表单,当“按钮操作”选择“打开已发布表单”、“打开已发布数据管理页”或“打开已发布自定义页面”时可配置。
请选择应用内已发布页面作为打开页面,页面停止发布将影响按钮事件
- 当“按钮操作”选择““打开外部链接”时,输入以http(s)开头链接地址。
样式配置
- 内间距:设置容器内组件与容器四边的间距,可分别配置上、下、左、右或四周。默认值为0px,范围为0~100px。
- 外间距:设置容器外与其他容器四边的间距,可分别配置上、下、左、右或四周。默认值为0px,范围为0~100px。
- 边框:
- 位置:设置边框的位置,支持配置上、下、左、右和四周。
- 宽度:设置边框的宽度。默认值为0px,范围为0~50px。
- 样式:设置边框样式,根据需求选择“无”、“圆点”、“虚线”和“实线”。
- 颜色:设置边框显示的颜色。
- 圆角:给元素添加圆角效果,设置圆角的大小和位置。
- 背景:设置组件样式的背景颜色。
- 阴影:
- X:X偏移,阴影相对于其源元素在水平方向(X轴)的偏移距离,取值范围[-100, 100]。
- Y:Y偏移,阴影在垂直方向(Y轴)的偏移距离,取值范围[-100, 100]。
- 模糊:阴影的模糊程度。值为0时表示阴影边缘锐利,没有模糊。值越大,阴影的边缘就越模糊,从而产生更柔和的阴影效果。取值范围[0, 100]。
- 扩散:扩散半径,它允许阴影在原始尺寸基础上向外扩散。正值会使阴影扩大,负值则会减小阴影的尺寸。取值范围[-100, 100]。
- 颜色:设置阴影的颜色。
父主题: 自定义页面组件介绍