Phi / Meter

<script setup>
import { Meter } from "@dicehub/phi/components/meter";
</script>

<template>
  <Meter label="Storage used" :value="65" />
</template>

Installation

Barrel

import { Meter } from "@dicehub/phi";

Granular

import { Meter } from "@dicehub/phi/components/meter";

Usage

<script setup>
import { Meter } from "@dicehub/phi/components/meter";
</script>

<template>
  <Meter label="Storage used" :value="65" />
</template>

Examples

Basic Meter

The default meter displays a label and percentage value.

<script setup>
import { Meter } from "@dicehub/phi/components/meter";
</script>

<template>
  <Meter label="Storage used" :value="65" />
</template>

Custom Value Display

Use customValue to show a custom string instead of the percentage.

<script setup>
import { Meter } from "@dicehub/phi/components/meter";
</script>

<template>
  <Meter label="API requests" :value="75" custom-value="750 / 1,000" />
</template>

Hidden Value

Set showValue to false to hide the value display.

<script setup>
import { Meter } from "@dicehub/phi/components/meter";
</script>

<template>
  <Meter label="Progress" :value="40" :show-value="false" />
</template>

Full Meter

A meter at full capacity.

<script setup>
import { Meter } from "@dicehub/phi/components/meter";
</script>

<template>
  <Meter label="Quota reached" :value="100" />
</template>

Low Value

A meter with a low value.

<script setup>
import { Meter } from "@dicehub/phi/components/meter";
</script>

<template>
  <Meter label="Memory usage" :value="15" />
</template>

API Reference

Prop	Type	Default	Description
`className`	`string`	`-`	Additional CSS classes applied to the root meter element.
`customValue`	`string`	`-`	Custom formatted value text, such as "750 / 1,000", displayed instead of the percentage.
`label*`	`string`	`-`	Visible label text associated with the meter.
`showValue`	`boolean`	`true`	Whether to display the percentage value next to the label.
`trackClassName`	`string`	`-`	Additional CSS classes for the track element.
`indicatorClassName`	`string`	`-`	Additional CSS classes for the filled indicator element.
`value*`	`number`	`-`	Current value of the meter.
`max`	`number`	`100`	Maximum value of the meter.
`min`	`number`	`0`	Minimum value of the meter.