新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

  • 更新 v1.2.1:增加了 btn-bordered 的按钮组样式。

垂直和水平方向按钮组

垂直方向

分组

  1. <p>
  2. </p><div class="sui-btn-group">
  3. <button class="sui-btn btn-bordered btn-primary">复制</button>
  4. <button class="sui-btn btn-bordered btn-primary">粘贴</button>
  5. <button class="sui-btn btn-bordered btn-primary">编辑</button>
  6. <button class="sui-btn btn-bordered btn-primary">撤销</button>
  7. <button class="sui-btn btn-bordered btn-primary">查找</button>
  8. <button class="sui-btn btn-bordered btn-primary">删除</button>
  9. </div>
  10. <p></p>
  11. <p>
  12. </p><div class="sui-btn-toolbar">
  13. <div class="sui-btn-group">
  14. <button class="sui-btn btn-bordered btn-primary">复制</button>
  15. <button class="sui-btn btn-bordered btn-primary">粘贴</button>
  16. <button class="sui-btn btn-bordered btn-primary">编辑</button>
  17. </div>
  18. <div class="sui-btn-group">
  19. <button class="sui-btn btn-bordered btn-danger">删除</button>
  20. <button class="sui-btn btn-bordered btn-danger">撤销</button>
  21. </div>
  22. </div>
  23. <p></p>
  24. <p>
  25. </p><div class="sui-btn-group">
  26. <button class="sui-btn btn-primary">复制</button>
  27. <button class="sui-btn btn-primary">粘贴</button>
  28. <button class="sui-btn btn-primary">编辑</button>
  29. <button class="sui-btn btn-primary">撤销</button>
  30. <button class="sui-btn btn-primary">查找</button>
  31. <button class="sui-btn btn-primary">删除</button>
  32. </div>
  33. <p></p>
  34. <p>
  35. </p><div class="sui-btn-group">
  36. <button class="sui-btn">左边</button>
  37. <button class="sui-btn">中间</button>
  38. <button class="sui-btn">右边</button>
  39. </div>
  40. <p></p>
  41. <p>
  42. </p><div class="sui-btn-group">
  43. <button class="sui-btn">复制</button>
  44. <button class="sui-btn btn-primary">粘贴</button>
  45. <button class="sui-btn btn-warning">按钮</button>
  46. <button class="sui-btn btn-success">按钮</button>
  47. <button class="sui-btn btn-danger">删除</button>
  48. </div>
  49. <p></p>
  50. <h2>垂直方向</h2>
  51. <p>
  52. </p><div class="sui-btn-group btn-group-vertical">
  53. <button class="sui-btn btn-primary">左边</button>
  54. <button class="sui-btn btn-primary">中间</button>
  55. <button class="sui-btn btn-primary">右边</button>
  56. </div>
  57. <p></p>
  58. <p>
  59. </p><div class="sui-btn-group btn-group-vertical">
  60. <button class="sui-btn btn-primary btn-bordered">左边</button>
  61. <button class="sui-btn btn-primary btn-bordered">中间</button>
  62. <button class="sui-btn btn-primary btn-bordered">右边</button>
  63. </div>
  64. <p></p>
  65. <h2>分组</h2>
  66. <div class="sui-btn-toolbar">
  67. <div class="sui-btn-group">
  68. <button class="sui-btn">复制</button>
  69. <button class="sui-btn">粘贴</button>
  70. <button class="sui-btn">缩进</button>
  71. </div>
  72. <div class="sui-btn-group">
  73. <button class="sui-btn btn-danger">删除</button>
  74. <button class="sui-btn btn-primary">插入</button>
  75. </div>
  76. </div>
按钮组,默认是水平排列,通过class btn-group-vertical 控制按钮组垂直排列。