Segment

Used to create a grouping of related content or paragraph.
Example
Theme
Default
Default
Light
Dark
Scale
Medium
Large
Medium
Small
現實生活應該像二次元那樣充滿新鮮的挑戰卻又十分地美好,而計畫這樣的未來正在我們的目標之一。我們正試著找尋多個不同的方式實現這樣的夢想,即便現在不可行,我們也永不放棄。
<div class="ts-segment">
    現實生活應該像二次元那樣充滿新鮮的挑戰卻又十分地美好,而計畫這樣的未來正在我們的目標之一。我們正試著找尋多個不同的方式實現這樣的夢想,即便現在不可行,我們也永不放棄。
</div>
Variations
Secondary

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

TeaCat 是一個針對現代事物所特別設計的社群網站,其特色以具有隱私且沒有任何按讚功能為主。
<div class="ts-segment is-secondary">
    TeaCat 是一個針對現代事物所特別設計的社群網站,其特色以具有隱私且沒有任何按讚功能為主。
</div>
Tertiary

更沈重的語氣讓使用者知道這不是內容主體。

Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事有限公司。
<div class="ts-segment is-tertiary">
    Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事有限公司。
</div>

更改文字的對齊方式。

置起始位置
我置中
置結束位置
<div class="ts-segment is-start-aligned">
    置起始位置
</div>
<div class="ts-segment is-center-aligned">
    我置中
</div>
<div class="ts-segment is-end-aligned">
    置結束位置
</div>
Padded

加大片段的內距,適合用於排版。

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

片段的寬度預設會填滿父容器,但也能指定只符合內容寬度。

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

讓片段的某個邊緣有特別標記的樣式。

上部標記
下部標記
左邊標記
右部標記
<div class="ts-segment is-top-indicated">
    上部標記
</div>
<div class="ts-segment is-bottom-indicated">
    下部標記
</div>
<div class="ts-segment is-left-indicated">
    左邊標記
</div>
<div class="ts-segment is-right-indicated">
    右部標記
</div>
Emphasises

讓片段擁有邊緣標記的同時,更改其標記顏色語意。這可以用來強調這個片段呈現的內容是否危險、安全或是需讓人注意的。

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

透過陰影讓片段看起來有浮起的感覺,如果有一個需要備受矚目的中心內容(如:登入表單)這會是個好選擇。

抬升的
非常抬升的
<div class="ts-segment is-elevated">
    <div class="ts-content">抬升的</div>
</div>
<div class="ts-segment is-very-elevated">
    <div class="ts-content">非常抬升的</div>
</div>
Dense

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

建立人與人之間的聯繫並提供一個良好的內容創作環境是我們的首要目標。任何人都應該有不受拘束的創作自由,這也是我們最致力發展的目標。
<div class="ts-segment is-dense">
    建立人與人之間的聯繫並提供一個良好的內容創作環境是我們的首要目標。任何人都應該有不受拘束的創作自由,這也是我們最致力發展的目標。
</div>
Looking for similar components?
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel
An organization brand logo that owns Tocas UI