Semantic-UI 按钮组变化垂直按钮

在 Semantic-UI 中，我们可以使用按钮组来展示多个按钮并根据需要进行组合和变化。而垂直按钮组则可以在一定程度上提高按钮的可视性和美观度。在本文中，我们将介绍如何使用 Semantic-UI 创建一个垂直按钮组及如何变换按钮样式。

创建垂直按钮组

要创建垂直按钮组，我们只需要在 .ui.buttons 元素上添加 .vertical 类即可。

<div class="ui vertical buttons">
  <button class="ui button">按钮 1</button>
  <button class="ui button">按钮 2</button>
  <button class="ui button">按钮 3</button>
</div>

这将会创建一个纵向排列的按钮组，其中每个按钮之间的间距比水平按钮组更大，并且每个按钮都有更多的空间来展示其文本或图标。

变化按钮样式

Semantic-UI 中内置了许多按钮样式，如基本按钮、主要按钮、成功按钮、警告按钮和危险按钮等。我们可以通过为按钮元素添加不同的类来应用这些样式。例如，我们可以使用 .primary 类将按钮变为主要按钮。

<button class="ui primary button">主要按钮</button>

此外，Semantic-UI 还提供了许多其他的按钮变化选项，如带标签的按钮、翻转按钮、大小不同的按钮等等。我们可以通过添加不同的类来实现这些变化。

<button class="ui labeled icon button">
  <i class="thumbs up icon"></i>
  点赞
</button>

<button class="ui flip button">
  <div class="visible content">显示</div>
  <div class="hidden content">隐藏</div>
</button>

<button class="ui tiny button">小型按钮</button>
<button class="ui huge button">巨型按钮</button>

总结

本文介绍了如何使用 Semantic-UI 创建垂直按钮组，并展示了如何在按钮样式上进行变化。希望你能够通过本文学习到如何使用 Semantic-UI 创建漂亮的按钮，并运用到你的项目中。