Skip to content

基础配置

在组件的基础配置体系中,为用户提供了全面且细致的设置选项。具体而言,支持对组件的字段名称进行个性化定义,能够设置清晰明确的提示信息以辅助用户操作;可根据实际需求灵活调整组件的宽度;提供忽略开关功能,方便用户根据场景决定是否忽略该组件的某些特性或操作;支持对标签样式进行多样化设置,满足不同的视觉呈现需求;并且具备组件联动功能,可实现多个组件之间的协同交互。

1. 字段名称

1.1 功能简介

字段名称是用于对组件输入内容所设定的标题性标识,其作用在于为用户提供清晰的指引,方便用户准确填写该字段对应的内容。

1.2 应用场景

如姓名、产品名称、公司名称、规格、型号等。

2.3 预期效果

字段名称.gif

以员工姓名为例,效果如下所示:

字段名称.png

2. 提示信息

2.1 功能简介

提示文字是对表单输入框内容的一个辅助说明。在编辑输入框前,显示提示文字内容;输入内容后,显示输入后的内容。通过简短文字提示,可让数据填报人员更快速地识别到需要录入的内容,进而提升数据录入效率。

2.2 应用场景

收集员工信息场景下,通过提示文字进行手机号位数提示。 客户满意度调研场景下,通过提示文字进行打分范围提示。

2.3 预期效果

以收集员工信息为例,在联系电话处给出提示文字,效果如下所示:

提示文字.png

2.4 设置入口

提示文字.gif

进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 提示信息」处,设置需要提示的文字内容。

提示文字设置.png

3. 组件宽度

3.1 功能简介

不同的字段需要录入的内容长度不一样,因此所需要的字段宽度也不一样。为了更好的进行表单布局,可以对部分字段单独进行字段宽度设置。

3.2 应用场景

客户满意度调研场景下,设置客户反馈字段的宽度为整行可以便于客户填写更多反馈内容。 客户名称、联系电话相对较短,可以选择1/2宽度。

3.3 预期效果

以客户名称、反馈建议的字段宽度为例,效果如下所示:

宽度设置.png

3.4 设置入口

组件宽度.gif

进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 组件宽度」处,设置组件宽度。

组件宽度.png

4. 忽略字段

4.1 功能简介

开启后,表单提交时会自动排除该组件的字段,不会将其包含在提交的数据中。

4.2 应用场景

客户编号需要根据系统业务自动生成,不需要用户填写提交,可以选择开启字段隐藏。

4.3 设置入口

忽略字段.gif

进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 忽略字段」处,设置开启忽略字段。

字段隐藏.png

5. 字段隐藏

5.1 功能简介

部分字段前无需展示字段标签,可将此字段标签进行隐藏处理。

5.2 应用场景

内容较少的表单可以省略字段标签展示。

5.3 预期效果

以客户编号的字段隐藏为例,效果如下所示:

字段隐藏2.png

5.4 设置入口

字段隐藏.gif

进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 配置表单项」处,设置字段隐藏。

字段隐藏设置.png

6. 配置表单项

6.1 功能简介

字段标签样式提供灵活配置选项,支持自定义标签位置、调整标签宽度以及设置下边距,以满足多样化的界面布局需求。

6.2 应用场景

在设计在线报名表单时,针对不同长度的字段名称(如“姓名”简短,“紧急联系人电话及关系”较长),通过调整标签宽度,让表单整体布局更整齐;根据表单整体风格,设置标签位置(如左对齐、顶部对齐)和下边距,提升用户填写体验。

6.3 预期效果

标签不同位置的效果如下所示:

位置.png

标签的宽度与下边距设置效果如下:

标签边距.png

6.4 设置入口

配置表单项.gif

进入组件编辑页面,选中需要设置的字段,在右侧工具栏「组件配置>> 配置表单项」处,设置字段位置及宽度、下边距设置。

字段标签设置.png

间距单位.png

宽度及边距设置,支持设置为px、auto、%、vh、vw、em、rem
px:像素是屏幕上显示的最小单位px是一个绝对长度单位,它基于设备的像素密度
auto:不是一个具体的长度单位,而是一个自动计算的值,浏览器会根据元素的布局和周围环境自动确定其大小或位置
%:是一个相对长度单位,它相对于包含块的相应尺寸进行计算
vh:是相对于视口(浏览器窗口)高度的百分比单位。1vh 等于视口高度的 1%
vw:是相对于视口(浏览器窗口)宽度的百分比单位。1vw 等于视口宽度的 1%
em:是一个相对长度单位,它相对于当前元素的字体大小进行计算。如果没有显式设置当前元素的字体大小,则相对于其父元素的字体大小
rem:也是一个相对长度单位,但它相对于根元素(通常是 `<html>` 元素)的字体大小进行计算