@aliretail/react-materials-components/demo/FormComponents/gridLayout-form-left.md

B 端物料组件库

---
title: GridLayout 表单布局组件 靠左
order: 12
---

在 GridLayout 布局中设置 align: 'left'参数，则排版靠左

```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alife/next';
import { FormComponents } from '@aliretail/react-materials-components';
import PowerEditor from '../../src/FormComponents/powerEditor';
const { setup, SchemaForm, SchemaMarkupField: Field, FormButtonGroup } = FormComponents;

setup({
  PowerEditor,
});

const App = () => {
  const [editable, setEditable] = useState(true);
  const [isPreview, setPreview] = useState(false);
  const [disabled, setDisabled] = useState(false);

  const extConfig = {
    isPreview,
    disabled,
  };

  return (
    <>
      <SchemaForm
        defaultValue={{
          age: 'label不显示内容情况',
          age1: 'isPreview状态',
          card: 'card',
          intro: '这是我的自我介绍, This is my self introduction',
          numberPicker: 111,
          numberPicker1: 222,
          datePicker: '2020-12-02',
          radioGroup: '2',
          weekDatePicker: '2020-49th',
          monthDatePicker: '2020-02',
          yearDatePicker: '2022',
          kind: '长度类型为s的输入框',
          checkboxGroup: ['5', '6'],
          PowerEditor: '富文本框内容<br/> preview状态未在业务中出现，所以未和ui统一规范',
        }}
        editable={editable}
        // 监听每个input内容修改
        onChange={console.log}
        // 监听Submit的点击事件
        onSubmit={(e) => {
          // 可以在这里访问接口
          console.log(e);
        }}
        schema={{
          type: 'object',
          properties: {
            gridLayout: {
              type: 'object',
              'x-component': 'GridLayout',
              'x-component-props': {
                isForm: true,
                align: 'left',
              },
              properties: {
                age: {
                  title: '',
                  'x-component': 'Input',
                  required: true,
                  'x-component-props': {
                    placeholder: '请输入您的年龄',
                    ...extConfig,
                  },
                },
                intro: {
                  title: '介绍',
                  'x-component': 'TextArea',
                  required: true,
                  'x-component-props': {
                    ...extConfig,
                    maxLength: 20,
                  },
                },
                switch: {
                  title: 'switch',
                  'x-component': 'Switch',
                  'x-component-props': {
                    checkedChildren: '启用中',
                    unCheckedChildren: '禁用中',
                    ...extConfig,
                  },
                },
                card: {
                  title: <div style={{ color: 'red' }}>自定义标题</div>,
                  required: true,
                  'x-component': 'Input',
                  'retail-form-item-props': {
                    addonTextAfter: '后字',
                    inputAreaWidth: '50%',
                  },
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                numberPicker: {
                  'x-component': 'NumberPicker',
                  title: 'NumberPicker',
                  'retail-form-item-props': {
                    emphasizeExplanation: true,
                    explanation: '基础帮助信息',
                    addonTextAfter: '后面添加的文字',
                    inputAreaWidth: 200,
                  },
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                numberPicker1: {
                  'x-component': 'NumberPicker',
                  title: 'NumberPicker',
                  'retail-form-item-props': {
                    addonTextAfter: '后面添加的文字',
                  },
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                datePicker: {
                  'x-component': 'DatePicker',
                  title: 'DatePicker',
                  'x-component-props': {
                    title: 'DatePicker',
                    ...extConfig,
                  },
                },
                rangeDatePicker: {
                  'x-component': 'rangeDatePicker',
                  title: 'RangeDatePicker',
                  type: 'array',
                  'x-component-props': {
                    showTime: true,
                    title: 'RangeDatePicker',
                    ...extConfig,
                  },
                },
                weekDatePicker: {
                  'x-component': 'weekDatePicker',
                  title: 'weekDatePicker',
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                monthDatePicker: {
                  'x-component': 'monthDatePicker',
                  title: 'monthDatePicker',
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                yearDatePicker: {
                  'x-component': 'yearDatePicker',
                  title: 'yearDatePicker',
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                kind: {
                  title: '类目',
                  enum: ['a', 'b', 'c'],
                  required: true,
                  'x-component': 'Select',
                  'retail-form-item-props': {
                    explanation: '基础帮助信息',
                    inputAreaWidth: 's',
                  },
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                age1: {
                  title: '年龄1',
                  'x-component': 'Input',
                  'retail-form-item-props': {
                    emphasizeExplanation: true,
                    explanation: '基础帮助信息',
                  },
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                overLength: {
                  title: '超出设置长度的label内容将会被自动收起',
                  'x-component': 'Input',
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                radioGroup: {
                  title: 'radio 按钮',
                  'x-component': 'RadioGroup',
                  enum: [
                    { label: 'Doe, a deer, a female deer', value: '1' },
                    { label: 'Ray, a drop of golden sun ', value: '2' },
                    { label: 'Me, a name I call myself', value: '3' },
                    { label: 'Far, a long, long way to run', value: '4' },
                  ],
                  required: true,
                  'x-component-props': {
                    ...extConfig,
                  },
                },
                checkboxGroup: {
                  title: 'checkbox 按钮',
                  'x-component': 'CheckboxGroup',
                  enum: [
                    { label: 'Sew, a needle pulling thread', value: '5' },
                    { label: 'La, a note to follow Sew', value: '6' },
                    { label: 'Tea, a drink with jam and bread', value: '7' },
                    { label: 'That will bring us back to Do', value: '7-1' },
                  ],
                  required: true,
                  'retail-form-item-props': {
                    inputAreaWidth: 400,
                  },
                  'x-component-props': {
                    limitStrLen: 24,
                    ...extConfig,
                  },
                },
                PowerEditor: {
                  'x-component': 'PowerEditor',
                  title: '商品文描',
                  'x-component-props': {
                    ...extConfig,
                  },
                },
              },
            },
          },
        }}
      />
      <Button
        onClick={() => {
          setEditable(!editable);
        }}
        disabled={isPreview || disabled}
      >
        切换{editable ? 'readonly' : '编辑'}状态
      </Button>

      <Button
        onClick={() => {
          setPreview(!isPreview);
        }}
        disabled={!editable || disabled}
      >
        切换{isPreview ? '编辑' : 'isPreview'}状态
      </Button>

      <Button
        onClick={() => {
          setDisabled(!disabled);
        }}
        disabled={!editable || isPreview}
      >
        切换{disabled | isPreview ? '编辑' : 'disabled'}状态
      </Button>
    </>
  );
};

ReactDOM.render(<App />, mountNode);
```