圓形量測計 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

40%

<div class="ts-gauge">
    <div class="bar" style="--value: 40;">
        <div class="text">40%</div>
    </div>
</div>

概要

這個元件需要自行透過 CSS 變數 --value 來控制進度列的百分比進度。

這通常用以指示某個數值，如果需要呈現某個行為正在載入、或是下載百分比，請使用進度條。

外觀

圓形的

以全圓形無缺口的方式呈現整個量測計。

70%

<div class="ts-gauge is-circular">
    <div class="bar" style="--value: 70;">
        <div class="text">70%</div>
    </div>
</div>

上升的

呈現出類似上升數值的計數器，如：劑量、溫度、濕度。

50%

<div class="ts-gauge is-uplifted">
    <div class="bar" style="--value: 50;">
        <div class="text">50%</div>
    </div>
</div>

置中的

使其置中顯示。

40%

<div class="ts-gauge is-centered">
    <div class="bar" style="--value: 40;">
        <div class="text">40%</div>
    </div>
</div>

尺寸

更改圓形量測計的大小。

30%

<div class="ts-gauge is-small">
    <div class="bar" style="--value: 30;">
        <div class="text">30%</div>
    </div>
</div>
<div class="ts-gauge">
    <div class="bar" style="--value: 30;">
        <div class="text">30%</div>
    </div>
</div>
<div class="ts-gauge is-large">
    <div class="bar" style="--value: 30;">
        <div class="text">30%</div>
    </div>
</div>

組合應用

傳輸計量

雲端檔案傳輸空間通常會有一個顯示目前剩餘額度與流量的相關計數器。

38%

空間

19.12 GB / 50 GB

---

傳輸

0 B 已使用

<div class="ts-grid is-evenly-divided">
    <div class="column">
        <div class="ts-wrap is-middle-aligned">
            <div class="ts-gauge is-small is-circular">
                <div class="bar" style="--value: 38;">
                    <div class="text">38%</div>
                </div>
            </div>
            <div>
                <div class="ts-text is-bold">空間</div>
                19.12 GB / 50 GB
            </div>
        </div>
    </div>
    <div class="column">
        <div class="ts-wrap is-middle-aligned">
            <div class="ts-gauge is-small is-circular">
                <div class="bar" style="--value: 100;">
                    <div class="text">---</div>
                </div>
            </div>
            <div>
                <div class="ts-text is-bold">傳輸</div>
                0 B 已使用
            </div>
        </div>
    </div>
</div>

智慧家庭

用以指示目前溫度、濕度的測量計。

32 °C

2 °C

房間溫度

<div class="ts-wrap is-middle-aligned">
    <div class="ts-gauge is-uplifted">
        <div class="bar" style="--value: 80;">
            <div class="text">
                <span class="ts-icon is-big is-temperature-full-icon"></span>
            </div>
        </div>
    </div>
    <div>
        <div class="ts-statistic">
            <div class="value">32 °C</div>
            <div class="comparison is-increased">2 °C</div>
        </div>
        房間溫度
    </div>
</div>

變數與屬性

	預設值	範例	說明	對象
--value	`0`	`50`	進度列的百分比值。	`.bar`

在尋找相似的元件嗎？