pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

🐛[BUG] ProForm 的表单元素(例如ProFormText)layout未生效

Open maoyuehui opened this issue 3 months ago • 1 comments

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

Image Form的布局均为 layout="vertical",name为y的表单组件,传入了layout="horizontal"

ProFormText 却不能够按照horizontal 来布局,antd 可以按照horizontal布局

📷 复现步骤

 <ProForm layout="vertical">
        <ProFormText name="x" label="xxxxx"/>
        <ProFormText name="y" label="我因该是横行的" layout="horizontal"/>
      </ProForm>

      <Form layout="vertical" className='mt-[100px]'>
        <Form.Item name="x" label="xxxxx">
          <Input/>
        </Form.Item>
        <Form.Item name="y" label="我可以变成横向" layout="horizontal">
          <Input/>
        </Form.Item>
      </Form>

🏞 期望结果

💻 复现代码

© 版本信息

  • ProComponents 版本: 2.8.10
  • umi 版本
  • 浏览器环境
  • 开发环境 [e.g. mac OS]

🚑 其他信息

maoyuehui avatar Sep 11 '25 03:09 maoyuehui

ProFormText 不支持像 Ant Design 的 Form.Item 那样在字段级别单独设置 layout。ProForm 的布局(layout)只能在 ProForm 组件上统一设置,字段上的 layout 属性会被忽略,这是 ProComponents 的设计限制,并不是你的代码问题。相关源码社区讨论都证实了这一点。

如果你需要更灵活的布局,可以考虑用 Ant Design 的 Form.Item 或者在 ProForm 内用 Col 包裹字段,手动实现布局,但无法像 antd 那样直接切换字段 layout。

To reply, just mention @dosu.


How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Chat with Dosu Join Discord Share on X

dosubot[bot] avatar Sep 11 '25 03:09 dosubot[bot]