台灣正體

空白間距

用以自訂並區隔元件之間空白。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
我是微笑小安安,歡迎來到小安網站。
你將會在這裡看見一個魔法師的日常生活。
<div class="ts-segment">我是微笑小安安,歡迎來到小安網站。</div>
<div class="ts-space"></div>
<div class="ts-segment">你將會在這裡看見一個魔法師的日常生活。</div>
概要

通常空白間距可以被間隔容器自動解決,但如果需要特別指定某些間隙大小則可以使用此元件。

外觀
尺寸

透過變更尺寸大小,可以增加或減少空白間距。為了更加清楚地看見其變化,我們在這個範例替間距加上了背景顏色,在實際應用中並不會看到這個背景色。

<div class="ts-space is-small" style="background: var(--ts-gray-300);"></div>
<div class="ts-space" style="background: var(--ts-gray-300);"></div>
<div class="ts-space is-large" style="background: var(--ts-gray-300);"></div>
<div class="ts-space is-big" style="background: var(--ts-gray-300);"></div>
<div class="ts-space is-huge" style="background: var(--ts-gray-300);"></div>
在尋找相似的元件嗎?
外觀
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標