2015-06-05 20:26:41 +08:00
|
|
|
# Groups Button
|
|
|
|
|
2015-06-07 14:03:00 +08:00
|
|
|
- order: 8
|
2015-06-05 20:26:41 +08:00
|
|
|
|
2015-06-07 14:03:00 +08:00
|
|
|
按钮组合
|
2015-06-05 20:26:41 +08:00
|
|
|
|
2015-06-07 14:03:00 +08:00
|
|
|
将一系列的 `.ant-btn` 放入 `.ant-btn-group` 的容器中
|
|
|
|
|
|
|
|
按钮组合尺寸
|
|
|
|
|
|
|
|
只要给 `.ant-btn-group` 加上 `.ant-btn-group-*` 类,即可设置不同的尺寸,目前支持大中小三种尺寸。
|
2015-06-05 20:26:41 +08:00
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
````html
|
2015-06-08 12:32:09 +08:00
|
|
|
<h4>基本组合</h4>
|
|
|
|
<div class="ant-btn-group">
|
|
|
|
<button class="ant-btn ant-btn-primary">确 定</button>
|
|
|
|
<button class="ant-btn ant-btn-primary">取 消</button>
|
2015-06-05 20:26:41 +08:00
|
|
|
</div>
|
2015-06-08 12:32:09 +08:00
|
|
|
<div class="ant-btn-group">
|
2015-06-11 17:16:32 +08:00
|
|
|
<button class="ant-btn">左</button>
|
|
|
|
<button class="ant-btn">中</button>
|
|
|
|
<button class="ant-btn">右</button>
|
2015-06-08 12:32:09 +08:00
|
|
|
</div>
|
|
|
|
<div class="ant-btn-group">
|
|
|
|
<button class="ant-btn ant-btn-primary">左</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">中</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">中</button>
|
2015-06-11 17:16:32 +08:00
|
|
|
<button class="ant-btn">右</button>
|
2015-06-08 12:32:09 +08:00
|
|
|
</div>
|
|
|
|
<h4>带图标按钮组合 </h4>
|
|
|
|
<div class="ant-btn-group">
|
|
|
|
<button class="ant-btn ant-btn-primary">
|
2015-06-11 09:15:29 +08:00
|
|
|
<span class="anticon anticon-double-left"></span>
|
2015-06-09 12:05:59 +08:00
|
|
|
<span>后 退</span>
|
2015-06-08 12:32:09 +08:00
|
|
|
</button>
|
|
|
|
<button class="ant-btn ant-btn-primary">
|
2015-06-09 12:05:59 +08:00
|
|
|
<span>前 进</span>
|
2015-06-11 09:15:29 +08:00
|
|
|
<span class="anticon anticon-double-right"></span>
|
2015-06-08 12:32:09 +08:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="ant-btn-group">
|
|
|
|
<button class="ant-btn ant-btn-primary">
|
|
|
|
<span class="anticon anticon-cloud"></span>
|
|
|
|
</button>
|
|
|
|
<button class="ant-btn ant-btn-primary">
|
|
|
|
<span class="anticon anticon-cloud-download"></span>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<h4>多个组合</h4>
|
|
|
|
<div class="ant-btn-group">
|
|
|
|
<button class="ant-btn ant-btn-ghost">1</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">2</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">3</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">4</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">
|
2015-06-09 12:05:59 +08:00
|
|
|
<span>前 进</span>
|
2015-06-11 09:15:29 +08:00
|
|
|
<span class="anticon anticon-double-right"></span>
|
2015-06-08 12:32:09 +08:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<h4>尺寸</h4>
|
|
|
|
<div class="ant-btn-group ant-btn-group-lg">
|
|
|
|
<button class="ant-btn ant-btn-ghost">大</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">大</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">大</button>
|
|
|
|
</div>
|
|
|
|
<div class="ant-btn-group">
|
2015-06-09 12:05:59 +08:00
|
|
|
<button class="ant-btn ant-btn-ghost">默 认</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">默 认</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">默 认</button>
|
2015-06-08 12:32:09 +08:00
|
|
|
</div>
|
|
|
|
<div class="ant-btn-group ant-btn-group-sm">
|
|
|
|
<button class="ant-btn ant-btn-ghost">小</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">小</button>
|
|
|
|
<button class="ant-btn ant-btn-ghost">小</button>
|
|
|
|
</div>
|
|
|
|
````
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.nico-insert-code h4:first-child {
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
2015-06-09 12:05:59 +08:00
|
|
|
.nico-insert-code .ant-btn-group {
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
2015-06-09 15:21:07 +08:00
|
|
|
.nico-insert-code .ant-btn {
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
2015-06-08 12:32:09 +08:00
|
|
|
</style>
|