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">highbutton>
<button class="ui secondary button">middlebutton>
<button class="ui button">lowbutton>

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">2048a>
  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">Onebutton>
  <button class="ui button">Twobutton>
  <button class="ui button">Threebutton>
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">yesbutton>
  <div class="or" data-text="or">div>
  <button class="ui positive button active">nobutton>
div>

Active激活状态

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

Disabled禁用状态

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

Positive积极

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

Negative消极

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

Loading加载

表现出正在加载

Sizes尺寸

按钮有不同尺寸

<button class="mini ui button">Minibutton>
<button class="tiny ui button">Tinybutton>
<button class="small ui button">Smallbutton>
<button class="medium ui button">Mediumbutton>
<button class="large ui button">Largebutton>
<button class="big ui button">Bigbutton>
<button class="huge ui button">Hugebutton>
<button class="massive ui button">Massivebutton>

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">Onediv>
div>
<div class="ui attached segment">
  <p>p>
div>
<div class="ui two bottom attached buttons">
    <div class="ui button active">Onediv>
    <div class="ui button">Twodiv>
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">Feedbutton>
  <button class="ui button">Messagesbutton>
  <button class="ui button">Eventsbutton>
  <button class="ui button">Photosbutton>
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">Onebutton>
  <button class="ui button">Twobutton>
  <button class="ui button">Threebutton>
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>