mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-26 20:20:00 +08:00
b8109bd20e
* feat: new component: Space * add config-provider space doc * fix lint fail * revert test -u * improve demo * compatible invalidElement * use inline-flex and wrap * review change * add space version * improve classname * review change * review change
1.1 KiB
1.1 KiB
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
间距预设大、中、小三种大小。
通过设置 size
为 large
middle
分别把间距设为大、中间距。若不设置 size
,则间距为小。
en-US
large
, middle
and small
preset sizes.
Set the size to large
and middle
by setting size to large and middle respectively. If size
is not set, the spacing is small
.
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);