邊緣抽屜 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

詳細資料

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

但你卻嘆了氣並說道：「正因為我愛你，所以我不得不告訴你；你也差不多該長大了吧？」

<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>

尺寸

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

	280px	380px	580px
樣式名稱	is-small	預設	is-large

小型抽屜

預設抽屜

大型抽屜

<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>