Space间距

设置组件之间的间距。

何时使用#

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

适合行内元素的水平间距。
可以设置各种水平对齐方式。

代码演示

Space

基本用法

相邻组件水平间距。

TypeScript
JavaScript
import { UploadOutlined } from 'infra-design-icons';
import { Button, Popconfirm, Space, Upload } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <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>
);

export default App;

Card

Card content

Card

Card content

Card

Card content

垂直间距

相邻组件垂直间距。

TypeScript
JavaScript
import { Card, Space } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
    <Card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </Card>
    <Card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </Card>
    <Card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </Space>
);

export default App;

SmallMiddleLarge

间距大小

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

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

TypeScript
JavaScript
import { Button, Radio, Space } from 'infrad';
import type { SpaceSize } from 'infrad/es/space';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [size, setSize] = useState<SpaceSize | [SpaceSize, SpaceSize]>('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>
    </>
  );
};

export default App;

center

Block

start

Block

end

Block

baseline

Block

对齐

设置对齐模式。

TypeScript
JavaScript
import { Button, Space } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <div className="space-align-container">
    <div className="space-align-block">
      <Space align="center">
        center
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
    <div className="space-align-block">
      <Space align="start">
        start
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
    <div className="space-align-block">
      <Space align="end">
        end
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
    <div className="space-align-block">
      <Space align="baseline">
        baseline
        <Button type="primary">Primary</Button>
        <span className="mock-block">Block</span>
      </Space>
    </div>
  </div>
);

export default App;
.space-align-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.space-align-block {
  flex: none;
  margin: 8px 4px;
  padding: 4px;
  border: 1px solid #40a9ff;
}
.space-align-block .mock-block {
  display: inline-block;
  padding: 32px 8px 16px;
  background: rgba(150, 150, 150, 0.2);
}

自定义尺寸

自定义间距大小。

TypeScript
JavaScript
import { Button, Slider, Space } from 'infrad';
import React, { useState } from 'react';

const App: React.FC = () => {
  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>
    </>
  );
};

export default App;

自动换行

自动换行。

TypeScript
JavaScript
import { Button, Space } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <Space size={[8, 16]} wrap>
    {new Array(20).fill(null).map((_, index) => (
      // eslint-disable-next-line react/no-array-index-key
      <Button key={index}>Button</Button>
    ))}
  </Space>
);

export default App;

Link

分隔符

相邻组件分隔符。

TypeScript
JavaScript
import { Divider, Space, Typography } from 'infrad';
import React from 'react';

const App: React.FC = () => (
  <Space split={<Divider type="vertical" />}>
    <Typography.Link>Link</Typography.Link>
    <Typography.Link>Link</Typography.Link>
    <Typography.Link>Link</Typography.Link>
  </Space>
);

export default App;

API#

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

Size#

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