彈出視窗
跳出強制性互動的視窗提供附屬資訊或是詢問。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
你正要重新啟動伺服器
這個手續將會花上至少半小時,在這段期間內你將無法執行任何動作。
<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">
                <span class="ts-icon is-circle-exclamation-icon"></span>
                你正要重新啟動伺服器
            </div>
            <div class="ts-space"></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 is-dense">
            <div class="ts-row">
                <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>
尺寸

更改視窗的寬度大小。

小型視窗
預設視窗
大型視窗
<div class="ts-modal is-small is-visible">
    <div class="content">
        <div class="ts-content is-center-aligned is-tertiary">
            小型視窗
        </div>
    </div>
</div>
<div class="ts-modal is-visible">
    <div class="content">
        <div class="ts-content is-center-aligned is-tertiary">
            預設視窗
        </div>
    </div>
</div>
<div class="ts-modal is-large is-visible">
    <div class="content">
        <div class="ts-content is-center-aligned is-tertiary">
            大型視窗
        </div>
    </div>
</div>
組合應用
輸入視窗

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

輸入使用者名稱
<div class="ts-modal is-visible">
    <div class="content">
        <div class="ts-content is-dense">
            <div class="ts-header">輸入使用者名稱</div>
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content">
            <div class="ts-input is-fluid">
                <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 is-dense">
            <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>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n