空白看板 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

請購買些商品之後再回來查看

<div class="ts-blankslate">
    <span class="ts-icon is-cart-shopping-icon"></span>
    <div class="header">購物車是空的</div>
    <div class="description">請購買些商品之後再回來查看</div>
    <div class="action">
        <button class="ts-button">瀏覽商品</button>
    </div>
</div>

結構

標題

簡短地告知使用者主要發生了什麼事情。

這裡擺放一些敘述讓使用者知道發生了什麼

<div class="ts-blankslate">
    <div class="header">主要的標題</div>
    <div class="description">這裡擺放一些敘述讓使用者知道發生了什麼</div>
</div>

說明

輔助說明來引導使用者如何解決這個問題。

目前沒有任何文章。

<div class="ts-blankslate">
    <div class="description">目前沒有任何文章。</div>
</div>

圖示

以主要圖示襯托意義。

嗨！你成功地註冊了我們的網站

<div class="ts-blankslate">
    <span class="ts-icon is-face-smile-wink-icon"></span>
    <div class="header">註冊完成</div>
    <div class="description">嗨！你成功地註冊了我們的網站</div>
</div>

動作區塊

主要推薦的行為，同個空白看板可以擺放多個動作區塊。

合併請求讓你可以在合併變更至主分支之前先審視相關的資訊。

了解更多

<div class="ts-blankslate">
    <span class="ts-icon is-code-pull-request-icon"></span>
    <div class="header">目前沒有任何合併請求</div>
    <div class="description">
        合併請求讓你可以在合併變更至主分支之前先審視相關的資訊。
    </div>
    <div class="action">
        <button class="ts-button">建立合併請求</button>
    </div>
    <div class="action">
        <a class="ts-text is-link is-small">了解更多</a>
    </div>
</div>

外觀

次要的

令整個語氣以次要的方式呈現，避免這個空白看板成為網頁的主體。

待貨物抵達本國時，你便能在這裡看到海關通知。

<div class="ts-blankslate is-secondary">
    <span class="ts-icon is-dolly-icon"></span>
    <div class="header">貨物尚未報關</div>
    <div class="description">待貨物抵達本國時，你便能在這裡看到海關通知。</div>
</div>

較窄的

縮窄容器的左右寬度以呈現更佳的文字閱讀效果，適合用於說明文字過長的時機。

為了配合政府的洗錢防治法規範，使用半音商業銀行的服務之前，我們要求任何人都必須先通過實名認證。

<div class="ts-blankslate is-narrow">
    <span class="ts-icon is-person-circle-question-icon"></span>
    <div class="header">你還沒有驗證身份</div>
    <div class="description">
        為了配合政府的洗錢防治法規範，使用半音商業銀行的服務之前，
        我們要求任何人都必須先通過實名認證。
    </div>
</div>

可互動的

增加視覺效果令使用者能夠透過滑鼠、觸控得知這個區塊可以被點擊或是互動。通常很適合讓整個空白看板作為檔案上傳、重新導向的區塊。

<div class="ts-box is-hollowed">
    <div class="ts-blankslate is-interactive">
        <span class="ts-icon is-arrow-pointer-icon"></span>
        <div class="header">將滑鼠移至此處</div>
    </div>
</div>

尺寸

以不同文字與圖示大小呈現一個空白看板的內容。

如果你最近有購買商品，待數分鐘後才會更新資料

<div class="ts-blankslate is-small">
    <span class="ts-icon is-receipt-icon"></span>
    <div class="header">尚未有收據</div>
    <div class="description">如果你最近有購買商品，待數分鐘後才會更新資料</div>
</div>
<div class="ts-blankslate">
    <span class="ts-icon is-receipt-icon"></span>
    <div class="header">尚未有收據</div>
    <div class="description">如果你最近有購買商品，待數分鐘後才會更新資料</div>
</div>
<div class="ts-blankslate is-large">
    <span class="ts-icon is-receipt-icon"></span>
    <div class="header">尚未有收據</div>
    <div class="description">如果你最近有購買商品，待數分鐘後才會更新資料</div>
</div>

組合應用

上傳區域

透過結合箱型容器呈現出一個能夠讓使用者拖曳檔案上傳的空虛區塊。

將圖片拖拉至此處進行上傳

<div class="ts-box is-hollowed">
    <div class="ts-blankslate is-interactive">
        <span class="ts-icon is-upload-icon"></span>
        <div class="header">上傳圖片或影音</div>
        <div class="description">將圖片拖拉至此處進行上傳</div>
    </div>
</div>

背景區塊

結合內容區塊來呈現較不重要的背景來與目前頁面明顯區隔。

檢查你的電子郵件信箱是否有登入信件。

<div class="ts-content is-secondary is-fitted">
    <div class="ts-blankslate">
        <span class="ts-icon is-envelope-icon"></span>
        <div class="header">信件已送出</div>
        <div class="description">檢查你的電子郵件信箱是否有登入信件。</div>
    </div>
</div>

搜尋欄位

動作區塊裡可以使用網格系統來呈現更豐富的行為。

但是你並不孤單，現在就找些什麼來跟隨吧！

<div class="ts-box">
    <div class="ts-blankslate is-narrow">
        <span class="ts-icon is-user-astronaut-icon"></span>
        <div class="header">你還沒有跟隨任何人</div>
        <div class="description">但是你並不孤單，現在就找些什麼來跟隨吧！</div>
        <div class="action">
            <div class="ts-grid">
                <div class="column is-fluid">
                    <div class="ts-input">
                        <input type="text" placeholder="搜尋人名…">
                    </div>
                </div>
                <div class="column">
                    <button class="ts-button">送出</button>
                </div>
            </div>
        </div>
    </div>
</div>

在尋找相似的元件嗎？

內容區塊