範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
689
<span class="ts-badge">689</span>
概要
這個元件非常基本且僅用於呈現文字、數字用的徽章(如:下載人數、等級),如果希望帶有關閉按鈕或是圖示、多媒體頭像,應該使用關聯選項元件。
外觀
更改徽章的大小。
小的
預設
大的
<span class="ts-badge is-small">小的</span>
<span class="ts-badge">預設</span>
<span class="ts-badge is-large">大的</span>
在前或後新增間隔以避免與其他元件相鄰太近。
Yami Odymel 管理員
最新上架 好吃的糖果
這個椅子 特價 目前正大受好評。
Yami Odymel <span class="ts-badge is-start-spaced">管理員</span>
<span class="ts-badge is-end-spaced">最新上架</span> 好吃的糖果
這個椅子 <span class="ts-badge is-spaced">特價</span> 目前正大受好評。
組合應用
有時候表格裡可以加上計數徽章用以襯托相關標籤資訊。
主機名稱 | 狀態 | 標籤 |
---|---|---|
主要網站 | 正常 | 台灣 已啟用資料備援 |
使用者資料庫 | 正常 | 美國 已啟用資料備援 |
影片儲存伺服器 | 正常 | 美國 |
<div class="ts-box">
<table class="ts-table">
<thead>
<tr>
<th>主機名稱</th>
<th>狀態</th>
<th>標籤</th>
</tr>
</thead>
<tbody>
<tr>
<td>主要網站</td>
<td>正常</td>
<td>
<span class="ts-badge">台灣</span>
<span class="ts-badge is-secondary">已啟用資料備援</span>
</td>
</tr>
<tr>
<td>使用者資料庫</td>
<td>正常</td>
<td>
<span class="ts-badge">美國</span>
<span class="ts-badge is-secondary">已啟用資料備援</span>
</td>
</tr>
<tr>
<td>影片儲存伺服器</td>
<td>正常</td>
<td>
<span class="ts-badge">美國</span>
</td>
</tr>
</tbody>
</table>
</div>
想要強調某些最新消息就可以在標題裡使用計數徽章。
星際效應
新上映
《星際效應》是一部2014年上映的科幻電影,由克里斯多福·諾蘭執導和監製,馬修·麥康納、安·海瑟薇、潔西卡·崔絲坦和米高·肯恩主演。電影講述一組太空人通過穿越蟲洞為人類尋找新家園的冒險故事。
— 維基百科
<div class="ts-segment">
<div class="ts-header">
星際效應
<span class="ts-badge is-start-spaced">新上映</span>
</div>
<p>《星際效應》是一部2014年上映的科幻電影,由克里斯多福·諾蘭執導和監製,馬修·麥康納、安·海瑟薇、潔西卡·崔絲坦和米高·肯恩主演。電影講述一組太空人通過穿越蟲洞為人類尋找新家園的冒險故事。</p>
<div class="ts-text is-secondary">— 維基百科</div>
</div>
在尋找相似的元件嗎?