HudGauge

Shows remaining capacity in segments, with a brief afterimage when the value drops.

Basic usage

Live preview

Device battery86 / 100

Free storage12 / 64

View Vue source

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="Device battery" :value="battery" />
    <AgmHudGauge label="Free storage" :value="12" :max="64" />
    <div class="example-row">
      <AgmButton variant="outline" :disabled="battery === 0" @click="battery = Math.max(0, battery - 18)">
        Simulate drain
      </AgmButton>
      <AgmButton variant="ghost" :disabled="battery === 100" @click="battery = 100">
        Charge fully
      </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

Prop	Type	Default	Description
label	string	Required	Gauge name
value	number	Required	Current value, clamped to 0–max; non-finite numbers count as 0
max	number	100	Upper bound; invalid values fall back to 100

Keyboard and usage notes

Read-only gauges use meter semantics, with "current / max" as the value text. At 50% or less it shows the warning color, at 20% or less the danger color; the number stays visible so color is never the only cue.

Installation

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

Copy the editable source:

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