Antd Form 一行多个 Form.Item 组件

更新日期: 2021-06-03 阅读次数: 115 分类: ReactJS

在使用 Antd Form 时,当 Form 的宽度很宽,一行只显示一个 input 时,感觉空间有点浪费。 一行能同时显示两个 input 输入框就好了,例如,同时显示:

  • 姓名
  • 电话

Form 中的示例

<Row gutter={24}>{getFields()}</Row>
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          <Button type="primary" htmlType="submit">
            Search
          </Button>

来自

https://ant.design/components/form-cn/

row col

row col 是 Antd Grid 栅格引入的组件。参考:

https://ant.design/components/grid-cn/

  • row:一行为 24 等分
  • col: span 控制占用的水平空间,例如 span 为 8 则占三分之一,span 为 24 则占一整行。

gutter 是什么?

gutter 中文翻译是排水沟,槽的意思。

在 Row 组件中设置 gutter 值,即两个 Item 的间距,单位为 px。

简写方式,即水平和垂直方向的间距都是 24px。

<Row gutter={24}>

如果水平和垂直方向需要不同的配置,可以单独指定。第一个参数为水平,第二个参数为垂直。

<Row gutter={[16, 8]}>

示例代码

<Row gutter={18}>
  <Col span={12}>
	<Form.Item name="name" label="用户姓名" rules={[{ required: true }]}>
		<Input />
	</Form.Item>
  </Col>
  <Col span={12}>
	<Form.Item name="tel" label="用户电话" rules={[{ required: true }]}>
		<Input />
	</Form.Item>
  </Col>
</Row>

爱评论不评论