ant-design/components/button/demo/button-group.md
2015-06-11 17:20:24 +08:00

2.6 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"></button>
  <button class="ant-btn"></button>
  <button class="ant-btn"></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"></button>
</div>
<h4>带图标按钮组合 </h4>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-primary">
  <span class="anticon anticon-double-left"></span>
  <span>后 退</span>
  </button>
  <button class="ant-btn ant-btn-primary">
  <span>前 进</span>
  <span class="anticon anticon-double-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-double-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>