Ant Design表单如何实现响应式布局?
How to implement responsive layout in Ant Design form?
在使用 ant design form 时,我遇到了严重的响应问题。
import { From, Input, Button } from 'antd'
const { Item } = Form;
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
const ExampleAntForm = () => {
{
return (
<Form {...layout}>
<Item label="Name" name="username"> <Input type="text"/> </Item>
<Item label="Password" name="password"> <Input type="password"/> </Item>
<Item {...tailLayout}>
<Button htmlType="submit" type="primary"> Submit </Button>
</Item>
</Form>
)
}
但在这种情况下,我想根据屏幕尺寸应用布局。
理想情况如下,
const layout = {
labelCol = { span: { sm: 24, md: 8, lg: 6 }}
wrapperCol = { span: { sm: 24, md: 16, lg: 12 }}
}
如何使用 ant design Form
组件中的 layout
道具来处理这种响应?
或者让我知道我的问题的任何其他可能的解决方案。
使用Ant Design预定义布局,有助于让你的表单自动响应,
这是一个 link 以获取更多信息
https://ant.design/components/layout
我们可以像下面这样修改布局
const layout = {
labelCol: { xs: { span: 24 }, sm: { span: 12 }, md: { span: 8 }, lg: { span: 8 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 12 }, md: { span: 12 }, lg: { span: 12 } }
}
const tailLayout = {
wrapperCol: { xs: { span: 24 }, sm: { span: 12, offset: 12 }, md: { span: 12, offset: 8 }, lg: { span: 12, offset: 8 } }
};
在使用 ant design form 时,我遇到了严重的响应问题。
import { From, Input, Button } from 'antd'
const { Item } = Form;
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
const ExampleAntForm = () => {
{
return (
<Form {...layout}>
<Item label="Name" name="username"> <Input type="text"/> </Item>
<Item label="Password" name="password"> <Input type="password"/> </Item>
<Item {...tailLayout}>
<Button htmlType="submit" type="primary"> Submit </Button>
</Item>
</Form>
)
}
但在这种情况下,我想根据屏幕尺寸应用布局。
理想情况如下,
const layout = {
labelCol = { span: { sm: 24, md: 8, lg: 6 }}
wrapperCol = { span: { sm: 24, md: 16, lg: 12 }}
}
如何使用 ant design Form
组件中的 layout
道具来处理这种响应?
或者让我知道我的问题的任何其他可能的解决方案。
使用Ant Design预定义布局,有助于让你的表单自动响应, 这是一个 link 以获取更多信息 https://ant.design/components/layout
我们可以像下面这样修改布局
const layout = {
labelCol: { xs: { span: 24 }, sm: { span: 12 }, md: { span: 8 }, lg: { span: 8 } },
wrapperCol: { xs: { span: 24 }, sm: { span: 12 }, md: { span: 12 }, lg: { span: 12 } }
}
const tailLayout = {
wrapperCol: { xs: { span: 24 }, sm: { span: 12, offset: 12 }, md: { span: 12, offset: 8 }, lg: { span: 12, offset: 8 } }
};