mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-03 00:09:39 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
1.2 KiB
1.2 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';
import type { SpaceSize } from 'antd/es/space';
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;