Search code examples
reactjsantd

AntD Text Alignment similar to Form

Is there an AntD component that has a similar alignment as Form but only displays text? So I'd like to display data from a form, use the alignment of label and related text similar to the proposed Form alignment here: https://4x.ant.design/docs/spec/alignment (My purpose is just to display the data, I'm not using any form here)

Of course it is always possible to build such a feature on my own: I'd create a 2-column layout with right aligned labels in the first and the data itself in the second:

<Row>
    <Col span={18} push={6}>
      Label 1:
    </Col>
    <Col span={6} pull={18}>
      Text 1
    </Col>
</Row>
<Row>
    <Col span={18} push={6}>
      Label 2:
    </Col>
    <Col span={6} pull={18}>
      Text 2
    </Col>
</Row>

But before I solve this that way, I'd ask if there is any component similar to the form-layout I missed in a AntD that fulfills exactly this need.

Solution

  • You can check the following example using <Form> component. It will have similar alignment like how you want (like a form).

    App.tsx

    import React from "react";
import "./index.css";
import { Form } from "antd";

const App: React.FC = () => {
  return (
    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
      <Form.Item label="Username">johnsmit123</Form.Item>
      <Form.Item label="Name">John smith</Form.Item>
      <Form.Item label="Age">30</Form.Item>
      <Form.Item label="Address 1">
        Suzy Queue 4455 Landing Lange, APT 4 Louisville, KY 40018-1234
      </Form.Item>
      <Form.Item label="Address 2">
        ATTN: Dennis Menees, CEO Global Co. 90210 Broadway Blvd. Nashville, TN
        37011-5678
      </Form.Item>
    </Form>
  );
};

export default App;

    you can replace the hardcoded values with dynamic values if needed

    <Form.Item label="Username">{value.username}</Form.Item>

    Output: Image