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

B 端物料组件库

---
title: 多行列表
order: 3
---

通用设计中多行form列表一般指定为4列列表

````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%' }} />
          <Input style={{ width: '100%' }} />
          <Input style={{ width: '100%' }} />
          <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 = `
    #multiForm {
      display: block !important;
    }
  `;
  const styleDom = document.createElement('style');
  styleDom.innerHTML = style;
  document.head.appendChild(styleDom);
}


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