如何自定义 Ant Design 的表单？

Question

我正在尝试使用 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.

谁能指导我，如何实现？

Answer 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>

Answer 2

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