reactjs AntD文本对齐方式类似于表格

lmvvr0a8 于 2023-01-02 发布在 React

关注(0)|答案(1)|浏览(225)

是否有AntD组件具有与Form类似的对齐方式，但只显示文本？因此，我希望显示来自表单的数据，使用与此处建议的Form对齐方式类似的标签和相关文本的对齐方式：https://4x.ant.design/docs/spec/alignment（我的目的只是显示数据，这里没有使用任何表单）
当然，我自己总是可以构建这样的特性：我会创建一个2列布局，第一列标签右对齐，第二列是数据本身：

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

但是在我用这种方法解决这个问题之前，我想问一下是否有任何组件与我在AntD中遗漏的表单布局类似，可以完全满足这个需求。

reactjs

来源：https://stackoverflow.com/questions/74951821/antd-text-alignment-similar-to-form

1条答案

按热度按时间

wgx48brx1#

你可以使用<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;

如果需要，可以用动态值替换硬编码值

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

输出：

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs AntD文本对齐方式类似于表格

1条答案

相关问题

热门标签

最新问答