ant-design/components/form/demo/layout-multiple.tsx
叶枫 2119e2d560
feat: Form.Item support layout 3 (#49152)
* feat: Form.Item support layout 3

* feat: test

* feat: antCls

* feat: CSSObject
2024-05-31 14:46:22 +08:00

49 lines
1.1 KiB
TypeScript

import React from 'react';
import { Form, Input } from 'antd';
const App: React.FC = () => (
<>
<Form
name="layout-multiple-horizontal"
layout="horizontal"
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
>
<Form.Item label="horizontal" name="horizontal" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item
layout="vertical"
label="vertical"
name="vertical"
rules={[{ required: true }]}
labelCol={{ span: 24 }}
wrapperCol={{ span: 24 }}
>
<Input />
</Form.Item>
</Form>
<br />
<Form
name="layout-multiple-vertical"
layout="vertical"
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
>
<Form.Item label="vertical" name="vertical" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item
layout="horizontal"
label="horizontal"
name="horizontal"
rules={[{ required: true }]}
>
<Input />
</Form.Item>
</Form>
</>
);
export default App;