內容區塊
用以包覆內容的內距區塊。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
透過 CSS Variable 取代 Sass 並設計一個臻至完美的動態色彩主題系統
色彩佈景系統在前端實作時常常都是個不小的問題,直到 Sass、Less 這種預先處理器的出現才解決了不少的麻煩,因為你能夠透過短短幾行程式碼就讓程式幫你自動處理顏色的部份,而這方面的教學在國外網站中也不是少數。
<div class="ts-box">
    <div class="ts-content is-dark is-dense">
        透過 CSS Variable 取代 Sass 並設計一個臻至完美的動態色彩主題系統
    </div>
    <div class="ts-content">
        色彩佈景系統在前端實作時常常都是個不小的問題,直到 Sass、Less 這種預先處理器的出現才解決了不少的麻煩,因為你能夠透過短短幾行程式碼就讓程式幫你自動處理顏色的部份,而這方面的教學在國外網站中也不是少數。
    </div>
</div>
概要

這個元件應該會被大量地重複使用,只要希望內容有內距,通常就會使用此元素。這個元件也很常會和箱型容器一同使用,如果沒有太大的要求則可以直接使用片段元件。

狀態
啟用的

表示某個內容區塊被選中。

蘋果
菠羅
拔鳳梨
<div class="ts-box">
    <div class="ts-content is-dense">蘋果</div>
    <div class="ts-content is-active is-dense">菠羅</div>
    <div class="ts-content is-dense">拔鳳梨</div>
</div>
停用的

表示目前已不再提供可用的功能。

卡莉絲
雷莉亞
依可諾爾
<div class="ts-box">
    <div class="ts-content is-dense">卡莉絲</div>
    <div class="ts-content is-disabled is-dense">雷莉亞</div>
    <div class="ts-content is-dense">依可諾爾</div>
</div>
外觀
次要的

淡化的內容區塊會以較不顯眼的方式出現,通常用以呈現某個資訊概要或頁腳。

Event Store 是一個基於 CQRS 與 Event Sourcing 理念所衍生出來的新概念並由 C Sharp 撰寫。這是一個微服務事件儲藏中心,這可能很難懂,但別緊張,這些都會在本文中得到答案。
6,439,852 觀看次數
<div class="ts-box">
    <div class="ts-content">
        Event Store 是一個基於 CQRS 與 Event Sourcing 理念所衍生出來的新概念並由 C Sharp 撰寫。這是一個微服務事件儲藏中心,這可能很難懂,但別緊張,這些都會在本文中得到答案。
    </div>
    <div class="ts-divider"></div>
    <div class="ts-content is-secondary is-dense">
        <span class="ts-icon is-end-spaced is-eye-icon"></span> 6,439,852 觀看次數
    </div>
</div>
非主要的

更沈重的語氣讓使用者知道這不是內容主體,但可以作為概要矚目看板。

這個故事結束了
所有人不是死亡就是離開了,也許有一天會有人替這個遺跡找到新的用處。
<div class="ts-content is-tertiary is-vertically-very-padded">
    <div class="ts-center">
        <div class="ts-header is-large">這個故事結束了</div>
        <div class="ts-text is-secondary">所有人不是死亡就是離開了,也許有一天會有人替這個遺跡找到新的用處。</div>
    </div>
</div>
文字對齊

更改文字的對齊方式。

置起始位置
我置中
置結束位置
<div class="ts-box">
    <div class="ts-content is-start-aligned">
        置起始位置
    </div>
    <div class="ts-content is-center-aligned">
        我置中
    </div>
    <div class="ts-content is-end-aligned">
        置結束位置
    </div>
</div>
可互動的

增加視覺效果令使用者能夠透過滑鼠、觸控得知這個區塊可以被點擊或是互動。

下載
最愛
彙整
<div class="ts-box">
    <div class="ts-content is-interactive is-dense">
        <span class="ts-icon is-end-spaced is-download-icon"></span> 下載
    </div>
    <div class="ts-content is-interactive is-active is-dense">
        <span class="ts-icon is-end-spaced is-heart-icon"></span> 最愛
    </div>
    <div class="ts-content is-interactive is-dense">
        <span class="ts-icon is-end-spaced is-box-archive-icon"></span> 彙整
    </div>
</div>
增加內距

加大內容區塊的內距,適合用於排版。

這個區塊的內距是原本的 3 倍。
這個區塊的內距是原本的 1.5 倍。
僅有增加左右水平內距。
僅有增加上下垂直內距。
<div class="ts-box">
    <div class="ts-content is-very-padded">
        這個區塊的內距是原本的 3 倍。
    </div>
</div>
<div class="ts-box">
    <div class="ts-content is-padded">
        這個區塊的內距是原本的 1.5 倍。
    </div>
</div>
<div class="ts-box">
    <div class="ts-content is-horizontally-padded">
        僅有增加左右水平內距。
    </div>
</div>
<div class="ts-box">
    <div class="ts-content is-vertically-padded">
        僅有增加上下垂直內距。
    </div>
</div>
圓角的

使區塊本身的四個角落以圓角呈現,避免太過尖銳。

透過網路改變現實生活中的事件。比起創新我們更喜歡革新並找出大家真正所需。
<div class="ts-content is-rounded is-tertiary">
    透過網路改變現實生活中的事件。比起創新我們更喜歡革新並找出大家真正所需。
</div>
無內距

移除區塊的內距。

在同個屋簷下,做著那一成不變的事情。就算沒有外星人來襲擊,偶爾也會發生一些意想之外的事情。
<div class="ts-box">
    <div class="ts-content is-fitted">
        在同個屋簷下,做著那一成不變的事情。就算沒有外星人來襲擊,偶爾也會發生一些意想之外的事情。
    </div>
</div>
較密的

變更元件的內距,令元素之間看起來更密集。

圖像複用、反轉、鏡射:怎麼將遊戲壓縮在 40 KB 以下還同時保持關卡獨特性?
Micro Mages 為了保持關卡的獨特性,開發者還特別精心設計了一個「偏移索引」系統,而遊戲中的種種設計都值得令人仔細觀察一番,而這就成為 Micro Mages 對這款遊戲最直接的廣告賣點。
<div class="ts-box">
    <div class="ts-content is-dense">
        <div class="ts-header">圖像複用、反轉、鏡射:怎麼將遊戲壓縮在 40 KB 以下還同時保持關卡獨特性?</div>
        Micro Mages 為了保持關卡的獨特性,開發者還特別精心設計了一個「偏移索引」系統,而遊戲中的種種設計都值得令人仔細觀察一番,而這就成為 Micro Mages 對這款遊戲最直接的廣告賣點。
    </div>
</div>
組合應用
暗色區塊

以暗色主題呈現某個特定區塊,這與主題色系有關。

けものフレンズ
Welcome to ようこそジャパリパーク!
今日もドッタンバッタン大騒ぎ
<div class="ts-box">
    <div class="ts-content is-dark is-dense">
        けものフレンズ
    </div>
    <div class="ts-content">
        Welcome to ようこそジャパリパーク!<br>
        今日もドッタンバッタン大騒ぎ
    </div>
</div>
無內容狀態

在沒有資料的情況下提供預設訊息或建議行為。

購物車是空的
請購買些商品之後再回來查看
<div class="ts-content is-tertiary is-vertically-very-padded is-rounded">
    <div class="ts-center">
        <div class="ts-icon is-disabled is-heading is-cart-shopping-icon"></div>
        <div class="ts-space"></div>
        <div class="ts-header is-secondary">購物車是空的</div>
        <div class="ts-text is-secondary">請購買些商品之後再回來查看</div>
        <div class="ts-space is-large"></div>
        <button class="ts-button">瀏覽商品</button>
    </div>
</div>
概要看板

在某些頁面的開頭上方可以擺放概要看板用來指示使用者目前頁面的用途。

建立使用者
初始化一個使用者資料並授予登入權限。
<div class="ts-content is-tertiary is-vertically-very-padded">
    <div class="ts-header is-large">建立使用者</div>
    <div class="ts-text is-secondary">初始化一個使用者資料並授予登入權限。</div>
</div>
上傳區域

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

上傳圖片或影音
將圖片拖拉至此處進行上傳
<div class="ts-box is-hollowed">
    <div class="ts-content is-vertically-very-padded">
        <div class="ts-center">
            <div class="ts-icon is-disabled is-heading is-upload-icon"></div>
            <div class="ts-space"></div>
            <div class="ts-header is-secondary">上傳圖片或影音</div>
            <div class="ts-text is-secondary">將圖片拖拉至此處進行上傳</div>
        </div>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n