HudGauge ゲージ

残量をセグメントで表示し、値が下がると短い残像を残します。

基本的な使い方

インタラクティブプレビュー

デバイスのバッテリー86 / 100

空きストレージ12 / 64

Vue のソースを表示

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmHudGauge } from 'augma'
import { shallowRef } from 'vue'

const battery = shallowRef(86)
</script>

<template>
  <div class="example-stack">
    <AgmHudGauge label="デバイスのバッテリー" :value="battery" />
    <AgmHudGauge label="空きストレージ" :value="12" :max="64" />
    <div class="example-row">
      <AgmButton variant="outline" :disabled="battery === 0" @click="battery = Math.max(0, battery - 18)">
        消費をシミュレート
      </AgmButton>
      <AgmButton variant="ghost" :disabled="battery === 100" @click="battery = 100">
        フル充電
      </AgmButton>
    </div>
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

プロパティ	型	デフォルト	説明
label	string	必須	ゲージの名前
value	number	必須	現在の値。0〜max に制限され、有限でない数値は 0 として扱います
max	number	100	上限値。不正な値は 100 になります

キーボード操作と利用上の注意

読み取り専用のゲージとして meter のセマンティクスを使い、「現在値 / 上限」を値のテキストにします。残り 50% 以下で警告色、20% 以下で危険色になります。数値は常に表示し、色だけに頼りません。

インストール

import { AgmHudGauge } from 'augma'
import 'augma/style.css'

編集可能なソースをコピー：

pnpm dlx [email protected] add https://augma.yyj.moe/r/hud-gauge.json