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

63 lines
1.6 KiB
Markdown
Raw Normal View History

2018-01-24 22:53:45 +08:00
<cn>
#### 按钮组合
可以将多个 `Button` 放入 `Button.Group` 的容器中。
通过设置 `size``large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`,则尺寸为中。
</cn>
<us>
#### Button Group
Buttons can be grouped by placing multiple `Button` components into a `Button.Group`.
The `size` can be set to `large`, `small` or left unset resulting in a default size.
</us>
```html
2017-11-03 18:46:18 +08:00
<template>
<div id="components-button-demo-button-group">
<h4>Basic</h4>
2018-01-23 18:55:39 +08:00
<a-button-group>
<a-button>Cancel</a-button>
<a-button type="primary">OK</a-button>
</a-button-group>
<a-button-group>
<a-button disabled>L</a-button>
<a-button disabled>M</a-button>
<a-button disabled>R</a-button>
</a-button-group>
<a-button-group>
<a-button type="primary">L</a-button>
<a-button>M</a-button>
<a-button>M</a-button>
<a-button type="dashed">R</a-button>
</a-button-group>
2017-11-03 18:46:18 +08:00
<h4>With Icon</h4>
2018-01-23 18:55:39 +08:00
<a-button-group>
<a-button type="primary">
<a-icon type="left" />Go back
</a-button>
<a-button type="primary">
Go forward<a-icon type="right" />
</a-button>
</a-button-group>
<a-button-group>
<a-button type="primary" icon="cloud" />
<a-button type="primary" icon="cloud-download" />
</a-button-group>
2017-11-03 18:46:18 +08:00
</div>
</template>
<style>
#components-button-demo-button-group h4 {
margin: 16px 0;
font-size: 14px;
line-height: 1;
font-weight: normal;
}
#components-button-demo-button-group h4:first-child {
margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
margin-right: 8px;
}
</style>
2018-01-24 22:53:45 +08:00
```