如何自定义 Ant 设计的表格？

Question

I am trying to make inline form design using ant design but I am not able to make it customised version. I have attached the code, image of output from the code and what I want form should look like. Here is the code:

 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.

Can anyone guide me, how to achieve it?

Answer 1

1 - The value of offset and span follow the rules of Antd Grid Layout system and it cannot be more than 24 (24 columns).

2 - Adding labelCol and wrapperCol on the Form element will apply the same layout for Every fields. As you'r desired deisgn, each fields has a different layout, so you'll need to apply it on each

3 - layout="inline" on Form means that they will just be all inline

Finally, the layout system on Antd Form is good to have vertically aligned fields. If you want to have a full control of the field display, you have to wrap each field your self and use custom style or Antd Grid columns.

You may need something like this:
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

In my opinion try to avoid in-line style, add className to every component (even from Ant.) then in the CSS play with position (looks like you want flex and margin/padding)