標題 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

「你只能死一次，一定要死的轟轟烈烈。」

<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

<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>

在尋找相似的元件嗎？

文字