如何布局

@delon/form 布局是基于 Grid 栅格系统，而 SFSchema 的渲染类来决定布局参数。

表单布局分为行内、垂直、水平（默认）三类，它由 layout 决定。

类型

行内

表单项水平行内排列，一般用于简单搜索框。

表单项的宽度由组件自身来决定，你可以使用 width 参数来调整其大小，像小部件 select 可能会因为未设置默认值倒置宽度极小。

可通过设置 mode 参数来快速设置为搜索模式。

垂直

标签和表单控件上下垂直排列。

水平

标签和表单控件水平排列，一般用于编辑页。

水平类型相对于行内与垂直更复杂一点，因为会涉及响应式，决定每个表单项所站的格数是由 grid 属性来决定。

可通过设置 mode 参数来快速设置为编辑模式。

非响应式

非响应式时只需要维护 span 属性即可。

响应式

响应式是根据 xs、sm、md、lg、xl、xxl 来决定不同屏幕时决定要占用几格，有几个注意点：

  • 每一行只能有 24 格

  • 表示两个表单项在同一行，则设置值为 12

  • 表示屏幕 ≥992px 时两个表单项在同一行，小于则每个表单项为一行，则：{ sm: 24, md: 12 }

不规则布局

当然，表单不可能每一行都有固定表单项数量，有可能某个表单项会占用一整行，由于栅格系统的因素，这会产生另一个问题：标签无法对齐，sf 提供一种方案，即固定所有标签的宽度 spanLabelFixed 属性，例如：

  1. {
  2.   "properties": {
  3.     "email": {
  4.       "type": "string",
  5.       "title": "邮箱",
  6.       "format": "email"
  7.     },
  8.     "name": {
  9.       "type": "string",
  10.       "title": "姓名",
  11.       "minLength": 5
  12.     },
  13.     "remark": {
  14.       "type": "string",
  15.       "title": "描述",
  16.       "ui": {
  17.         "widget": "textarea",
  18.         "autosize": true,
  19.         "grid": {
  20.             "span": 24
  21.         }
  22.       }
  23.     }
  24.   },
  25.   "ui": {
  26.     "spanLabelFixed": 100,
  27.     "grid": {
  28.       "span": 12
  29.     }
  30.   }
  31. }

按钮

按钮布局渲染同表单项一样布局、参数，可以通过 SFButton 属性来调整按钮渲染风格。

注意事项

  • 值为 null 或 undefined 表示手动添加按钮，但保留容器

  • 值为 none 表示手动添加按钮，且不保留容器

  • 使用 spanLabelFixed 固定标签宽度时，若无 render.class 则默认为居中状态

自定义

当你希望自定义按钮时，务必设置 button 值为 null。

  1. <sf #sf [button]="null">
  2.   <button type="submit" nz-button [disabled]="!sf.valid">保存</button>
  3.   <button (click)="sf.reset()" type="button" nz-button>重置</button>
  4. </sf>