統計數據

顯示分析數值與統計數字。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
8,964
32
<div class="ts-statistic">
    <div class="value">8,964</div>
    <div class="comparison is-increased">32</div>
</div>
結構
數值

數值會以較大的字體呈現。

19,293
<div class="ts-statistic">
    <div class="value">19,293</div>
</div>
比較數值

表示這個數據自上次以來的差別值。

42,689
195
1,998
13
<div class="ts-statistic">
    <div class="value">42,689</div>
    <div class="comparison is-increased">195</div>
</div>
<div class="ts-statistic">
    <div class="value">1,998</div>
    <div class="comparison is-decreased">13</div>
</div>
單位

指出這個數據的單位為何。

10,000
<div class="ts-statistic">
    <div class="value">10,000</div>
    <div class="unit">次</div>
</div>
圖示

在數值旁擺放輔助用的圖示。

30,000
<div class="ts-statistic">
    <span class="ts-icon is-eye-icon"></span>
    <div class="value">30,000</div>
</div>
組合應用
標籤文字

使用統計數據時,通常會建議在其上、下方擺放文字元素表明這個數據是什麼。

下載次數
10,000
<div class="ts-text is-label">下載次數</div>
<div class="ts-statistic">
    <div class="value">10,000</div>
    <div class="unit">次</div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標