AntDesign Form表单栅格

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AntDesign Form表单栅格相关的知识,希望对你有一定的参考价值。

参考技术A 需要实现的效果:

表单布局:

栅格计算:

页面宽度 xs 尺寸时,整行铺满,所以都设置为 24

页面宽度 sm 尺寸时,标题占6,输入框占 14,将表单划分为 1 列标题 + 5 列输入项:布局为 6 : ( 1+4+3+3+3 ) = 6 : 14

其中,标题增加 requiredLable 样式,各列下的 FormItem 增加 100% 宽度样式

最终效果:

以上是关于AntDesign Form表单栅格的主要内容,如果未能解决你的问题,请参考以下文章

ant design form表单的时间处理

form.validateFields() 在 ant 设计表单中的 onValuesChange 内失败

form表单

ant design 4版本form表单默认值

antDesign获取表单组件的值

HTMLHTML 表单 ⑤ ( form 表单域 )