低代码amis学习笔记(表单)

基本用法

最基本的用法是配置表单项和提交接口API。

表单展示

首先展示默认模式：

其代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-text",
        "name": "name",
        "label": "姓名："
      },
      {
        "name": "email",
        "type": "input-email",
        "label": "邮箱："
      }
    ]
  }
}

只需要对其加入一些方法就可以改变其模式以及其他功能。

首先就是设置水平。

我们可以在mode中添加horizontal是表单水平，也可以通过配置horizontal的属性使其调整偏移量，格式如下：

"horizontal": {
    "left": 2,
    "right": 6,
    "offset": 2
}

如图：

通过上面的配置可以看出来水平布局其实按比率分配的。实际上有时候固定左侧宽度更好看点。 可以通过leftFixed进行改动配置 'xs' | 'sm' | 'md' | 'lg' 来定义左侧 label 的宽度。

两端对齐

有时表单内容需要两端对齐，可在 horizontal 中增加 justify 配置，注意只对内联控件生效。

label对齐模式

 水平模式下 labelAlign 可以设置标签文本的对齐方式，支持right和left，默认为right。该属性的优先级：表单项 > 表单

内联模式（inline） 

内联模式主要展示表单项。

如果需要实现一行展示多个表单项：有两种方法，一个是通过columnCount来控制表单显示几列。另一个方法是使用 group，它能实现每行显示不同列数，以及不同列的宽度分配情况，可以实现更灵活的控制。

参考文档Form 表单 (baidu.com)https://aisuda.bce.baidu.com/amis/zh-CN/components/form/index