側邊欄
提供應用程式一個側邊的功能導覽或資訊呈現區塊。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-app-sidebar">
    <div class="header">
        啟動
    </div>
    <a class="item">
        <span class="ts-icon is-house-icon"></span> 首頁
    </a>
    <div class="header">
        管理
    </div>
    <a class="item is-active">
        <span class="ts-icon is-user-icon"></span> 使用者
    </a>
    <a class="item">
        <span class="ts-icon is-download-icon"></span> 下載檔案
    </a>
</div>
概要

這是一個專為應用程式設計的元件。

側邊欄預設是流動寬度,通常建議將其擺放至一個有固定寬度的區塊。

內容
標題

以標題文字區分每個功能區塊。

<div class="ts-app-sidebar">
    <div class="header">
        常用
    </div>
    <a class="item">
        <span class="ts-icon is-compass-icon"></span> 探索
    </a>
    <a class="item">
        <span class="ts-icon is-film-icon"></span> 訂閱項目
    </a>
    <div class="header">
        管理
    </div>
    <a class="item">
        <span class="ts-icon is-user-icon"></span> 個人檔案
    </a>
</div>
狀態
啟用的

啟用某個特定項目可以告訴使用者目前頁面屬於哪個功能。

<div class="ts-app-sidebar">
    <div class="header">
        管理
    </div>
    <a class="item">
        <span class="ts-icon is-scissors-icon"></span> 精選剪輯
    </a>
    <a class="item">
        <span class="ts-icon is-star-icon"></span> 收藏項目
    </a>
    <a class="item is-active">
        <span class="ts-icon is-thumbs-up-icon"></span> 讚好影片
    </a>
</div>
停用的

讓使用者無法與指定項目互動。

<div class="ts-app-sidebar">
    <div class="header">
        時間軸
    </div>
    <a class="item">
        <span class="ts-icon is-shoe-prints-icon"></span> 旅程足跡
    </a>
    <a class="item">
        <span class="ts-icon is-stopwatch-icon"></span> 限時活動
    </a>
    <a class="item is-disabled">
        <span class="ts-icon is-heart-icon"></span> 我的最愛
    </a>
</div>
外觀
較密的

變更元件的內距,令元素之間看起來更密集。

<div class="ts-app-sidebar is-dense">
    <div class="header">
        系統
    </div>
    <a class="item">
        <span class="ts-icon is-users-icon"></span> 會員管理
    </a>
    <div class="header">
        管理
    </div>
    <a class="item">
        <span class="ts-icon is-file-icon"></span> 檔案總覽
    </a>
    <a class="item is-active">
        <span class="ts-icon is-upload-icon"></span> 上傳新檔
    </a>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n