如何布局

@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 属性，例如：

{
  "properties": {
    "email": {
      "type": "string",
      "title": "邮箱",
      "format": "email"
    },
    "name": {
      "type": "string",
      "title": "姓名",
      "minLength": 5
    },
    "remark": {
      "type": "string",
      "title": "描述",
      "ui": {
        "widget": "textarea",
        "autosize": true,
        "grid": {
            "span": 24
        }
      }
    }
  },
  "ui": {
    "spanLabelFixed": 100,
    "grid": {
      "span": 12
    }
  }
}

按钮

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

注意事项

• 值为 null 或 undefined 表示手动添加按钮，但保留容器
• 值为 none 表示手动添加按钮，且不保留容器
• 使用 spanLabelFixed 固定标签宽度时，若无 render.class 则默认为居中状态

自定义

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

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

展开与收缩

当表单表单项过多时，可以将不重要的字段标记为可折叠，并配合展开/收缩按钮来切换显隐。

使用方法

在需要折叠的字段上设置 ui.collapse = true：

{
  "properties": {
    "name": { "type": "string", "title": "姓名" },
    "email": { "type": "string", "title": "邮箱" },
    "nickname": {
      "type": "string",
      "title": "昵称",
      "ui": { "collapse": true }
    },
    "bio": {
      "type": "string",
      "title": "个人简介",
      "ui": { "collapse": true }
    }
  }
}

在 sf 组件上启用 expandable 即可：

<sf [schema]="schema" [expandable]="true"></sf>

展开/收缩按钮会自动出现在提交、重置按钮旁，只有当 表单中存在 collapse 字段 时按钮才会显示。

按钮文本支持国际化，默认值为 展开 / 收起。同时支持通过 [(expanded)] 双向绑定外部控制状态：

<sf [schema]="schema" [expandable]="true" [(expanded)]="isExpanded"></sf>

注意： expandable 和 collapse 属于 UI 层面的控制，与字段的 required 逻辑无关。