快顯視窗 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-modal is-visible">
    <div class="content">
        <div class="ts-content is-center-aligned is-vertically-padded">
            <div class="ts-header is-icon has-bottom-spaced">
                <span class="ts-icon is-circle-exclamation-icon"></span>
                你正要重新啟動伺服器
            </div>
            這個手續將會花上至少半小時，在這段期間內你將無法執行任何動作。
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content is-tertiary">
            <button class="ts-button is-fluid">了解</button>
        </div>
    </div>
</div>

概要

使用時需自行搭配 JavaScript 操控元件的可見狀態。

快顯視窗出現時會覆蓋整個畫面且使用者將無法與背景的元素互動，使用此元件時必須注意這件事情是否急迫到需要打斷使用者目前的操作。

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

外觀

可見的

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

<div class="ts-modal is-visible">
    <div class="content">
        <div class="ts-content">
            <div class="ts-grid is-middle-aligned">
                <div class="column is-fluid">
                    <div class="ts-header">伊繁星最高協議</div>
                </div>
                <div class="column">
                    <button class="ts-close"></button>
                </div>
            </div>
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content">
            我們希望透過這個協議能夠避免未來誤入歧途朝著並非當初的理想道路前進；顧名思義，最高協議中的所有定義都是旗下服務所必須遵循的核心條件，而且沒有任何規則可以覆蓋這些最上級的規定。這些協議在定制的時候參考了許多世界人權宣言的部份。
        </div>
    </div>
</div>

尺寸

更改視窗的寬度大小。

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

<div class="ts-modal is-small is-visible">
    <div class="content">
        <div class="ts-content is-center-aligned">
            小型視窗
        </div>
    </div>
</div>
<div class="ts-modal is-visible">
    <div class="content">
        <div class="ts-content is-center-aligned">
            預設視窗
        </div>
    </div>
</div>
<div class="ts-modal is-large is-visible">
    <div class="content">
        <div class="ts-content is-center-aligned">
            大型視窗
        </div>
    </div>
</div>

組合應用

輸入視窗

結合輸入欄位可以打造出一個等待使用者輸入資料的視窗。

<div class="ts-modal is-visible">
    <div class="content">
        <div class="ts-content">
            <div class="ts-header">輸入使用者名稱</div>
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content">
            <div class="ts-input">
                <input type="text" value="Yami Odymel" />
            </div>
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content is-tertiary">
            <div class="ts-wrap is-end-aligned">
                <button class="ts-button">確定</button>
                <button class="ts-button is-outlined">取消</button>
            </div>
        </div>
    </div>
</div>

可捲動內容

有時能指派 overflow: auto 樣式給過長的內容區塊讓其文字過長時可以捲動。

<div class="ts-modal is-visible">
    <div class="content">
        <div class="ts-content">
            <div class="ts-header">使用者條約</div>
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content" style="max-height: 170px; overflow-y: auto;">
            <p>我們希望透過這個協議能夠避免未來誤入歧途朝著並非當初的理想道路前進；顧名思義，最高協議中的所有定義都是旗下服務所必須遵循的核心條件，而且沒有任何規則可以覆蓋這些最上級的規定。這些協議在定制的時候參考了許多世界人權宣言的部份。</p>
            <p>在探討之後，這個協議主要能夠被區分為三個環節，分別是：「設計」時所該顧慮到的全面盤局、自我期許還有看待事物的「態度」，以及最為重要的「執行」手段。但無論如何—</p>
            <p>設計的時候應該為全民、大眾所設計、運作並傾聽；向著夢想的態度應該永不放棄；對事執行的時候則莫忘初衷。</p>
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content">
            <label class="ts-checkbox">
                <input type="checkbox" checked />
                我已閱讀上述所有內容且同意。
            </label>
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content is-tertiary">
            <button class="ts-button is-fluid">確定</button>
        </div>
    </div>
</div>