Semantic-UI 按钮混合组变体(1)

📌 相关文章

📜 Semantic-UI 按钮混合组变体(1)

📅 最后修改于: 2023-12-03 15:05:09.712000 🧑 作者: Mango

Semantic-UI 按钮混合组变体介绍

在 Semantic-UI 中，按钮混合组是一种可以将多个按钮合并为一个组的方法，用于在视觉上指示它们属于同一个逻辑实体。同时，Semantic-UI 还提供了多种变体样式，可以让按钮组更加灵活。

基本用法

按钮混合组可以通过 .ui.buttons 类来实现。例如：

<div class="ui buttons">
  <button class="ui button">按钮一</button>
  <button class="ui button">按钮二</button>
  <button class="ui button">按钮三</button>
</div>

这样就创建了一个简单的按钮混合组。

尺寸大小

通过添加 .mini、.tiny、.small、.medium 和 .large 等类可以改变按钮混合组的尺寸大小。例如：

<div class="ui tiny buttons">
  <button class="ui button">按钮一</button>
  <button class="ui button">按钮二</button>
  <button class="ui button">按钮三</button>
</div>

颜色主题

Semantic-UI 提供了黑、蓝、绿、橙、黄、红、紫等多种颜色主题，通过添加 .black、.blue、.green、.orange、.yellow、.red、.purple 等类可以改变按钮混合组的颜色主题。例如：

<div class="ui green buttons">
  <button class="ui button">按钮一</button>
  <button class="ui button">按钮二</button>
  <button class="ui button">按钮三</button>
</div>

图标按钮

通过添加 .icon 类可以将按钮变为图标按钮。例如：

<div class="ui buttons">
  <button class="ui button">
    <i class="left arrow icon"></i>
    向左
  </button>
  <button class="ui button">
    <i class="right arrow icon"></i>
    向右
  </button>
</div>

带标签的按钮

通过添加 .labeled 类可以将按钮变为带图标的标签按钮。例如：

<div class="ui buttons">
  <button class="ui labeled icon button">
    <i class="github icon"></i>
    GitHub
  </button>
  <button class="ui right labeled icon button">
    <i class="right arrow icon"></i>
    向右
  </button>
</div>

按钮组合

可以通过在按钮上添加 .active 类将其设置为激活状态。例如：

<div class="ui buttons">
  <button class="ui button active">按钮一</button>
  <button class="ui button">按钮二</button>
  <button class="ui button">按钮三</button>
</div>

其他选项

按钮混合组还支持以下选项：

vertical: 将按钮混合组垂直堆叠。
compact: 将按钮混合组缩小到更紧密的尺寸。

可以通过在 .ui.buttons 上添加这些类来使用这些选项。

返回的 Markdown 格式代码片段

# Semantic-UI 按钮混合组变体介绍

在 Semantic-UI 中，按钮混合组是一种可以将多个按钮合并为一个组的方法，用于在视觉上指示它们属于同一个逻辑实体。同时，Semantic-UI 还提供了多种变体样式，可以让按钮组更加灵活。

## 基本用法

按钮混合组可以通过 `.ui.buttons` 类来实现。例如：

```