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 { Space, Button } from 'antd';
ReactDOM.render(
<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>,
mountNode,
);
.space-align-container {
display: flex;
align-item: flex-start;
flex-wrap: wrap;
}
.space-align-block {
margin: 8px 4px;
border: 1px solid #40a9ff;
padding: 4px;
flex: none;
}
.space-align-block .mock-block {
display: inline-block;
padding: 32px 8px 16px;
background: rgba(150, 150, 150, 0.2);
}
自定义间距大小。
import React, { useState } from 'react';
import { Space, Slider, Button } from 'antd';
function SpaceCustomizeSize() {
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(<SpaceCustomizeSize />, mountNode);
自动换行。
import { Space, Button } from 'antd';
const Demo = () => (
<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>
);
ReactDOM.render(<Demo />, mountNode);
相邻组件分隔符。
import { Space, Typography, Divider } from 'antd';
function SpaceSplit() {
return (
<Space split={<Divider type="vertical" />}>
<Typography.Link>Link</Typography.Link>
<Typography.Link>Link</Typography.Link>
<Typography.Link>Link</Typography.Link>
</Space>
);
}
ReactDOM.render(<SpaceSplit />, mountNode);
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