台灣正體

邊緣抽屜

從側邊或底部彈出的延伸內容空間。
初入上手
開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive 輔助樣式 Utilities
格局設計
箱型容器 Box 絕對置中 Center 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 空白間隔 Space 水平排列 Row 間隔容器 Wrap
表單
按鈕 Button 核取方塊 Checkbox 欄位分組 Fieldset 檔案上傳 File 輸入欄位 Input 選項按鈕 Radio 下拉式選擇 Select 項目切換 Selection 指撥開關 Switch
文字與段落
分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text
視覺回饋
圓形量測計 Gauge 讀取狀態 Loading 快顯視窗 Modal 提示訊息 Notice 預置內容 Placeholder 步驟指示器 Procedure 進度條 Progress 簡短通知 Snackbar
多媒體與圖示
大頭貼 Avatar 國家旗幟 Flag 圖示 Icon 圖示項目 Iconset 多媒體圖片 Image 圖片組合 Imageset
資料顯示
可折疊內容 Accordion 計數徽章 Badge 檢查清單 Checklist 關聯標籤 Chip 關閉按鈕 Close 交談會話 Conversation 清單 List 中繼資料 Meta 評分 Rating 統計數據 Statistic 表格 Table 時間軸 Timeline
導覽
導覽標記 Breadcrumb 彈出式選單 Dropdown 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab
應用程式
邊緣抽屜 App Drawer 格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar 頂部列 App Topbar
JavaScript 模組
選單模組 Module Dropdown 工具提示 Module Tooltip 分頁模組 Module Tab 樣式切換 Module Toggle
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
詳細資料

我不想失去這份心情,我什麼都想嘗試。當我找到了這份熱情的時候,整個世界瞬間變得亮麗無比。

但你卻嘆了氣並說道:「正因為我愛你,所以我不得不告訴你;你也差不多該長大了吧?」

<div class="ts-app-drawer is-visible is-right is-small">
    <div class="content">
        <div class="ts-content">
            <div class="ts-header is-large">詳細資料</div>
            <div class="ts-space"></div>
            <p>我不想失去這份心情,我什麼都想嘗試。當我找到了這份熱情的時候,整個世界瞬間變得亮麗無比。</p>
            <p>但你卻嘆了氣並說道:「正因為我愛你,所以我不得不告訴你;你也差不多該長大了吧?」</p>
            <div class="ts-space"></div>
            <button class="ts-button is-fluid is-outlined">確定</button>
        </div>
    </div>
</div>
概要

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

使用時需自行搭配 JavaScript 操控元件的可見狀態,你可以考慮使用 Tocas UI 的樣式切換模組。

邊緣抽屜會呈現在畫面上的某個邊緣(如:右側或底部)並蓋過整個畫面。適合用來擺放側邊購物車、行動裝置用的底部選單。

這個元件是一個雛型框架,如果希望在其中建立標題、頁腳跟動作按鈕,則需自行搭配其他元件,可以參考底部的組合應用章節。

外觀
可見的

邊緣抽屜預設是隱藏的,必須指定為「可見的」才會顯示在頁面上。這個設計是為了讓 JavaScript 能夠切換其可見度。

我們的初衷

這個網站初衷就是希望這些事情不再繼續發生,而那一天會讓這個網站變得不再有用。就目前如此,我們沒有足夠的力量改變這一切,但仍希望能以觀測者的角度讓你明瞭世界上發生了什麼事。

<div class="ts-app-drawer is-visible is-left is-small">
    <div class="content">
        <div class="ts-content">
            <div class="ts-row">
                <div class="column is-fluid">
                    <div class="ts-header is-large">我們的初衷</div>
                </div>
                <div class="column">
                    <button class="ts-close is-large is-secondary"></button>
                </div>
            </div>
            <p>這個網站初衷就是希望這些事情不再繼續發生,而那一天會讓這個網站變得不再有用。就目前如此,我們沒有足夠的力量改變這一切,但仍希望能以觀測者的角度讓你明瞭世界上發生了什麼事。</p>
        </div>
    </div>
</div>
位置

使用邊緣抽屜時必須指定位置,可用的位置有:is-right(右側)、is-left(左側)和 is-bottom(底部)。

最新消息
新的魔法已可供學習
現在前往交誼廳就可以打聽相關情報。
<div class="ts-app-drawer is-bottom is-visible">
    <div class="content">
        <div class="ts-content">
            <div class="ts-header is-large">最新消息</div>
            <div class="ts-space"></div>
            <div class="ts-iconset">
                <span class="ts-icon is-wand-magic-sparkles-icon"></span>
                <div class="content">
                    <div class="title">新的魔法已可供學習</div>
                    <div class="text">現在前往交誼廳就可以打聽相關情報。</div>
                </div>
            </div>
            <div class="ts-space is-large"></div>
            <button class="ts-button is-fluid is-outlined">關閉</button>
        </div>
    </div>
</div>
尺寸

更改邊緣抽屜的寬度大小,這個樣式只在使用左右側有效。

小型抽屜
預設抽屜
大型抽屜
<div class="ts-app-drawer is-small is-visible is-right">
    <div class="content">
        <div class="ts-content is-center-aligned">
            小型抽屜
        </div>
    </div>
</div>
<div class="ts-app-drawer is-visible is-right">
    <div class="content">
        <div class="ts-content is-center-aligned">
            預設抽屜
        </div>
    </div>
</div>
<div class="ts-app-drawer is-large is-visible is-right">
    <div class="content">
        <div class="ts-content is-center-aligned">
            大型抽屜
        </div>
    </div>
</div>
組合應用
關閉按鈕

使用邊緣抽屜時,通常建議結合關閉按鈕來讓使用者有更明確的方式可以關閉抽屜。

備註事項
蘆森詩音
天野悟美
佐藤綾
<div class="ts-app-drawer is-visible is-right is-small">
    <div class="content">
        <div class="ts-content">
            <div class="ts-row">
                <div class="column is-fluid">
                    <div class="ts-header is-large">備註事項</div>
                </div>
                <div class="column">
                    <button class="ts-close is-large is-secondary"></button>
                </div>
            </div>
            <div class="ts-space"></div>
            <div class="ts-list is-unordered">
                <div class="item">蘆森詩音</div>
                <div class="item">天野悟美</div>
                <div class="item">佐藤綾</div>
            </div>
        </div>
    </div>
</div>
篩選條件

側邊的邊緣抽屜裡面可以擺放部份表單元件,例如:輸入欄位

篩選條件
標題
時間範圍
<div class="ts-app-drawer is-left is-visible is-small">
    <div class="content">
        <div class="ts-content">
            <div class="ts-header is-large">篩選條件</div>
            <div class="ts-space is-large"></div>
            <div class="ts-text is-secondary">標題</div>
            <div class="ts-space is-small"></div>
            <div class="ts-input is-underlined is-fluid">
                <input type="text" placeholder="標題包含…">
            </div>
            <div class="ts-space is-large"></div>
            <div class="ts-text is-secondary">時間範圍</div>
            <div class="ts-space is-small"></div>
            <div class="ts-input is-underlined is-start-icon is-fluid">
                <span class="ts-icon is-calendar-icon"></span>
                <input type="date" value="2018-01-29">
            </div>
            <div class="ts-space is-small"></div>
            <div class="ts-input is-underlined is-start-icon is-fluid">
                <span class="ts-icon is-clock-icon"></span>
                <input type="time" value="12:00">
            </div>
            <div class="ts-space is-big"></div>
            <button class="ts-button is-fluid">套用</button>
        </div>
    </div>
</div>
底部選單

貼齊底部的邊緣抽屜再搭配一個選單就可以達成像行動裝置那樣的 Bottom Sheet 元件。為了讓使用者更方便關閉抽屜,我們建議你再額外加上一個按鈕可供手動關閉。

<div class="ts-app-drawer is-bottom is-visible">
    <div class="content">
        <div class="ts-space"></div>
        <div class="ts-menu is-start-icon">
            <a class="item">
                <span class="ts-icon is-copy-icon"></span>
                複製檔案
            </a>
            <a class="item">
                <span class="ts-icon is-trash-can-icon"></span>
                移至回收桶
            </a>
        </div>
        <div class="ts-content">
            <button class="ts-button is-fluid is-outlined">關閉</button>
        </div>
    </div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標