Semantic UI学习

Semantic UI 是一套开源的 CSS 与 JavaScript 框架，提供了一些设计好的界面组件，你可以在项目里直接使用这些组件。只需要引入相应的CSS和JavaScript即可使用啦。

<link rel="stylesheet" href="https://ninghao.net/semantic/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="./jquery-3.3.1.min.js"></script>

下面简单介绍按钮元素的用法，我这里只是学习记录，参考文档更加生动https://zijieke.com/semantic-ui/elements/button.php

按钮

Emphasis强调

可以对按钮进行格式化，以显示不同的重点级别。不同级别显示的颜色是固定的，不过也是可以修改的。

<button class="ui primary button">high</button>
<button class="ui secondary button">middle</button>
<button class="ui button">low</button>

Animated动画

按钮可以通过动画来显示隐藏的内容，按钮的大小是根据可见内容的尺寸自动调整，所以要考虑是否可以完整显示隐藏内容

<button class="ui animated button">
    <div class="visible content">下一步</div>
    <div class="hidden content">
      <i class="right arrow icon"></i>
  </button>
  <div class="ui vertical animated button" tabindex="0">
    <div class="hidden content">商店</div>
    <div class="visible content">
      <i class="shop icon"></i>
    </div>
  </div>
  <div class="ui animated fade button" tabindex="0">
    <div class="visible content">注册账户</div>
    <div class="hidden content">
      每月 $12.99
    </div>
  </div>

Label标签

按钮可以在标签旁边显示

<div class="ui labeled button" tabindex="0">
    <button class="ui button">
      <i class="heart icon"></i>like
    </button>
    <a href="#" class="ui basic label left">2048</a>
  </div>
  <div class="ui left labeled button" tabindex="0">
    <a class="ui basic right pointing label">
      2,048
    </a>
    <div class="ui button">
      <i class="heart icon"></i> 喜欢
    </div>
  </div>
  <div class="ui left labeled button" tabindex="0">
    <a class="ui basic label">
      1,048
    </a>
    <div class="ui icon button">
      <i class="fork icon"></i>
    </div>
  </div>

Icon图标

一个按钮只能有一个图标

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

Labeled Icon图标标签

按钮可以用图标来代表标签

<button class="ui labeled icon button">
  <i class="pause icon"></i>
  暂停
</button>
<button class="ui right labeled icon button">
  <i class="right arrow icon"></i>
  下一首
</button>

Basic基础的

当觉得按钮纯色过于显眼时，可以使用basic使按钮只有边框和文字有颜色。

Inverted反色

按钮可以被设置为暗色背景。当button使用inverted时，只有边框和文字有颜色，hover时bgc变为纯色。当basic button使用inverted时，只呈现灰白色，hover时改变边框和文字颜色。

<div class="ui inverted segment">
  <button class="ui inverted button">标准</button>
  <button class="ui inverted red button">红色</button>
  <button class="ui inverted grey button">灰色</button>
  <button class="ui inverted black button">黑色</button>
</div>

<div class="ui inverted segment">
  <button class="ui inverted basic button">基本色</button>
  <button class="ui inverted red basic button">基础红</button>
  <button class="ui inverted grey basic button">基础灰色</button>
  <button class="ui inverted black basic button">基础黑色</button>
</div>

Buttons按钮组

多个按钮可以作为一个组

<div class="ui buttons">
  <button class="ui button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div>

Icon Buttons图标按钮组

按钮组可以显示一组图标

<div class="ui icon buttons">
  <button class="ui button"><i class="align left icon"></i></button>
  <button class="ui button"><i class="align center icon"></i></button>
  <button class="ui button"><i class="align right icon"></i></button>
  <button class="ui button"><i class="align justify icon"></i></button>
</div>
<div class="ui icon buttons">
  <button class="ui button"><i class="bold icon"></i></button>
  <button class="ui button"><i class="underline icon"></i></button>
  <button class="ui button"><i class="text width icon"></i></button>
</div>

Conditionals条按钮

按钮组可以显示不同条件，中间的文字可以用data-text来设置

<div class="ui buttons">
  <button class="ui button">yes</button>
  <div class="or" data-text="or"></div>
  <button class="ui positive button active">no</button>
</div>

Active激活状态

按钮可以表现出正在被点击

Disabled禁用状态

按钮表现出不可交互的状态

Positive积极

bgc显示为绿色，表示鼓励用户点击

Negative消极

bgc显示为红色， 表示警告用户点击

Loading加载

表现出正在加载

Sizes尺寸

按钮有不同尺寸

<button class="mini ui button">Mini</button>
<button class="tiny ui button">Tiny</button>
<button class="small ui button">Small</button>
<button class="medium ui button">Medium</button>
<button class="large ui button">Large</button>
<button class="big ui button">Big</button>
<button class="huge ui button">Huge</button>
<button class="massive ui button">Massive</button>

Floated浮动

按钮可以在容器中左浮动或者右浮动

Colored颜色

给按钮设置颜色

Compact紧凑

可以减少自身内边距

Toggle切换

一个开关的样式

Fluid流式

按钮宽度可以占满整个容器

Circular圆形

按钮可以是圆的

<button class="ui circular facebook icon button">
  <i class="facebook icon"></i>
</button>
<button class="ui circular twitter icon button">
  <i class="twitter icon"></i>
</button>

Vertically Attached垂直附加

按钮可以附加至内容的顶部或者底部，部分与部分之间连接在一起。

 <div class="ui top attached button">
    <div class="ui button">One</div>
</div>
<div class="ui attached segment">
  <p></p>
</div>
<div class="ui two bottom attached buttons">
    <div class="ui button active">One</div>
    <div class="ui button">Two</div>
</div>

Horizontally Attached水平附加

按钮可被放置在文本内容左侧或右侧

<button class="ui left attached button">左边</button>
<button class="right attached ui button">右边</button>

Vertical Buttons垂直组

垂直排列的按钮

<div class="ui vertical buttons">
  <button class="ui button">Feed</button>
  <button class="ui button">Messages</button>
  <button class="ui button">Events</button>
  <button class="ui button">Photos</button>
</div>

Icon Buttons图标组

<div class="ui icon buttons">
  <button class="ui button"><i class="play icon"></i></button>
  <button class="ui button"><i class="pause icon"></i></button>
  <button class="ui button"><i class="shuffle icon"></i></button>
</div>

Labeled Icon Buttons图标标签组

带标签的图标组

<div class="ui vertical labeled icon buttons">
  <button class="ui button">
    <i class="pause icon"></i>暂停
  </button>
  <button class="ui button">
    <i class="play icon"></i>播放
  </button>
  <button class="ui button">
    <i class="shuffle icon"></i>随机
  </button>
</div>

Mixed Group混合组

可以将多个按钮一起使用

<div class="ui buttons">
  <button class="ui labeled icon button">
    <i class="left chevron icon"></i>
    后退
  </button>
  <button class="ui button active">
    <i class="stop icon"></i>
    停止
  </button>
  <button class="ui right labeled icon button">
    向前
    <i class="right chevron icon"></i>
  </button>
</div>

Equal Width均匀划分

five ui buttons即五等分

<div class="five ui buttons">
  <button class="ui button">概述</button>
  <button class="ui button">规格</button>
  <button class="ui button">担保</button>
  <button class="ui button">回顾</button>
  <button class="ui button">支持</button>
</div>

Colored Buttons带颜色的组

在根div用blue ui buttons，则所含的button们全都都是蓝色的

Basic Buttons基本组

和Colored Buttons用法差不多

Group Sizes分组大小

分组可以右共同的大小

<div class="large ui buttons">
  <button class="ui button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div><br>
<div class="ui small basic icon buttons">
  <button class="ui button"><i class="file icon"></i></button>
  <button class="ui button"><i class="save icon"></i></button>
  <button class="ui button"><i class="upload icon"></i></button>
</div>