計數徽章

最基礎的數字、文字標記或是未讀計數。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
689
<span class="ts-badge">689</span>
概要

計數徽章僅能呈現基本文字(如:下載人數、等級),若希望帶有關閉按鈕或是圖示、多媒體頭像,請使用關聯標籤元件。

外觀
次要的

以較不重要的方式呈現數值。

16,226
<span class="ts-badge is-secondary">16,226</span>
外框線的

僅描繪外框線的簡潔徽章。

1,386
<span class="ts-badge is-outlined">1,386</span>
負面的

表達出危險或是負面語氣。

320
<span class="ts-badge is-negative">320</span>
尺寸

更改徽章的大小。

小的 預設 大的
<span class="ts-badge is-small">小的</span>
<span class="ts-badge">預設</span>
<span class="ts-badge is-large">大的</span>
較密的

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

最新的
<span class="ts-badge is-dense">最新的</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-box">
    <div class="ts-content">
        <div class="ts-header">
            星際效應
            <span class="ts-badge is-start-spaced">新上映</span>
        </div>
        <p>《星際效應》是一部2014年上映的科幻電影,由克里斯多福·諾蘭執導和監製,馬修·麥康納、安·海瑟薇、潔西卡·崔絲坦和米高·肯恩主演。電影講述一組太空人通過穿越蟲洞為人類尋找新家園的冒險故事。</p>
        <div class="ts-text is-secondary">— 維基百科</div>
    </div>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標