基础配置
在组件的基础配置体系中,为用户提供了全面且细致的设置选项。具体而言,支持对组件的字段名称进行个性化定义,能够设置清晰明确的提示信息以辅助用户操作;可根据实际需求灵活调整组件的宽度;提供忽略开关功能,方便用户根据场景决定是否忽略该组件的某些特性或操作;支持对标签样式进行多样化设置,满足不同的视觉呈现需求;并且具备组件联动功能,可实现多个组件之间的协同交互。
1. 字段名称
1.1 功能简介
字段名称是用于对组件输入内容所设定的标题性标识,其作用在于为用户提供清晰的指引,方便用户准确填写该字段对应的内容。
1.2 应用场景
如姓名、产品名称、公司名称、规格、型号等。
2.3 预期效果
以员工姓名为例,效果如下所示:
2. 提示信息
2.1 功能简介
提示文字是对表单输入框内容的一个辅助说明。在编辑输入框前,显示提示文字内容;输入内容后,显示输入后的内容。通过简短文字提示,可让数据填报人员更快速地识别到需要录入的内容,进而提升数据录入效率。
2.2 应用场景
收集员工信息场景下,通过提示文字进行手机号位数提示。 客户满意度调研场景下,通过提示文字进行打分范围提示。
2.3 预期效果
以收集员工信息为例,在联系电话处给出提示文字,效果如下所示:
2.4 设置入口
进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 提示信息」处,设置需要提示的文字内容。
3. 组件宽度
3.1 功能简介
不同的字段需要录入的内容长度不一样,因此所需要的字段宽度也不一样。为了更好的进行表单布局,可以对部分字段单独进行字段宽度设置。
3.2 应用场景
客户满意度调研场景下,设置客户反馈字段的宽度为整行可以便于客户填写更多反馈内容。 客户名称、联系电话相对较短,可以选择1/2宽度。
3.3 预期效果
以客户名称、反馈建议的字段宽度为例,效果如下所示:
3.4 设置入口
进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 组件宽度」处,设置组件宽度。
4. 忽略字段
4.1 功能简介
开启后,表单提交时会自动排除该组件的字段,不会将其包含在提交的数据中。
4.2 应用场景
客户编号需要根据系统业务自动生成,不需要用户填写提交,可以选择开启字段隐藏。
4.3 设置入口
进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 忽略字段」处,设置开启忽略字段。
5. 字段隐藏
5.1 功能简介
部分字段前无需展示字段标签,可将此字段标签进行隐藏处理。
5.2 应用场景
内容较少的表单可以省略字段标签展示。
5.3 预期效果
以客户编号的字段隐藏为例,效果如下所示:
5.4 设置入口
进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 配置表单项」处,设置字段隐藏。
6. 配置表单项
6.1 功能简介
字段标签样式提供灵活配置选项,支持自定义标签位置、调整标签宽度以及设置下边距,以满足多样化的界面布局需求。
6.2 应用场景
在设计在线报名表单时,针对不同长度的字段名称(如“姓名”简短,“紧急联系人电话及关系”较长),通过调整标签宽度,让表单整体布局更整齐;根据表单整体风格,设置标签位置(如左对齐、顶部对齐)和下边距,提升用户填写体验。
6.3 预期效果
标签不同位置的效果如下所示:
标签的宽度与下边距设置效果如下:
6.4 设置入口
进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 配置表单项」处,设置字段位置及宽度、下边距设置。
宽度及边距设置,支持设置为px、auto、%、vh、vw、em、rem
px:像素是屏幕上显示的最小单位px是一个绝对长度单位,它基于设备的像素密度
auto:不是一个具体的长度单位,而是一个自动计算的值,浏览器会根据元素的布局和周围环境自动确定其大小或位置
%:是一个相对长度单位,它相对于包含块的相应尺寸进行计算
vh:是相对于视口(浏览器窗口)高度的百分比单位。1vh 等于视口高度的 1%
vw:是相对于视口(浏览器窗口)宽度的百分比单位。1vw 等于视口宽度的 1%
em:是一个相对长度单位,它相对于当前元素的字体大小进行计算。如果没有显式设置当前元素的字体大小,则相对于其父元素的字体大小
rem:也是一个相对长度单位,但它相对于根元素(通常是 `<html>` 元素)的字体大小进行计算