表单组件

表单组件位于【组件】-【内置】中,双击或拖拽至画布即可使用。


单行/多行输入

使用单行/多行输入,可以在原型中添加一个预览时可以输入文字的输入框。查看/使用项目的人点击即可输入内容。

单行输入与多行输入的区别在于:

  • 单行输入中,如果输入内容过长,始终以一行显示,不会自动换行,可以左右滑动查看所有输入内容;
  • 多行输入中,在输入内容长度超过输入框宽度时,会进行自动换行,可以上下滑动查看所有输入内容。

drawing

另外,单行输入组件支持在右侧外观设置面板设置弹出的键盘样式

drawing



下拉选择器

下拉选择器支持点击右侧的下拉箭头弹出多个选项,点击选项即可选择。

这一组件使用时,默认3个选项,可以修改选项的文本内容。

如需添加选项,在编辑区双击这一组件,在选项3后点击enter,即可输入新的选项内容。

如需删除选项,在编辑区双击这一组件,将多余的选项行删除即可。

drawing



选择文件

使用这一组件,项目运行时可以点击左侧【选择文件】按钮,出现文件选择弹窗,选择文件后会在右侧名称栏中显示名称。



单选/复选

单选/复选组件可以支持进行选择的操作。

在右侧的外观设置面板可以对这两个组件进行具体的设置。

1.【类型】部分

  • 可以设置选项的样式;
  • 打开「禁用」按钮,则整个组件会成为灰色,不支持进行选择操作;
  • 修改下方「尺寸」,可以调整选项的字号和整体大小;
  • 支持两种对齐方式:选项等间距列表等间距,最右侧的数值框可以调整等间距的具体间距大小。

drawing

2.【选项】部分

  • 点击右上角的「加号」按钮,可以添加选项;
  • 选项框中可以修改选项文本;
  • 鼠标置于选项框上,按住并拖动左侧出现的按钮,可以修改选项的顺序;
  • 鼠标置于选项框上,点击右侧的「闪电」按钮,可以为选项添加事件,选中时进行跳转交互;
  • 闪电按钮右侧的「圆点」,点击可以切换选项的选中/未选中状态;
  • 点击选项框右侧的「减号」按钮,可以删除此选项。

drawing

3.【按钮】部分

  • 可以修改未选中项的按钮颜色及文字颜色;

4.【选中项】部分

  • 可以修改选中项的按钮颜色及文字颜色。

drawing



开关组件

从「组件-内置-表单组件」内拖拽到画布内即可直接使用。

drawing

  • 右侧属性面板可设置禁用开关、开启样式和关闭样式;
  • 点击禁用后,组件将无法进行点击,同时会增加一定的蒙层效果。




滑动条

滑动条是用于选择数值区间的一种常见组件,常用场景为调节音量、亮度或各种效果参数等。

但需要注意的是,滑动条与滚动条不同,不能作为滑动页面等效果展示

drawing

  • 右侧属性面板可以设置滑动条的轨道及滑块设置。轨道可设置圆角、独立圆角、轨道线条粗细、颜色填充等,滑块可设置位置、大小、填充色等;

  • 轨道宽度限制为2-20,属性面板下拉框只显示2-20的偶数数字,但支持自定义输入数字;滑块直径限制为8-80,滑块描边最大限制为9,支持自定义输入数字。





数字步进器

当你想对数值进行小幅度的调整时,可以使用此组件。

比如:购物车数量由1增加到2,百分比从10%调整到11%等。

drawing

  • 右侧属性面板可修改数字步进器的文本样式、数值及按钮;

  • 数值可选择的最大/最小值无上下限,也可设置为负数,默认区间为0-10;默认值为1,当前区间变动超出默认值后,自动变更为当前区间的边界值。





这篇文章帮助到你了吗?