在ant设计中,可以在保持<Form.Item>
的layout="垂直"
的同时为几个表单设置layout="水平"
。
在ant设计中,可以使用<Row>
和<Col>
来创建表单的水平布局。在<Form.Item>
中嵌套<Row>
,然后在<Row>
中使用多个<Col>
来放置表单项,即可实现表单的水平布局。
以下是一个示例代码:
import { Form, Row, Col, Input, Button } from 'antd';
const DemoForm = () => {
return (
<Form layout="vertical">
<Form.Item label="姓名">
<Input />
</Form.Item>
<Form.Item label="年龄">
<Input />
</Form.Item>
<Form.Item label="地址">
<Input />
</Form.Item>
<Form.Item>
<Row>
<Col span={8}>
<Button type="primary">保存</Button>
</Col>
<Col span={8}>
<Button>取消</Button>
</Col>
<Col span={8}>
<Button>重置</Button>
</Col>
</Row>
</Form.Item>
</Form>
);
};
export default DemoForm;
在上面的示例中,<Form>
的layout
属性设置为"vertical"
,表示整个表单的布局方式为垂直布局。然后,在每个表单项的<Form.Item>
中,使用<Row>
来创建一个水平布局的行,然后在每个行中使用<Col>
来放置表单项。
最后,在表单的最后一项中,使用<Row>
和<Col>
来放置按钮,实现按钮的水平布局。
这样,我们就可以在保持<Form.Item>
的layout="垂直"
的同时为几个表单设置layout="水平"
。
领取专属 10元无门槛券
手把手带您无忧上云