此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

邊緣抽屜

從側邊或底部彈出的延伸內容空間。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
詳細資料

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

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

<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="has-vertically-spaced">
                <p>我不想失去這份心情,我什麼都想嘗試。當我找到了這份熱情的時候,整個世界瞬間變得亮麗無比。</p>
                <p>但你卻嘆了氣並說道:「正因為我愛你,所以我不得不告訴你;你也差不多該長大了吧?」</p>
            </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-grid">
                <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-iconset has-top-spaced">
                <span class="ts-icon is-wand-magic-sparkles-icon"></span>
                <div class="content">
                    <div class="title">新的魔法已可供學習</div>
                    <div class="text">現在前往交誼廳就可以打聽相關情報。</div>
                </div>
            </div>
            <button class="ts-button is-fluid is-outlined has-top-spaced-large">關閉</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-grid">
                <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-list is-unordered has-vertically-spaced">
                <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-text is-secondary has-top-spaced">標題</div>
            <div class="ts-input is-underlined has-top-spaced">
                <input type="text" placeholder="標題包含…">
            </div>
            <div class="ts-text is-secondary has-top-spaced">時間範圍</div>
            <div class="ts-input is-underlined is-start-icon has-top-spaced">
                <span class="ts-icon is-calendar-icon"></span>
                <input type="date" value="2018-01-29">
            </div>
            <div class="ts-input is-underlined is-start-icon has-top-spaced">
                <span class="ts-icon is-clock-icon"></span>
                <input type="time" value="12:00">
            </div>
            <button class="ts-button is-fluid has-top-spaced-big">套用</button>
        </div>
    </div>
</div>
底部選單

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

<div class="ts-app-drawer is-bottom is-visible">
    <div class="content">
        <div class="ts-menu is-start-icon has-top-spaced">
            <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 的所屬組織商標