使Antd Form 表单组件在一行显示
form 表单在一行显示一、通过栅格布局二、wrapperCol 属性三、layout=“inline”表单布局
·
一、通过栅格布局
使用单一的一组 Row 和 Col 栅格组件,创建一个基本的栅格系统
<Row gutter={16}>
<Col span={8}>
<Item name="A">
<InputNumber style={{ width: 80 }} placeholder="Min" disabled={_disabled} />
</Item>
</Col>
<Col span={8}>
<Item name="B">
<InputNumber style={{ width: 80 }} placeholder="Max" disabled={_disabled} />
</Item>
</Col>
</Row>;
二、layout 表单布局
layout 有三个可选值 horizontal(水平) | vertical(垂直) | inline(内联)
layout=“inline” 内联登录栏
<Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
<Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item shouldUpdate>
{() => (
<Button
type="primary"
htmlType="submit"
disabled={
!form.isFieldsTouched(true) ||
!!form.getFieldsError().filter(({ errors }) => errors.length).length
}
>
Log in
</Button>
)}
</Form.Item>
</Form>;
更多推荐
已为社区贡献11条内容
所有评论(0)