ant-design/components/button/demo/button-group.md

74 lines
1.6 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 6
title:
zh-CN: 按钮组合
en-US: Button Group
2016-03-31 09:40:55 +08:00
---
## zh-CN
2015-11-03 14:25:36 +08:00
可以将多个 `Button` 放入 `Button.Group` 的容器中。
2015-06-07 14:03:00 +08:00
通过设置 `size``large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`,则尺寸为中。
## 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-25 11:04:56 +08:00
The `size` can be set to `large`, `small` or left unset resulting in a default size.
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;
ReactDOM.render(
<div>
<h4>Basic</h4>
<ButtonGroup>
<Button>Cancel</Button>
<Button>OK</Button>
</ButtonGroup>
<ButtonGroup>
<Button disabled>L</Button>
<Button disabled>M</Button>
<Button disabled>R</Button>
</ButtonGroup>
<ButtonGroup>
<Button>L</Button>
<Button>M</Button>
<Button>R</Button>
</ButtonGroup>
2015-10-06 12:55:01 +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>