arozos/web/NotepadA/utils/tocasdoc/elements/button.yml

Title      : 按鈕
Description: 一個重要的按鈕，我們將它視為核彈按鈕般，精心設計和呵護。
Outline    : |
  按鈕具有多種樣式和語意，請注意的是，語意和顏色不同，請不要為了要新增紅色按鈕，就建立一個「負面」按鈕。

  請務必遵循 CSS 樣式中的含意。


Mixins:

  - Name       : ts-button-color($xxx)
    Description: 按鈕顏色。


Definitions:

  - Title      : 種類
    Description: 一個按鈕具有多個不同的種類。
    Sections   :

      - Title      : 按鈕
        Description: 一個正常的按鈕。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[button]]">按鈕</button>

      - Title      : 基本語氣
        Description: 用來讓一個按鈕擁有不同的意思，但卻不帶有肯定或否定語氣。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[primary]] button">主要</button>
          <button class="ts [[warning]] button">警告</button>
          <button class="ts [[info]] button">資訊</button>
          <button class="ts [[inverted]] button">相反色</button>

      - Title      : 肯定和否定
        Description: 讓按鈕帶有肯定或否定的意思。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[positive]] button">肯定</button>
          <button class="ts [[negative]] button">否定</button>

      - Title      : 次等的
        Description: 一個次等的按鈕的背景預設是白色的，令其較不顯眼。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[secondary]] button">次等</button>

      - Title      : 偏見
        Description: 讓按鈕以背景顏色作為基礎，並以此產生深、暗差異的偏見。
        Since      : 2.3.3
        HTML       : |
          <div class="ts inverted info {{segment}}">
              <button class="ts [[opinion]] button">偏見</button>
              <button class="ts [[secondary opinion]] button">次要偏見</button>
          </div>
          <div class="ts inverted warning {{segment}}">
              <button class="ts [[opinion]] button">偏見</button>
              <button class="ts [[secondary opinion]] button">次要偏見</button>
          </div>

      - Title      : 圖案
        Description: 只顯示圖案的按鈕。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[icon]] button">
              <i class="heart {{icon}}"></i>
          </button>

      - Title      : 連結
        Description: 按鈕可以看起來像純文字連結。
        Since      : 2.3.3
        HTML       : |
          這是個<button class="ts [[link]] button">連結按鈕</button>喔！

      - Title      : 關閉
        Description: 按鈕可以呈現一個用於關閉其他元件的樣式。
        Since      : 2.3.3
        HTML       : |
          <button class="ts mini [[close]] button"></button>
          <button class="ts tiny [[close]] button"></button>
          <button class="ts small [[close]] button"></button>
          <button class="ts [[close]] button"></button>
          <button class="ts large [[close]] button"></button>
          <button class="ts big [[close]] button"></button>
          <button class="ts huge [[close]] button"></button>
          <button class="ts massive [[close]] button"></button>

      - Title      : 基本
        Description: 讓按鈕只帶有基本的架構。
        Since      : 2.3.3
        HTML       : |
          <button class="ts positive [[basic]] button">確定</button>
          <button class="ts negative [[basic]] button">拒絕</button>
          <button class="ts [[basic]] button">知道</button>
          <button class="ts secondary [[basic]] button">取消</button>

      - Title      : 標籤
        Description: 帶有標籤的按鈕。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[left labeled]] button">
              <div class="ts basic {{label}}">689</div>
              <button class="ts button">加入募集</button>
          </div>
          <div class="ts [[labeled]] button">
              <button class="ts button">加入募集</button>
              <div class="ts basic {{label}}">689</div>
          </div>

      - Title      : 標籤圖示
        Description: 帶有標籤和圖示的按鈕。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[labeled icon]] button">
              <i class="star {{icon}}"></i>
              星號
          </button>
          <button class="ts [[right labeled icon]] button">
              加入最愛
              <i class="heart {{icon}}"></i>
          </button>

  - Title      : 群組
    Description: 將多個按鈕組成一列，或是擁有同樣性質。
    Sections   :

      - Title      : 按鈕群組
        Description: 按鈕可以組合成一個群組。
        Remove     :
          - <br><br>
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[buttons]]">
              <button class="ts warning button">橙希</button>
              <button class="ts primary button">雨藍</button>
              <button class="ts inverted button">卡莉絲</button>
          </div>
          <br><br>
          <div class="ts icon [[buttons]]">
            <button class="ts button"><i class="align left {{icon}}"></i></button>
            <button class="ts button"><i class="align center {{icon}}"></i></button>
            <button class="ts button active"><i class="align right {{icon}}"></i></button>
            <button class="ts button"><i class="align justify {{icon}}"></i></button>
          </div>

      - Title      : 垂直群組
        Description: 群組也可以是垂直擺放的。
        Since      : 2.3.3
        HTML       : |
          <div class="ts fluid [[vertical]] [[buttons]]">
              <button class="ts warning button">橙希</button>
              <button class="ts primary button">雨藍</button>
              <button class="ts inverted button">卡莉絲</button>
          </div>

      - Title      : 分開的
        Description: 按鈕群組也可以分開、有間距。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[separated]] [[buttons]]">
              <button class="ts warning button">橙希</button>
              <button class="ts primary button">雨藍</button>
              <button class="ts inverted button">卡莉絲</button>
          </div>

      - Title      : 較寬鬆的
        Description: 按鈕群組之間的間距可以更大、看起來更寬鬆。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[relaxed]] separated buttons">
              <button class="ts warning button">橙希</button>
              <button class="ts primary button">雨藍</button>
              <button class="ts inverted button">卡莉絲</button>
          </div>

      - Title      : 自動層疊
        Description: 按鈕群組可以在手機版上自動層疊，而不是保持水平排列。欲觀看此效果你需要使用手機來查看此範例。
        Since      : 2.3.3
        Responsive : true
        HTML       : |
          <div class="ts fluid [[stackable]] buttons">
              <button class="ts info button">希豹</button>
              <button class="ts negative button">祈浪</button>
              <button class="ts inverted button">余望</button>
          </div>

      - Title      : 垂直附著
        Description: 按鈕群組可以垂直附著在某個元素的上下端。
        Since      : 2.3.3
        HTML       : |
          <div class="ts fluid [[top attached]] buttons">
              <button class="ts primary button">按鈕一</button>
              <button class="ts positive button">按鈕二</button>
          </div>
          <div class="ts attached {{segment}}">
              <p>貓耳就是量子力學</p>
              <p>△×￥○＠％＆＄＃☆□！</p>
              <p>「冷靜一點、把咖啡歐蕾喝下去」</p>
          </div>
          <div class="ts fluid [[bottom attached]] buttons">
              <button class="ts inverted button">按鈕三</button>
              <button class="ts negative button">按鈕四</button>
          </div>

  - Title      : 內容
    Description: 按鈕內部可以有不同的內容。
    Sections   :

      - Title      : 條件
        Description: 你能夠在按鈕群組的間隙中間安插像是條件式的文字讓使用者擇其一。
        Since      : 2.3.3
        HTML       : |
          <div class="ts buttons">
              <button class="ts button">取消</button>
              <div class="[[or]]"></div>
              <button class="ts positive button">儲存</button>
              <div class="[[or]]"></div>
              <button class="ts primary button">送出</button>
          </div>

      - Subtitle   : 自訂條件文字
        Description: 你也能夠透過 `[data-text]` 來變動條件文字，但注意文字字數不可超過圓圈大小。
        Since      : 2.3.3
        HTML       : |
          <div class="ts buttons">
              <button class="ts button">Cancel</button>
              <div class="or" [[data-text]]="Or"></div>
              <button class="ts positive button">Save</button>
          </div>

  - Title      : 狀態
    Description: 你可以隨時透過樣式類別切換一個按鈕的狀態。
    Sections   :

      - Title      : 已啟用
        Description: 用以顯示這個按鈕已經被啟用、觸發。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[active]] button">按鈕</button>

      - Title      : 已停用
        Description: 用以顯示這個按鈕已經被禁止按下。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[disabled]] button">按鈕</button>

      - Title      : 讀取中
        Description: 按鈕也可以變成讀取狀態。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[loading]] button">按鈕</button>

      - Title      : 脈動中
        Description: 按鈕能夠看起來正在脈動，令人注意。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[pulsing]] button">按鈕</button>

  - Title      : 外觀
    Description: 你可以更改按鈕的位置、大小、或者形狀。
    Sections   :

      - Title      : 尺寸
        Description: 按鈕可以有不同的大小尺寸。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[mini]] button">迷你</button>
          <button class="ts [[tiny]] button">微小</button>
          <button class="ts [[small]] button">小型</button>
          <button class="ts [[button]]">預設</button>
          <button class="ts [[medium]] button">適中</button>
          <button class="ts [[large]] button">大型</button>
          <button class="ts [[big]] button">巨大</button>
          <button class="ts [[huge]] button">超大</button>
          <button class="ts [[massive]] button">重量級</button>

      - Title      : 浮動
        Description: 按鈕可以向左或向右浮動對齊。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[left floated]] button">向左浮動</button>
          <button class="ts [[right floated]] button">向右浮動</button>

      - Title      : 角落
        Description: 按鈕可以浮動在某個元素的角落中。
        Since      : 2.3.3
        HTML       : |
          <div class="ts tiny image">
              <img src="!-1:1-!">
              <button class="ts [[top right corner]] close button"></button>
          </div>

      - Title      : 垂直附著
        Description: 按鈕可以單獨垂直附著在某個元素的上下端。
        Since      : 2.3.3
        HTML       : |
          <button class="ts fluid [[top attached]] button">附著於上</button>
          <div class="ts attached {{segment}}">
              <p>TeaMeow 是一個社群網站，就像是你正在使用的 Facebook 或是 Twitter，</p>
              <p>不過我們強調的是「自由」和「日常」，我們不會整天刪你文章。</p>
          </div>
          <button class="ts fluid [[bottom attached]] button">附著於下</button>

      - Title      : 輕巧版
        Description: 縮小按鈕的內距。
        Since      : 2.3.3
        HTML       : |
          <button class="ts mini [[very compact]] button">非常輕巧</button>
          <button class="ts mini [[compact]] button">迷你輕巧</button>
          <button class="ts [[compact]] button">輕巧按鈕</button>

      - Title      : 圓形
        Description: 按鈕可以是圓形的。
        Since      : 2.3.3
        HTML       : |
          <button class="ts [[circular]] large icon button">
              <i class="gift {{icon}}"></i>
          </button>
          <button class="ts [[circular]] positive button">知道了！</button>