开发者文档
- 更新 v1.2.1:增加了 btn-bordered 的按钮组样式。
垂直和水平方向按钮组
垂直方向
分组
- <p>
- </p><div class="sui-btn-group">
- <button class="sui-btn btn-bordered btn-primary">复制</button>
- <button class="sui-btn btn-bordered btn-primary">粘贴</button>
- <button class="sui-btn btn-bordered btn-primary">编辑</button>
- <button class="sui-btn btn-bordered btn-primary">撤销</button>
- <button class="sui-btn btn-bordered btn-primary">查找</button>
- <button class="sui-btn btn-bordered btn-primary">删除</button>
- </div>
- <p></p>
- <p>
- </p><div class="sui-btn-toolbar">
- <div class="sui-btn-group">
- <button class="sui-btn btn-bordered btn-primary">复制</button>
- <button class="sui-btn btn-bordered btn-primary">粘贴</button>
- <button class="sui-btn btn-bordered btn-primary">编辑</button>
- </div>
- <div class="sui-btn-group">
- <button class="sui-btn btn-bordered btn-danger">删除</button>
- <button class="sui-btn btn-bordered btn-danger">撤销</button>
- </div>
- </div>
- <p></p>
- <p>
- </p><div class="sui-btn-group">
- <button class="sui-btn btn-primary">复制</button>
- <button class="sui-btn btn-primary">粘贴</button>
- <button class="sui-btn btn-primary">编辑</button>
- <button class="sui-btn btn-primary">撤销</button>
- <button class="sui-btn btn-primary">查找</button>
- <button class="sui-btn btn-primary">删除</button>
- </div>
- <p></p>
- <p>
- </p><div class="sui-btn-group">
- <button class="sui-btn">左边</button>
- <button class="sui-btn">中间</button>
- <button class="sui-btn">右边</button>
- </div>
- <p></p>
- <p>
- </p><div class="sui-btn-group">
- <button class="sui-btn">复制</button>
- <button class="sui-btn btn-primary">粘贴</button>
- <button class="sui-btn btn-warning">按钮</button>
- <button class="sui-btn btn-success">按钮</button>
- <button class="sui-btn btn-danger">删除</button>
- </div>
- <p></p>
- <h2>垂直方向</h2>
- <p>
- </p><div class="sui-btn-group btn-group-vertical">
- <button class="sui-btn btn-primary">左边</button>
- <button class="sui-btn btn-primary">中间</button>
- <button class="sui-btn btn-primary">右边</button>
- </div>
- <p></p>
- <p>
- </p><div class="sui-btn-group btn-group-vertical">
- <button class="sui-btn btn-primary btn-bordered">左边</button>
- <button class="sui-btn btn-primary btn-bordered">中间</button>
- <button class="sui-btn btn-primary btn-bordered">右边</button>
- </div>
- <p></p>
- <h2>分组</h2>
- <div class="sui-btn-toolbar">
- <div class="sui-btn-group">
- <button class="sui-btn">复制</button>
- <button class="sui-btn">粘贴</button>
- <button class="sui-btn">缩进</button>
- </div>
- <div class="sui-btn-group">
- <button class="sui-btn btn-danger">删除</button>
- <button class="sui-btn btn-primary">插入</button>
- </div>
- </div>
按钮组,默认是水平排列,通过class
btn-group-vertical
控制按钮组垂直排列。- 复制代码代码已复制