Meter

The BMeter component is used to show a measurement bar. There are two variants: linear (default) and half pipe. always rounds to max one decimal

Linear meter

Has three color options primary, secondary and tertiary

25 %

50.2 %

80.5 %

<template>
  <div class="flex flex-col gap-2 w-52">
    <BMeter value="25" />
    <BMeter
      color="secondary"
      value="50.1522"
    />
    <BMeter
      color="tertiary"
      value="80.5"
    />
  </div>
</template>

With high set

Set the high property to something lower than value and it will turn warning (error) color

CPU low

25 %

CPU mid

55 %

CPU high load

85 %

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(80.5)
</script>

<template>
  <div class="flex flex-col gap-2 w-72">
    <BMeter
      value="25"
      high="80"
      mid="60"
    >
      CPU low
    </BMeter>
    <BMeter
      value="55"
      high="80"
      mid="50"
    >
      CPU mid
    </BMeter>
    <BMeter
      value="85"
      high="80"
      mid="60"
    >
      CPU high load
    </BMeter>
  </div>
</template>

Inline variant

There is also a "semi" inline variant. set the inline prop to have the value inline with the bar

Label

50 %

<template>
  <div class="flex flex-col gap-2 w-72">
    <BMeter
      value="50"
      inline
    >
      Label
    </BMeter>
  </div>
</template>

Sizes

Change the size by setting the font-size. everything rescales to match

text-xs

15 %

text-sm

25 %

text-base

35 %

text-lg

45 %

text-xl

55 %

text-2xl

65 %

<template>
  <div class="flex flex-col gap-2">
    <BMeter
      class="text-xs"
      value="15"
    >
      text-xs
    </BMeter>
    <BMeter
      class="text-sm"
      value="25"
    >
      text-sm
    </BMeter>
    <BMeter
      class="text-base"
      color="secondary"
      value="35"
    >
      text-base
    </BMeter>
    <BMeter
      class="text-lg"
      color="tertiary"
      value="45"
    >
      text-lg
    </BMeter>
    <BMeter
      class="text-xl"
      color="tertiary"
      value="55"
    >
      text-xl
    </BMeter>
    <BMeter
      class="text-2xl"
      color="tertiary"
      value="65"
    >
      text-2xl
    </BMeter>
  </div>
</template>