箱型容器 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

好吃的千層蛋糕！

在 5 月之前於線上網路門市訂購，現在還特別加贈限量環保袋。

<div class="ts-box">
    <div class="ts-image">
        <img src="image.png">
    </div>
    <div class="ts-content">
        <div class="ts-header is-heavy">好吃的千層蛋糕！</div>
        <p>在 5 月之前於線上網路門市訂購，現在還特別加贈限量環保袋。</p>
    </div>
</div>

概要

箱型容器會與內容區塊、表格、圖片這種貼邊元件一起使用。

結構

象徵圖示

在角落擺放一個圖示作為其象徵。

任何已發布或是計畫中之產品及服務，
皆不得用來刻意偏頗大眾想法、喜好、甚至混淆視聽，
且該產品及服務不得擁有自我立場。

<div class="ts-box">
    <div class="ts-content">
        任何已發布或是計畫中之產品及服務，<br>
        皆不得用來刻意偏頗大眾想法、喜好、甚至混淆視聽，<br>
        且該產品及服務不得擁有自我立場。
    </div>
    <div class="symbol">
        <span class="ts-icon is-circle-exclamation-icon"></span>
    </div>
</div>

外觀

水平的

容器裡的元素排列預設為上下垂直，但若排版需要則可以將其改為左右水平排列。

Zedd - Papercut (Audio) ft. Troye Sivan

Get "True Colors" on iTunes: http://smarturl.it/ZeddTrueColors

<div class="ts-box is-horizontal">
    <div class="ts-image is-covered">
        <img src="image.png" width="90" height="100%">
    </div>
    <div class="ts-content">
        <div class="ts-header">
            Zedd - Papercut (Audio) ft. Troye Sivan
        </div>
        <p>Get "True Colors" on iTunes: http://smarturl.it/ZeddTrueColors</p>
    </div>
</div>

最小寬度的

箱型容器預設是流動寬度，但也能以內容寬度為主。

這是一個來自台灣的社群網站，在這裡我們並沒有「讚」或是「已讀」。

<div class="ts-box is-collapsed">
    <div class="ts-content">
        <p>這是一個來自台灣的社群網站，在這裡我們並沒有「讚」或是「已讀」。</p>
    </div>
</div>

標記的

讓容器的某個邊緣有特別標記的樣式。

上部標記

下部標記

左邊標記

右部標記

<div class="ts-box is-top-indicated">
    <div class="ts-content">上部標記</div>
</div>
<div class="ts-box is-bottom-indicated">
    <div class="ts-content">下部標記</div>
</div>
<div class="ts-box is-start-indicated">
    <div class="ts-content">左邊標記</div>
</div>
<div class="ts-box is-end-indicated">
    <div class="ts-content">右部標記</div>
</div>

語意

更改標記的顏色語意，必須搭配「標記的」使用。

負面的

正面的

警告的

<div class="ts-box is-negative is-top-indicated">
    <div class="ts-content">負面的</div>
</div>
<div class="ts-box is-positive is-top-indicated">
    <div class="ts-content">正面的</div>
</div>
<div class="ts-box is-warning is-top-indicated">
    <div class="ts-content">警告的</div>
</div>

抬升的

透過陰影讓容器看起來有浮起的感覺。

抬升的

<div class="ts-box is-raised">
    <div class="ts-content">抬升的</div>
</div>

直角的

讓邊角以直角呈現而不再圓潤。

直角箱型容器

<div class="ts-box is-sharp">
    <div class="ts-content">直角箱型容器</div>
</div>

空虛的

透過加粗虛線描繪外框，通常用以呈現空的區塊。

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

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

組合應用

資訊概要

透過搭配網格系統、象徵圖示可以營造出系統儀表板頂部常有的統計數據概要資訊。

42,689

本月拜訪次數

8,652

351

總會員數

<div class="ts-grid is-2-columns">
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <div class="ts-statistic">
                    <div class="value">42,689</div>
                    <div class="comparison is-increased">32</div>
                </div>
                本月拜訪次數
            </div>
            <div class="symbol">
                <span class="ts-icon is-eye-icon"></span>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="ts-box">
            <div class="ts-content">
                <div class="ts-statistic">
                    <div class="value">8,652</div>
                    <div class="comparison is-increased">351</div>
                </div>
                總會員數
            </div>
            <div class="symbol">
                <span class="ts-icon is-users-icon"></span>
            </div>
        </div>
    </div>
</div>

警示卡片

帶有負面語意的標記卡片可以用來警示使用者。

可用餘額不足

你的錢包餘額已經不夠支付本次的伺服器租賃費用。若超過付款期限仍未儲值，資料將會暫時無法存取。

<div class="ts-box is-negative is-start-indicated">
    <div class="ts-content">
        <div class="ts-header is-negative">可用餘額不足</div>
        <p>你的錢包餘額已經不夠支付本次的伺服器租賃費用。若超過付款期限仍未儲值，資料將會暫時無法存取。</p>
    </div>
</div>

連結預覽卡片

在箱型容器裡擺放貼邊圖片和文字與標題就可以達成像 Facebook、Twitter 那樣的連結預覽卡片。

yami.io/rog-and-hololive/

華碩自稱「中國公司」，中國分部發言誓死阻撓日本工商

在微博上的《ROG玩家国度》小編便發文了，誓死也會阻止這次日本華碩與 Hololive 的工商互動。多數中國網友表示期待且「買不買華碩就看這次了」。

<div class="ts-box" style="max-width: 360px">
    <div class="ts-image">
        <img src="image.png">
    </div>
    <div class="ts-content is-secondary">
        <div class="ts-text is-description">yami.io/rog-and-hololive/</div>
        <div class="ts-header is-truncated is-heavy">華碩自稱「中國公司」，中國分部發言誓死阻撓日本工商</div>
        <div class="ts-text is-2-lines is-description">在微博上的《ROG玩家国度》小編便發文了，誓死也會阻止這次日本華碩與 Hololive 的工商互動。多數中國網友表示期待且「買不買華碩就看這次了」。</div>
    </div>
</div>

在尋找相似的元件嗎？

內容區塊