TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
							Title      : 側邊欄
Description: 從側邊滑出來，然後又滑回去了。
Outline    : |
  在 Tocas UI 中並沒有漢堡選單（類似 Bootstrap 的響應式選單），因為那較不直覺，容易令人猜測選單的出現位置。為了解決這個問題 Tocas UI 有著類似原生應用程式一樣的選單。

  側邊欄只能用於網頁最頂層，而不能嵌套在頁面上的容器內。但為了良好地示範側邊欄的應用，這個頁面上有稍微修改令側邊欄能夠套入容器中。

Definitions:

  - Title      : 頁面佈局
    Description: 一但使用了側邊欄，你就必須更改頁面結構。
    Sections   :

      - Title      : 頁面推動器和側邊欄
        Description: 側邊欄出現時會將頁面向特定方向推動，為了達到這個效果，網頁中 `<body>` 的結構就必須像下面這樣做。
        type       : code
        Since      : 2.3.3
        HTML       : |
          <body>
              <!-- 側邊欄元件 -->
              <div class="ts left [[sidebar]]">
              </div>
              <!-- / 側邊欄元件 -->
              <!-- 頁面推動器 -->
              <div class="[[pusher]]">
                  <!-- 網頁內容擺置於此 -->
              </div>
              <!-- / 頁面推動器 -->
          </body>

      - Title      : 擠壓的推動器
        Description: 通常來說側邊欄出現時，會將頁面往某個方向推。但你能讓頁面呈現被擠壓而不是被推出螢幕外。如果你有一個常態的功能側邊欄就很適合使用這種推動器。
        type       : code
        Since      : 2.3.3
        HTML       : |
          <div class="[[squeezable]] pusher">
              <!-- 網頁內容擺置於此 -->
          </div>

  - Title      : 種類
    Description: 側邊欄具有不同的種類。
    Sections   :

      - Title      : 基本
        Description: 一個最基本的側邊欄會帶有內距，你能夠在內部擺置其他元件。
        type       : sidebar
        Since      : 2.3.3
        HTML       : |
          <div class="ts static visible [[left sidebar]]">
              <div class="ts {{header}}">
                  搭拉！
                  <div class="sub header">你打開了秘密的側邊欄！</div>
              </div>
              <div class="ts {{segment}}">
                  你可以像這樣在側邊欄放置很多不同的元件。
              </div>
          </div>

      - Title      : 垂直選單
        Description: 側邊欄也能夠是一個由選單元件所組成的，這會很常用到。搭配 `inverted` 的反色語氣能讓側邊選單更加的明顯。
        type       : sidebar
        Since      : 2.3.3
        HTML       : |
          <div class="ts static visible left sidebar inverted [[vertical menu]]">
              <a class="item">首頁</a>
              <a class="item">文件</a>
              <a class="item">下載</a>
              <div class="item">
                  首頁功能
                  <div class="menu">
                      <a class="active item">搜尋</a>
                      <a class="item">新增</a>
                      <a class="item">移除</a>
                  </div>
              </div>
              <a class="bottom item">登出</a>
          </div>

  - Title      : 狀態
    Description: 側邊欄和相關的元件有不同的狀態。
    Sections   :

      - Title      : 靜態顯示
        Description: 側邊欄在預設情況下是隱藏的，你可以手動將其保持在顯示狀態。
        type       : sidebar
        Since      : 2.3.3
        HTML       : |
          <div class="ts [[static visible]] left sidebar">
              <div class="ts {{header}}">
                  <i class="unhide {{icon}}"></i>
                  預設顯示
              </div>
              <p>這個側邊欄不需要透過 JavaScript 切換，就會直接顯示出來。</p>
          </div>

  - Title      : 外觀
    Description: 側邊欄有著不同的外觀點綴。
    Sections   :

      - Title      : 水平方向
        Description: 一個側邊欄必須要指定在螢幕上呈現的方向。
        type       : sidebar
        Since      : 2.3.3
        HTML       : |
          <div class="ts static visible [[left]] sidebar">
              <div class="ts {{header}}">
                  <i class="left arrow {{icon}}"></i>
                  靠左
                  <div class="sub header">哇喔！這是個靠左邊的側邊欄呢！</div>
              </div>
          </div>
          <div class="ts static visible [[right]] sidebar">
              <div class="ts {{header}}">
                  <i class="right arrow {{icon}}"></i>
                  靠右
                  <div class="sub header">或者也能像這樣向右靠齊。</div>
              </div>
          </div>

      - Title      : 覆蓋的
        Description: 側邊欄一般來說會將網頁內容往旁邊推，但你可以讓側邊欄是覆蓋並浮在頁面上的。這麼做的話頁面內容就不會被推到一旁。
        type       : sidebar
        Since      : 2.3.3
        HTML       : |
          <div class="ts static visible [[overlapped]] left sidebar">
              這個側邊欄會覆蓋在頁面內容上方。
          </div>

      - Title      : 無內距
        Description: 側邊欄可以沒有內距，這很適合擺放流動寬度的元件。
        type       : sidebar
        Since      : 2.3.3
        HTML       : |
          <div class="ts static visible [[fitted]] left sidebar">
              <div class="ts small fluid inverted negative {{message}}">
                  <div class="header">帳號不安全。</div>
                  請確保您已啟用二步驟驗證。
              </div>
          </div>

      - Title      : 增加內距
        Description: 你可以增加側邊欄的內距，看起來會更寬闊。
        type       : sidebar
        Since      : 2.3.3
        HTML       : |
          <div class="ts static visible [[padded]] left sidebar">
              增加內距的側邊欄。
          </div>
          <div class="ts static visible [[very padded]] right sidebar">
              增加更多內距的側邊欄。
          </div>

      - Title      : 寬度
        Description: |
          <p>你可以更改側邊欄的寬度。</p>
          <table class="ts small stackable definition table">
              <thead>
                  <tr>
                      <th></th>
                      <th>64px</th>
                      <th>180px</th>
                      <th>230px</th>
                      <th>300px</th>
                      <th>360px</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>樣式名稱</td>
                      <td>`very thin`</td>
                      <td>`thin`</td>
                      <td>預設</td>
                      <td>`wide`</td>
                      <td>`very wide`</td>
                  </tr>
                  <tr>
                      <td>中文稱呼</td>
                      <td>非常窄</td>
                      <td>窄的</td>
                      <td></td>
                      <td>寬的</td>
                      <td>非常寬</td>
                  </tr>
                  <tr>
                      <td>行動裝置全寬</td>
                      <td><i class="x icon"></i></td>
                      <td><i class="x icon"></i></td>
                      <td><i class="x icon"></i></td>
                      <td><i class="positive check icon"></i></td>
                      <td><i class="positive check icon"></i></td>
                  </tr>
              </tbody>
          </table>
        type       : sidebar
        Since      : 2.3.3
        HTML       : |
          <div class="ts static visible [[wide]] left sidebar vertical {{menu}}">
              <div class="image item">
                  <img src="!-16:9-!">
              </div>
              <a class="item">Yami Odymel</a>
              <div class="item">
                  個人資料
                  <div class="menu">
                      <a class="active item">隱私</a>
                      <a class="item">好友</a>
                      <a class="item">文章</a>
                  </div>
              </div>
          </div>

Modules:

  - Title      : JavaScript
    Description: 側邊欄有提供可用的 JavaScript 模塊。
    Sections   :

      - Title      : 顯示切換
        Description: |
          <p>你需要透過 JavaScript 才能夠切換側邊欄的出現與消失。</p>
          <table class="ts small stackable definition table">
              <thead>
                  <tr>
                      <th></th>
                      <th>註釋</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>show</td>
                      <td>顯示指定側邊欄。</td>
                  </tr>
                  <tr>
                      <td>hide</td>
                      <td>隱藏指定側邊欄。</td>
                  </tr>
                  <tr>
                      <td>toggle</td>
                      <td>切換側邊欄。當側邊欄是隱藏時會顯示、顯示時則隱藏。</td>
                  </tr>
              </tbody>
          </table>
        type       : code
        Since      : 2.3.3
        HTML       : |
          <div class="ts demo left sidebar inverted vertical menu">
              <a class="item">首頁</a>
              <a class="item">文件</a>
              <a class="item">部落格</a>
          </div>
        JavaScript: |
          ts('.left.inverted.sidebar').sidebar('toggle');

      - Title      : 選項
        Description: |
          <p>你能夠透過選項初始化並設置側邊欄的特性。</p>
          <table class="ts small celled stackable definition table">
              <thead>
                  <tr>
                      <th></th>
                      <th>預設值</th>
                      <th>註釋</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>dimPage</td>
                      <td>false</td>
                      <td>是否要在側邊欄出現時將主畫面淡化。</td>
                  </tr>
                  <tr>
                      <td>exclusive</td>
                      <td>false</td>
                      <td>是否僅允許頁面上同時只會出現一個側邊欄，若為是，則會在開啟該側邊欄的同時關閉其他側邊欄。</td>
                  </tr>
                  <tr>
                      <td>scrollLock</td>
                      <td>false</td>
                      <td>是否要在側邊欄出現時鎖定螢幕捲軸的滾動。</td>
                  </tr>
                  <tr>
                      <td>closable</td>
                      <td>true</td>
                      <td>是否允許使用者點擊主畫面將側邊欄關閉。</td>
                  </tr>
              </tbody>
          </table>
        type       : code
        Since      : 2.3.3
        HTML       : |
          <div class="ts demo left sidebar">
              <div class="ts {{header}}">
                  搭拉！
                  <div class="sub header">你打開了秘密的側邊欄！</div>
              </div>
              <div class="ts {{segment}}">
                  你可以像這樣在側邊欄放置很多不同的元件。
              </div>
          </div>
        JavaScript: |
          ts('.left.sidebar:not(.inverted)').sidebar({
              dimPage: true,
              scrollLock: true
          }).sidebar('toggle');