2016-03-31 09:40:55 +08:00
|
|
|
---
|
2017-01-23 22:24:36 +08:00
|
|
|
order: 6
|
2016-04-22 14:52:19 +08:00
|
|
|
title:
|
|
|
|
zh-CN: 按钮组合
|
|
|
|
en-US: Button Group
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2015-06-05 20:26:41 +08:00
|
|
|
|
2016-04-22 14:52:19 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2015-11-03 14:25:36 +08:00
|
|
|
可以将多个 `Button` 放入 `Button.Group` 的容器中。
|
2015-06-07 14:03:00 +08:00
|
|
|
|
2015-10-22 21:01:52 +08:00
|
|
|
通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`,则尺寸为中。
|
2015-06-05 20:26:41 +08:00
|
|
|
|
2016-04-22 14:52:19 +08:00
|
|
|
## en-US
|
|
|
|
|
2016-04-25 11:04:56 +08:00
|
|
|
Buttons can be grouped by placing multiple `Button` components into a `Button.Group`.
|
2016-04-22 14:52:19 +08:00
|
|
|
|
2016-04-25 11:04:56 +08:00
|
|
|
The `size` can be set to `large`, `small` or left unset resulting in a default size.
|
2016-04-22 14:52:19 +08:00
|
|
|
|
2017-02-13 10:55:53 +08:00
|
|
|
````jsx
|
2015-11-03 14:25:36 +08:00
|
|
|
import { Button, Icon } from 'antd';
|
|
|
|
const ButtonGroup = Button.Group;
|
2015-10-02 15:04:28 +08:00
|
|
|
|
2016-04-22 14:52:19 +08:00
|
|
|
ReactDOM.render(
|
|
|
|
<div>
|
|
|
|
<h4>Basic</h4>
|
|
|
|
<ButtonGroup>
|
|
|
|
<Button>Cancel</Button>
|
2017-11-06 21:14:40 +08:00
|
|
|
<Button>OK</Button>
|
2016-04-22 14:52:19 +08:00
|
|
|
</ButtonGroup>
|
|
|
|
<ButtonGroup>
|
|
|
|
<Button disabled>L</Button>
|
|
|
|
<Button disabled>M</Button>
|
|
|
|
<Button disabled>R</Button>
|
|
|
|
</ButtonGroup>
|
|
|
|
<ButtonGroup>
|
2017-11-06 21:14:40 +08:00
|
|
|
<Button>L</Button>
|
2016-04-22 14:52:19 +08:00
|
|
|
<Button>M</Button>
|
2017-11-06 21:14:40 +08:00
|
|
|
<Button>R</Button>
|
2016-04-22 14:52:19 +08:00
|
|
|
</ButtonGroup>
|
2015-10-06 12:55:01 +08:00
|
|
|
|
2016-04-22 14:52:19 +08:00
|
|
|
<h4>With Icon</h4>
|
|
|
|
<ButtonGroup>
|
|
|
|
<Button type="primary">
|
|
|
|
<Icon type="left" />Go back
|
|
|
|
</Button>
|
|
|
|
<Button type="primary">
|
|
|
|
Go forward<Icon type="right" />
|
|
|
|
</Button>
|
|
|
|
</ButtonGroup>
|
|
|
|
<ButtonGroup>
|
|
|
|
<Button type="primary" icon="cloud" />
|
|
|
|
<Button type="primary" icon="cloud-download" />
|
|
|
|
</ButtonGroup>
|
|
|
|
</div>,
|
|
|
|
mountNode
|
|
|
|
);
|
2015-06-08 12:32:09 +08:00
|
|
|
````
|
|
|
|
|
2016-04-25 14:35:54 +08:00
|
|
|
<style>
|
2015-10-30 17:04:22 +08:00
|
|
|
#components-button-demo-button-group h4 {
|
|
|
|
margin: 16px 0;
|
|
|
|
font-size: 14px;
|
|
|
|
line-height: 1;
|
2015-06-15 22:14:15 +08:00
|
|
|
font-weight: normal;
|
2015-06-15 19:33:39 +08:00
|
|
|
}
|
2015-10-30 17:04:22 +08:00
|
|
|
#components-button-demo-button-group h4:first-child {
|
2015-06-08 12:32:09 +08:00
|
|
|
margin-top: 0;
|
|
|
|
}
|
2015-09-27 16:30:35 +08:00
|
|
|
#components-button-demo-button-group .ant-btn-group {
|
|
|
|
margin-right: 8px;
|
|
|
|
}
|
2016-04-25 14:35:54 +08:00
|
|
|
</style>
|