电话 400-101-6950

# 表单样式

# 一、“布局” 全局配置项

# 1.1 PC 端列数(表单字段一行多列)

# 功能说明

支持快速统一设置 PC 端表单中 “一行显示的字段列数”,提升表单排版效率,适配不同宽度的窗口。如表单在小窗口使用可选择 1 列、在中大窗口使用则可选择3-4 列)。

# 操作步骤

  1. 进入目标表单的 “表单设计器” 界面,在右侧配置面板中找到 “表单样式”→“布局” 选项卡;
  2. 在 “PC 端列数” 选择项中选择所需列数(支持 1 列、2 列、3 列、4 列,默认 1 列);
  3. 选择后表单实时刷新,所有字段自动按所选列数均匀排列。

image.png

tips:当前不受“PC端列数”功能影响的字段有:两列、三列、多行多列、分组、选项卡、子表单、子表关联、多表关联、关联查询、树形表单。

# 1.2 字段布局(字段标题布局)

# 功能说明

控制 PC 端表单中 “字段标题” 与 “输入框 / 选择框” 的相对位置,满足不同表单的视觉排版需求(如复杂表单用 “左右布局” 节省垂直空间,简洁表单用 “上下布局” 提升可读性)。

# 操作步骤

  1. 在 “布局” 配置选项卡中,找到 “字段布局” 选项;
  2. 点击单选按钮选择 “上下布局” 或 “左右布局”:
  3. 选择后表单实时预览布局效果,所有字段统一应用该设置。

image.png

# 1.3 表单页面间距 - PC 端(表单页面的内边距、外边距)

# 功能说明

可视化调整 PC 端表单 “整体区域” 的内边距(表单内容到表单边框的距离)和外边距(表单边框到页面其他元素的距离),避免表单与页面边缘过度拥挤或留白过多。

# 操作步骤

  1. 在 “布局” 配置选项卡中,找到 “表单页面间距 - PC 端” 模块,包含 “内边距” 和 “外边距” 两个维度;
  2. 每个维度支持 “上下左右” 单独调整,操作方式为点击选择或自定义输入
  3. 选择后,画布区域可实时预览效果。

image.png

# 1.4 选项型字段只读时显示的样式

# 功能说明

针对 “单选框、复选框” 选项型字段,当字段为 “只读” 状态时(如表单详情查看),可自定义其显示样式,提升用户阅读体验。

# 操作步骤

  1. 在 “布局” 配置选项卡中,找到 “选项型字段只读显示” 模块;
  2. 配置 “显示样式”:
  • 显示按钮样式:已选择的选择,用选择框或颜色按钮的形式显示(具体颜色可在“字段属性中设置”),未选的选项(若开启 “显示全部选项”),则以灰色禁用按钮的样式显示;
  • 仅文本样式:仅显示选项的文本,无按钮背景。
  1. 配置 “显示范围”(样式为“显示按钮样式”时,可以配置):
  • 全部选项:显示该字段的所有可选选项,已选选项通过样式区分(如颜色);
  • 已选选项:仅显示用户选中的选项,不显示未选选项;
  1. 配置后,可在用户端的表单详情页中及时查看效果(点击设计器顶部 “访问应用” 按钮打开用户端)。

image.png

# 二、“字段” 全局配置项

# 2.1 表单与输入框的间距 - PC 端

# 功能说明

统一调整 PC 端表单中 “字段标题” 与 “输入框 / 选择框” 之间的间距,可与 “字段布局”(上下 / 左右)配合使用,精准控制字段内部的视觉留白,避免标题与输入框过度紧凑或疏离。

image.png

# 2.2 字段间距 - PC 端(统一可视化配置表单中各字段的间距)

# 功能说明

统一控制 PC 端表单中 “不同字段之间的间距”(包括上下相邻字段、左右相邻字段),避免逐字段调整间距导致的排版混乱,快速实现表单整体疏密一致的视觉效果。

image.png

# 三、相关功能

# 3.1 重置(恢复样式默认值)

# 功能说明

当布局、字段配置混乱或需要重新开始配置时,可点击重置按钮,一键恢复所有 “配置” 默认值。

# 3.2 同步到应用(当前引用)

# 功能说明

可以将当前表单的 “全局配置样式”(布局、字段)分别同步到当前应用内的所有表单,实现应用内所有表单样式统一,减少重复配置工作。

1 / 0