如何自定义 Ant Design 的表单？

Posted 2023-02-18

【中文标题】如何自定义 Ant Design 的表单？

【英文标题】：How can I customised the form of Ant Design?

【发布时间】：2021-05-20 22:21:57

【问题描述】：

我正在尝试使用 ant design 进行内联表单设计，但我无法制作自定义版本。 我附上了代码、代码输出的图像以及我想要的表单应该是什么样子。 代码如下：

 const layout = 
  labelCol:  span: 8 ,
  wrapperCol:  span: 16 ,
;
const layoutInline =
  labelCol: 
    sm: 
      offset: 0,
      span: 20,
      ,
  ,
  wrapperCol: 
    sm: 
    offset: 30,
    span: 30,
    ,
    
  ,


  return (
    <div style=width: "70%", padding: "4%">
      <div>
   <Form
     ...layoutInline
      form=form

      layout="inline"
  
     
  
    >
 
      <Form.Item label="Full Name" tooltip="This is a required field">
        <Input placeholder="Full Name" />
      </Form.Item>
      <Form.Item
        label="Age"
       
        tooltip=
          title: 'Tooltip with customize icon',
          icon: <InfoCircleOutlined />,
        
        onChange=updateAge
        value=age
      >
        <Input placeholder="input placeholder" />
      </Form.Item>
      <Form.Item name="gender" label="Gender" rules=[ required: true ]>
        <Select
          placeholder="Select an option"
          onChange=updateGender
          allowClear
        >
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>
      /* <Form.Item label="Full Name" tooltip="This is a required field">
        <p>gender age ethnicity AST platelets ASTupper ALT HBVDNA report</p>
      </Form.Item> */
      <Form.Item name="Ethnicity" label="Ethnicity" rules=[ required: true ]>
        <Select
          placeholder="Select an option"
          onChange=updateEthnicity
          allowClear
        >
          <Option value="South-East-Asian">South East Asian</Option>
          <Option value="South-Asian">South-Asian</Option>
          <Option value="African">African</Option>
          <Option value="Other">Other</Option>
        </Select>
      </Form.Item>

    </Form>
      </div>

It is coming out on the page like this.

What I want is that should look like this.

谁能指导我，如何实现？

【参考方案1】：

1 - offset 和 span 的值遵循 Antd Grid Layout 系统的规则，不能超过 24（24 列）。

2 - 在Form 元素上添加labelCol 和wrapperCol 将为每个字段应用相同的布局。如您所愿，每个字段都有不同的布局，因此您需要在每个字段上应用它

3 - layout="inline" 在 Form 上意味着它们将全部内联

最后，Antd Form 上的布局系统最好有垂直对齐的字段。如果您想完全控制字段显示，则必须自己包装每个字段并使用自定义样式或 Antd Grid 列。

你可能需要这样的东西：https://codesandbox.io/s/form-methods-antd4123-forked-xo3zp?file=/index.js:922-2483

<Form form=form>
  <Row>
    * sm is only a breakpoint, you may need to add some more for better responsive *
    <Col sm=14>
      <Form.Item label="Full Name" tooltip="This is a required field">
        <Input placeholder="Full Name" />
      </Form.Item>
    </Col>
    <Col sm= offset: 2, span: 8 >
      <Form.Item label="Age">
        <Input placeholder="input placeholder" />
      </Form.Item>
    </Col>
  </Row>
  <Row>
    <Col sm=8>
      <Form.Item
        name="gender"
        label="Gender"
        rules=[ required: true ]
      >
        <Select placeholder="Select an option" allowClear>
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>
    </Col>
    <Col sm= offset: 2, span: 8 >
      <Form.Item
        name="Ethnicity"
        label="Ethnicity"
        rules=[ required: true ]
      >
        <Select placeholder="Select an option" allowClear>
          <Option value="South-East-Asian">South East Asian</Option>
          <Option value="South-Asian">South-Asian</Option>
          <Option value="African">African</Option>
          <Option value="Other">Other</Option>
        </Select>
      </Form.Item>
    </Col>
  </Row>
</Form>

【参考方案2】：

在我看来，尽量避免内联样式，将 className 添加到每个组件（甚至来自 Ant。）然后在 CSS 中使用位置（看起来你想要 flex 和 margin/padding）

【讨论】：

嗯 _ 这不是一个真正的答案，看起来更像是应该添加到问题帖子底部的评论 _ 你所写的内容不包含任何特定于解决问题的内容问题，正如您所说的“您的意见”_请访问 SO 帮助中心并阅读以下内容 >>> ***.com/help/how-to-answer