Space间距

设置组件之间的间距。

何时使用

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

  • 适合行内元素的水平间距。

  • 可以设置各种水平对齐方式。

代码演示

Space间距 - 图1

基本用法

相邻组件水平间距。

  1. import { Button, Space, Upload, Popconfirm } from 'antd';
  2. import { UploadOutlined } from '@ant-design/icons';
  3. function SpaceDemo() {
  4. return (
  5. <Space>
  6. Space
  7. <Button type="primary">Button</Button>
  8. <Upload>
  9. <Button>
  10. <UploadOutlined /> Click to Upload
  11. </Button>
  12. </Upload>
  13. <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
  14. <Button>Confirm</Button>
  15. </Popconfirm>
  16. </Space>
  17. );
  18. }
  19. ReactDOM.render(<SpaceDemo />, mountNode);

Space间距 - 图2

垂直间距

相邻组件垂直间距。

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

  1. import { Space, Card } from 'antd';
  2. function SpaceVertical() {
  3. return (
  4. <Space direction="vertical">
  5. <Card title="Card" style={{ width: 300 }}>
  6. <p>Card content</p>
  7. <p>Card content</p>
  8. </Card>
  9. <Card title="Card" style={{ width: 300 }}>
  10. <p>Card content</p>
  11. <p>Card content</p>
  12. </Card>
  13. </Space>
  14. );
  15. }
  16. ReactDOM.render(<SpaceVertical />, mountNode);

Space间距 - 图3

间距大小

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

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

  1. import React, { useState } from 'react';
  2. import { Space, Radio, Button } from 'antd';
  3. function SpaceSize() {
  4. const [size, setSize] = useState('small');
  5. return (
  6. <>
  7. <Radio.Group value={size} onChange={e => setSize(e.target.value)}>
  8. <Radio value="small">Small</Radio>
  9. <Radio value="middle">Middle</Radio>
  10. <Radio value="large">Large</Radio>
  11. </Radio.Group>
  12. <br />
  13. <br />
  14. <Space size={size}>
  15. <Button type="primary">Primary</Button>
  16. <Button>Default</Button>
  17. <Button type="dashed">Dashed</Button>
  18. <Button type="link">Link</Button>
  19. </Space>
  20. </>
  21. );
  22. }
  23. ReactDOM.render(<SpaceSize />, mountNode);

Space间距 - 图4

对齐

设置对齐模式。

  1. import { Space, Button } from 'antd';
  2. ReactDOM.render(
  3. <div className="space-align-container">
  4. <div className="space-align-block">
  5. <Space align="center">
  6. center
  7. <Button type="primary">Primary</Button>
  8. <span className="mock-block">Block</span>
  9. </Space>
  10. </div>
  11. <div className="space-align-block">
  12. <Space align="start">
  13. start
  14. <Button type="primary">Primary</Button>
  15. <span className="mock-block">Block</span>
  16. </Space>
  17. </div>
  18. <div className="space-align-block">
  19. <Space align="end">
  20. end
  21. <Button type="primary">Primary</Button>
  22. <span className="mock-block">Block</span>
  23. </Space>
  24. </div>
  25. <div className="space-align-block">
  26. <Space align="baseline">
  27. baseline
  28. <Button type="primary">Primary</Button>
  29. <span className="mock-block">Block</span>
  30. </Space>
  31. </div>
  32. </div>,
  33. mountNode,
  34. );
  1. .space-align-container {
  2. display: flex;
  3. flex-wrap: wrap;
  4. align-items: flex-start;
  5. }
  6. .space-align-block {
  7. flex: none;
  8. margin: 8px 4px;
  9. padding: 4px;
  10. border: 1px solid #40a9ff;
  11. }
  12. .space-align-block .mock-block {
  13. display: inline-block;
  14. padding: 32px 8px 16px;
  15. background: rgba(150, 150, 150, 0.2);
  16. }

Space间距 - 图5

自定义尺寸

自定义间距大小。

  1. import React, { useState } from 'react';
  2. import { Space, Slider, Button } from 'antd';
  3. function SpaceCustomizeSize() {
  4. const [size, setSize] = useState(8);
  5. return (
  6. <>
  7. <Slider value={size} onChange={value => setSize(value)} />
  8. <br />
  9. <br />
  10. <Space size={size}>
  11. <Button type="primary">Primary</Button>
  12. <Button>Default</Button>
  13. <Button type="dashed">Dashed</Button>
  14. <Button type="link">Link</Button>
  15. </Space>
  16. </>
  17. );
  18. }
  19. ReactDOM.render(<SpaceCustomizeSize />, mountNode);

Space间距 - 图6

自动换行

自动换行。

  1. import { Space, Button } from 'antd';
  2. const Demo = () => (
  3. <Space size={[8, 16]} wrap>
  4. {new Array(20).fill(null).map((_, index) => (
  5. // eslint-disable-next-line react/no-array-index-key
  6. <Button key={index}>Button</Button>
  7. ))}
  8. </Space>
  9. );
  10. ReactDOM.render(<Demo />, mountNode);

Space间距 - 图7

分隔符

相邻组件分隔符。

  1. import { Space, Typography, Divider } from 'antd';
  2. function SpaceSplit() {
  3. return (
  4. <Space split={<Divider type="vertical" />}>
  5. <Typography.Link>Link</Typography.Link>
  6. <Typography.Link>Link</Typography.Link>
  7. <Typography.Link>Link</Typography.Link>
  8. </Space>
  9. );
  10. }
  11. ReactDOM.render(<SpaceSplit />, mountNode);

API

参数说明类型默认值版本
align对齐方式start | end |center |baseline-4.2.0
direction间距方向vertical | horizontalhorizontal4.1.0
size间距大小Size | Size[]small4.1.0 | Array: 4.9.0
split设置拆分ReactNode-4.7.0
wrap是否自动换行,仅在 horizontal 时有效booleanfalse4.9.0

Size

'small' | 'middle' | 'large' | number