语义 UI 按钮组变体标记图标按钮

介绍

语义 UI 是一个基于语义化 HTML 的前端框架，旨在提供一致的用户体验和易于使用的组件库。按钮组是语义 UI 中常用的UI组件之一，它允许我们将多个按钮组合到一起，形成一组按钮。

按钮组中的按钮可以显示文本、图标或者二者结合。语义 UI 提供了丰富的按钮组变体，可以根据需求选择相应的样式来定制按钮组。

标记图标按钮

标记图标按钮是语义 UI 按钮组的一种变体。它可以让我们将一个标记图标与一个按钮组合在一起。标记图标和文本可以紧凑地展示在一起，可以节省页面空间。

标记图标按钮的标记图标可以使用 semantic-ui-icon 类来控制，具体的图标名称可以参考 官方文档。

以下是一个标记图标按钮的示例代码：

<div class="ui labeled icon button">
  <i class="heart icon"></i>
  Like
</div>

效果如下：

按钮组

如果我们将多个标记图标按钮组合在一起，就可以形成一个标记图标按钮组。语义 UI 提供了如下几种样式的按钮组：

• basic：基础样式
• inverted：反色样式
• circular：圆形样式
• vertical：竖向样式

以下是一个标记图标按钮组的示例代码：

<div class="ui basic labeled icon buttons">
  <div class="ui button">
    <i class="pause icon"></i>
    Pause
  </div>
  <div class="ui button">
    <i class="play icon"></i>
    Play
  </div>
</div>

效果如下：

按钮组变体

如果我们需要改变按钮组的样式，可以使用以下按钮组的变体：

• colors：颜色变体
• sizes：大小变体
• floated：浮动变体
• widths：宽度变体

以下是一个带有颜色变体的标记图标按钮组的示例代码：

<div class="ui green labeled icon buttons">
  <div class="ui button">
    <i class="thumbs up icon"></i>
    Thumb up
  </div>
  <div class="ui button">
    <i class="thumbs down icon"></i>
    Thumb down
  </div>
</div>

效果如下：

总结

语义 UI 的按钮组变体功能十分强大，可以满足我们各种不同的需求。我们可以根据具体的场景来选择相应的样式和变体，从而定制出符合需求的按钮组。