mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
2.5 KiB
2.5 KiB
Groups Button
- order: 8
按钮组合
将一系列的 .ant-btn
放入 .ant-btn-group
的容器中
按钮组合尺寸
只要给 .ant-btn-group
加上 .ant-btn-group-*
类,即可设置不同的尺寸,目前支持大中小三种尺寸。
<h4>基本组合</h4>
<div class="ant-btn-group">
<button class="ant-btn ant-btn-primary">确 定</button>
<button class="ant-btn ant-btn-primary">取 消</button>
</div>
<div class="ant-btn-group">
<button class="ant-btn ant-btn-default">左</button>
<button class="ant-btn ant-btn-default">中</button>
<button class="ant-btn ant-btn-default">右</button>
</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>
<button class="ant-btn ant-btn-default">右</button>
</div>
<h4>带图标按钮组合 </h4>
<div class="ant-btn-group">
<button class="ant-btn ant-btn-primary">
<span class="anticon anticon-caret-left"></span>
<span>前 进</span>
</button>
<button class="ant-btn ant-btn-primary">
<span>后 退</span>
<span class="anticon anticon-caret-right"></span>
</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">
<span>前进</span>
<span class="anticon anticon-caret-right"></span>
</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">
<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 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>