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>

アニメーション
ボタンはアニメーションで非表示のコンテンツを表示することができ、ボタンのサイズは表示されるコンテンツのサイズに応じて自動的に調整されるので、非表示のコンテンツを完全に表示できるかどうかを考慮します.

<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アイコン
1つのボタンに1つのアイコンしかありません

<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ボタングループ
複数のボタンを1つのグループとして使用できます

<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は赤で表示され、ユーザーにクリックを警告する
ロード
ロードされていることを示します
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すなわち5等分

<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>