@aliretail/react-materials-components/demo/Form/customForm.md

B 端物料组件库

---
title: 自定义form布局
order: 4
---

可以设置自元素的 colSpan 和 rowSpan 自定义form布局

````jsx
import React from 'react';
import { Input, Checkbox, Button } from '@alifd/next';
import { Form } from '@aliretail/react-materials-components';

addStyle();

class Demo extends React.Component {
  render() {
    return (
      <div>
        <Form cols={4}>
          <Input style={{ width: '100%' }} colSpan={2}/>
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%', height: '100%' }} rowSpan={2}/>
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
        </Form>
      </div>
    );
  }
}

function addStyle() {
  const style = `
    #customForm {
      display: block !important;
    }
  `;
  const styleDom = document.createElement('style');
  styleDom.innerHTML = style;
  document.head.appendChild(styleDom);
}


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