如何自定義 Ant 設計的表格？

Question

我正在嘗試使用 ant 設計進行內聯表單設計，但我無法使其成為定制版本。 我附上了代碼，代碼中的 output 的圖像，我想要的形式應該是這樣的。 這是代碼：

 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>

它像這樣出現在頁面上。

我想要的是應該看起來像這樣。

誰能指導我，如何實現？

Answer 1

1 - offset和span的值遵循 Antd Grid Layout 系統的規則，不能超過 24（24 列）。

2 - 在Form元素上添加labelCol和wrapperCol將為每個字段應用相同的布局。 如您所願，每個字段都有不同的布局，因此您需要將其應用於每個字段

3 - Form 上的layout="inline"意味着它們都將是內聯的

最后，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 中使用 position（看起來像你想要的邊距和邊距）