箱型容器 - 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">
        <p>任何已發布或是計畫中之產品及服務，皆不得用來刻意偏頗大眾想法、喜好、甚至混淆視聽，且該產品及服務不得擁有自我立場。</p>
    </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 style="width: 90px; height: 100%;" src="image.png">
    </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-left-indicated">
    <div class="ts-content">左邊標記</div>
</div>
<div class="ts-box is-right-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-elevated">
    <div class="ts-content">抬升的</div>
</div>
<div class="ts-box is-very-elevated">
    <div class="ts-content">非常抬升的</div>
</div>

直角的

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

直角箱型容器

<div class="ts-box is-squared">
    <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>

連結預覽卡片

在箱型容器裡擺放貼邊圖片和文字與標題就可以達成像 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>

在尋找相似的元件嗎？