Space间距

设置组件之间的间距。

何时使用

避免组件紧贴在一起，拉开统一的空间。

代码演示

基本用法

相邻组件水平间距。

import { Button, Space, Upload, Popconfirm } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
function SpaceDemo() {
  return (
    <Space>
      Space
      <Button type="primary">Button</Button>
      <Upload>
        <Button>
          <UploadOutlined /> Click to Upload
        </Button>
      </Upload>
      <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
        <Button>Confirm</Button>
      </Popconfirm>
    </Space>
  );
}
ReactDOM.render(<SpaceDemo />, mountNode);

垂直间距

相邻组件垂直间距。

可以设置 width: 100% 独占一行。

import { Space, Card } from 'antd';
function SpaceVertical() {
  return (
    <Space direction="vertical">
      <Card title="Card" style={{ width: 300 }}>
        <p>Card content</p>
        <p>Card content</p>
      </Card>
      <Card title="Card" style={{ width: 300 }}>
        <p>Card content</p>
        <p>Card content</p>
      </Card>
    </Space>
  );
}
ReactDOM.render(<SpaceVertical />, mountNode);

间距大小

间距预设大、中、小三种大小。

通过设置 size 为 large middle 分别把间距设为大、中间距。若不设置 size，则间距为小。

import React, { useState } from 'react';
import { Space, Radio, Button } from 'antd';
function SpaceSize() {
  const [size, setSize] = useState('small');
  return (
    <>
      <Radio.Group value={size} onChange={e => setSize(e.target.value)}>
        <Radio value="small">Small</Radio>
        <Radio value="middle">Middle</Radio>
        <Radio value="large">Large</Radio>
      </Radio.Group>
      <br />
      <br />
      <Space size={size}>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
      </Space>
    </>
  );
}
ReactDOM.render(<SpaceSize />, mountNode);

自定义尺寸

自定义间距大小。

import React, { useState } from 'react';
import { Space, Slider, Button } from 'antd';
function SpaceCutomizeSize() {
  const [size, setSize] = useState(8);
  return (
    <>
      <Slider value={size} onChange={value => setSize(value)} />
      <br />
      <br />
      <Space size={size}>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
      </Space>
    </>
  );
}
ReactDOM.render(<SpaceCutomizeSize />, mountNode);

API