Title      : 片段
Description: 碎片化的文字聚集地。
Outline    : 片段通常可以拿來包裝文章內容，但並不適合獨立當作一個卡片使用。

Definitions:

  - Title      : 種類
    Description: 片段具有不同的種類。
    Sections   :

      - Title      : 片段
        Description: 一個最基本的片段。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[segment]]">
              <p>烈日高照，前方的道路什麼都看不見，</p>
              <p>「很高興能和你見面。」一個細微的聲音好似那邊傳來，</p>
              <p>明明不清楚前方的事物，卻感覺自己正在邁向的是一個新世界。</p>
          </div>

      - Title      : 抬舉
        Description: 片段可以加深陰影，看起來像被抬舉，或是浮在空中。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[raised]] segment">
              <p>在最糟糕的事情發生之前，</p>
              <p>我儘可能地想找出原因，</p>
              <p>原來是 — 自己。</p>
          </div>

      - Title      : 語意
        Description: 片段也具有語意。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[primary]] segment">
              <p>主要語意。</p>
          </div>
          <div class="ts [[info]] segment">
              <p>提醒語意。</p>
          </div>
          <div class="ts [[warning]] segment">
              <p>警告語意。</p>
          </div>

      - Title      : 肯定和否定
        Description: 片段也可以帶有肯定或否定的語氣。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[positive]] segment">
              <p>正面語意。</p>
          </div>
          <div class="ts [[negative]] segment">
              <p>否定語意。</p>
          </div>

      - Title      : 反色和語意
        Description: 片段的語意可以更為明顯，甚至是反色地。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[inverted primary]] segment">
              <p>主要語意。</p>
          </div>
          <div class="ts [[inverted info]] segment">
              <p>提醒語意。</p>
          </div>
          <div class="ts [[inverted warning]] segment">
              <p>警告語意。</p>
          </div>
          <div class="ts [[inverted positive]] segment">
              <p>正面語意。</p>
          </div>
          <div class="ts [[inverted negative]] segment">
              <p>否定語意。</p>
          </div>
          <div class="ts [[inverted]] segment">
              <p>反色語意。</p>
          </div>

      - Title      : 發音方式
        Description: 片段可以有不同的發音方式來強調或是以清淡地方式來描繪。
        Since      : 2.3.3
        HTML       : |
          <div class="ts segment">
              <p>我是一般的片段。</p>
          </div>
          <div class="ts [[secondary]] segment">
              <p>我是次要發音方式的片段。</p>
          </div>
          <div class="ts [[tertiary]] segment">
              <p>我是其次發音方式的片段。</p>
          </div>

  - Title      : 群組
    Description: 可以聚集多個片段為一體。
    Sections   :

      - Title      : 片段群組
        Description: 片段可以組合成一個群組。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[segments]]">
              <div class="ts segment">任何人皆自由且平等。</div>
              <div class="ts segment">莫忘初衷。</div>
              <div class="ts segment">永遠不放棄。</div>
              <div class="ts segment">為全民、大眾所設計、運作並傾聽。</div>
          </div>

      - Subtitle   : 群組和語意
        Description: 群組中的片段也可以具有語意。
        Since      : 2.3.3
        HTML       : |
          <div class="ts segments">
              <div class="ts [[primary]] segment">任何人皆自由且平等。</div>
              <div class="ts [[info]] segment">莫忘初衷。</div>
              <div class="ts [[warning]] segment">永遠不放棄。</div>
              <div class="ts [[positive]] segment">為全民、大眾所設計、運作並傾聽。</div>
          </div>

      - Subtitle   : 不同地發音語氣
        Description: 群組中的片段也可以用不同的語氣發音。
        Since      : 2.3.3
        HTML       : |
          <div class="ts segments">
              <div class="ts segment">任何人皆自由且平等。</div>
              <div class="ts [[secondary]] segment">莫忘初衷。</div>
              <div class="ts [[tertiary]] segment">永遠不放棄。</div>
          </div>

  - Title      : 狀態
    Description: 片段可以處於不同的狀態。
    Sections   :

      - Title   : 已停用
        Description: 淡化片段，用以顯示這個片段不再可用。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[disabled]] segment">
              <p>那傢伙不常說話，但是從她的言行舉止中，</p>
              <p>好像有什麼是能被發現的。</p>
          </div>

      - Title      : 讀取中
        Description: 片段可以顯示一個正在讀取的圖示。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[loading]] segment">
              <p>月月，搭拉安！。</p>
              <p>月月，搭拉安！。</p>
              <p>月月，搭拉安！。</p>
          </div>

  - Title      : 外觀
    Description: 片段可以有不同的外觀點綴。
    Sections   :

      - Title      : 增加內距
        Description: 片段的內距可以更大。
        Since      : 2.3.3
        HTML       : |
          <div class="ts segment">一般片段。</div>
          <div class="ts [[padded]] segment">增加內距的片段。</div>
          <div class="ts [[very padded]] segment">非常內距的片段。</div>

      - Title      : 縮減內距
        Description: 你可以移除所有內距、或水平和垂直內距。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[vertically fitted]] segment">這個片段沒有垂直內距。</div>
          <div class="ts [[fitted]] segment">這個片段沒有內距。</div>
          <div class="ts [[horizontally fitted]] segment">這個片段沒有水平內距。</div>

      - Title      : 輕巧版
        Description: 片段的寬度以內容為主。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[compact]] segment">
              月月，搭拉安！
          </div>

      - Title      : 浮動清理
        Description: |
          片段可以帶有 `clear: both` 的樣式用來整理內部的浮動元素。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[clearing]] segment">
              <button class="ts right floated {{button}}">浮動按鈕</button>
          </div>

      - Title      : 流動
        Description: 片段可以是流動寬度並移除相關圓角用以貼齊螢幕左右。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[fluid]] segment">
              這個片段適合用來貼齊容器左右邊。
          </div>

      - Title      : 文字對齊
        Description: 片段的文字對齊可以改變。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[left aligned]] segment">
              這段文字是置左對齊。
          </div>
          <div class="ts [[center aligned]] segment">
              這段文字是置中對齊。
          </div>
          <div class="ts [[right aligned]] segment">
              這段文字是置右對齊。
          </div>

      - Title      : 無框線
        Description: 片段可以沒有框線。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[borderless]] segment">
              這個片段沒有框線。
          </div>

      - Title      : 浮動
        Description: 片段可以向左或向右浮動。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[left floated]] segment">
              <p>我向左浮動。</p>
          </div>
          <div class="ts [[right floated]] segment">
              <p>我向右浮動。</p>
          </div>

      - Title      : 基本
        Description: 片段可以是只有基本結構的。
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[basic]] segment">
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
          </div>