arozos/web/NotepadA/utils/tocasdoc/modules/slider.yml

Title      : 滑桿
Description: 省去手動輸入數值的麻煩。

Definitions:

  - Title      : 種類
    Description: 這裡是滑桿的種類。
    Sections   :

      - Title      : 基本
        Description: 最基本的滑桿。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[slider]]">
              <input type="range">
          </div>

  - Title      : 種類
    Description: 滑桿有不同的狀態。
    Sections   :

      - Title      : 已停用
        Description: 一個滑桿可以呈現出無法使用、已停用的狀態。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[disabled]] slider">
              <input type="range">
          </div>

  - Title      : 內容
    Description: 滑桿裡可以擺放不同的內容。
    Sections   :

      - Title      : 標籤
        Description: 滑桿的側邊可以擺放標籤用以標示與滑桿有關的數值。
        Since      : 2.3.3
        HTML       : |
          <div class="ts slider">
              <div class="ts basic right pointing [[label]]">32</div>
              <input type="range">
              <div class="ts basic left pointing [[label]]">96</div>
          </div>

  - Title      : 外觀
    Description: 滑桿的外觀有所不同。
    Sections   :

      - Title      : 流動
        Description: 滑桿可以是流動且填滿整個容器的寬度。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[fluid]] slider">
              <input type="range">
          </div>

Modules:

  - Title      : JavaScript
    Description: 滑桿有提供可用的 JavaScript 模塊。
    Sections   :

      - Title      : 顯示切換
        Description: 套用基本的 JavaScript 能夠使你的滑桿左側擁有指示條顏色。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[slider]]">
              <input type="range">
          </div>
        JavaScript: |
          ts('.ts.slider').slider();
        AutoExecute: true