標題

針對某個主題以不同語氣和大小呈現文字的重要性。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
「你只能死一次,一定要死的轟轟烈烈。」
<div class="ts-header">「你只能死一次,一定要死的轟轟烈烈。」</div>
概要

這個元件與文字十分相似,但預設會以較大的字體尺寸呈現並允許帶有圖示或子標題。

外觀
圖示的

帶有象徵圖示的標題同時會置中。

使用者群組
<div class="ts-header is-icon">
    <span class="ts-icon is-users-icon"></span>
    使用者群組
</div>
側邊圖示的

在側邊擺放象徵圖示的標題。

99.9% 保證穩定上線
<div class="ts-header is-start-icon">
    <span class="ts-icon is-plug-icon"></span>
    99.9% 保證穩定上線
</div>
沈重的

以最粗的方式標註某段文字。

今天是芥末日!
<div class="ts-header is-heavy">今天是芥末日!</div>
負面的

含有危險、負面意味標語。

刪除檔案手續
<div class="ts-header is-negative">刪除檔案手續</div>
次要的

用以呈現較不重要的標題,例如:子標題。

從資料庫中建立一個全新的使用者。
<div class="ts-header is-secondary">從資料庫中建立一個全新的使用者。</div>
截斷的

文字超過一定寬度之後就會被截斷而不會換行或溢出,通常父容器需要有個固定寬度。

豔陽高照,前方的道路什麼都看不見。明明不清楚前方的事物,卻感覺自己正在邁向的是一個新世界。
<div class="ts-header is-truncated">豔陽高照,前方的道路什麼都看不見。明明不清楚前方的事物,卻感覺自己正在邁向的是一個新世界。</div>
大、小寫的

強制使某段文字大小寫,僅能用於英文。

Update Avatar
Update Avatar
<div class="ts-header is-uppercased">Update Avatar</div>
<div class="ts-header is-lowercased">Update Avatar</div>
對齊

更改文字的對齊方式。

置起始位置
置中對齊
置結束位置
<div class="ts-header is-start-aligned">置起始位置</div>
<div class="ts-header is-center-aligned">置中對齊</div>
<div class="ts-header is-end-aligned">置結束位置</div>
尺寸

相較於其他元件,標題有更多的大小尺寸可供選擇。

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