Semantic-UI 按钮标签图标类型

Semantic-UI 提供了多种按钮标签图标类型，可以通过添加相应 class 来实现。

按钮标签图标

使用 .icon class 来添加一个图标到按钮标签上。

<button class="ui icon button">
  <i class="heart icon"></i>
</button>

效果如下：

<i> 标签内的 heart icon class 决定了图标的类型。可以在 Semanic-UI 文档中查找可用的图标。

按钮里的图标

在按钮里面添加图标，可以使用 .icon 和 .labeled 两个 class。

<button class="ui labeled icon button">
  <i class="pause icon"></i>
  Pause
</button>

<i> 标签内的 pause icon 决定了图标的类型。

效果如下：

可以使用 .right class 来将图标放到右侧。

<button class="ui right labeled icon button">
  <i class="pause icon"></i>
  Pause
</button>

效果如下：

点击动作图标

在点击按钮时，可以使用 .loading、.disabled 或动态更改 .icon 的 class 来显示不同的图标状态。

<button class="ui icon button">
  <i class="cloud download icon"></i>
</button>

<button class="ui loading icon button">
  <i class="cloud download icon"></i>
</button>

<button class="ui disabled icon button">
  <i class="cloud download icon"></i>
</button>

<button class="ui icon button">
  <i class="file icon"></i>
</button>

<button class="ui icon button" onclick="this.querySelector('i').className='file icon'">
  <i class="cloud download icon"></i>
</button>

效果如下：

总结

Semantic-UI 的按钮标签图标类型功能非常丰富，可以满足各种不同的需求，例如添加按钮里的图标，显示点击动作图标等等。熟练掌握这些功能可以为页面的设计提供更多的可能性。