Display a gauge meter that fills or depletes.
Use the value
prop from 0
to 100
to set a value for the meter bar.
<template>
<UMeter :value="25" />
</template>
Check out the Range component for inputs
By default, min
is 0
and max
is 100
. You can change either of these using their respective props, even for negative numbers.
<template>
<UMeter :value="-25" :min="-50" :max="50" />
</template>
You may show a percentage indicator on top of the meter using the indicator
prop.
<template>
<UMeter :value="35" indicator />
</template>
Add a label below the meter using the label
prop.
<template>
<UMeter label="Disk usage" :value="86" />
</template>
You may also add an icon to the start label using the icon
prop.
<template>
<UMeter icon="i-heroicons-server" :value="86" label="Disk usage" />
</template>
Change the size of the meter bar using the size
prop.
<template>
<UMeter size="md" indicator label="CPU Load" :value="75.4" />
</template>
The color
prop changes the visual style of the meter bar. The color
can be any color from the ui.colors
object.
<template>
<UMeter color="primary" :value="80" indicator label="Memory usage" />
</template>
To group multiple meters into a group, adding all values, use the MeterGroup
component.
min
and max
props respectively.size
prop.indicator
prop or slot.color
prop.label
prop on each meter.icon
prop.<template>
<UMeterGroup :min="0" :max="128" size="md" indicator icon="i-heroicons-minus">
<UMeter :value="24" color="gray" label="System" />
<UMeter :value="8" color="red" label="Apps" />
<UMeter :value="12" color="yellow" label="Documents" />
<UMeter :value="42" color="green" label="Multimedia" />
<!-- Total: 86 -->
</UMeterGroup>
</template>
When the Meters are grouped, their individual indicators and label slots are stripped away.
<template>
<UMeterGroup :min="0" :max="128" size="md" indicator>
<UMeter :value="24" color="gray" label="System" icon="i-heroicons-cog-6-tooth" />
<UMeter :value="8" color="red" label="Apps" icon="i-heroicons-window" />
<UMeter :value="12" color="yellow" label="Documents" icon="i-heroicons-document" />
<UMeter :value="42" color="green" label="Multimedia" icon="i-heroicons-film" />
<!-- Total: 86 -->
</UMeterGroup>
</template>
A Meter group can also be used with an indicator slot, and even individual meter icons.
Use the #indicator
slot to change the indicator shown at the top of the bar. It receives the current meter percent.
<script setup lang="ts">
const used = ref(84.2)
const total = 238.42
</script>
<template>
<UMeter :value="used" :max="total">
<template #indicator="{ percent }">
<div class="text-sm text-right">
{{ used }}GB used ({{ Math.round(percent) }}%)
</div>
</template>
</UMeter>
</template>
The label
slot can be used to change how the label below the meter bar is shown. It receives the current meter percent.
<script setup lang="ts">
const used = ref(84.2)
const total = 238.42
</script>
<template>
<UMeter :value="used" :max="total">
<template #label="{ percent }">
<p class="text-sm">
You are using {{ Math.round(used) }}GB ({{ Math.round(100 - percent) }}%) of space
</p>
</template>
</UMeter>
</template>
Prop | Type | Default | Description |
---|---|---|---|
size |
"sm" | "2xs" | "xs" | "md" | "lg" | "xl" | "2xl" |
config.default.size |
Size of the meter |
value |
number |
0 |
Current value of the meter |
label |
string |
null |
Label text |
color |
string |
config.default.color |
Color of the meter |
icon |
string |
null |
Icon to display with the label |
min |
number |
0 |
Minimum value |
max |
number |
100 |
Maximum value |
indicator |
boolean |
false |
Show percentage indicator |
Prop | Type | Default | Description |
---|---|---|---|
size |
"md" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" |
meterConfig.default.size |
Size of the meters |
min |
number |
0 |
Minimum total value |
max |
number |
100 |
Maximum total value |
icon |
string |
meterGroupConfig.default.icon |
Icon for the group |
indicator |
boolean |
false |
Show total percentage indicator |
{
wrapper: 'w-full flex flex-col gap-2',
indicator: {
container: 'min-w-fit transition-all',
text: 'text-gray-400 dark:text-gray-500 text-end',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base',
'2xl': 'text-base'
}
},
meter: {
base: 'appearance-none block w-full bg-none overflow-y-hidden',
background: 'bg-gray-200 dark:bg-gray-700',
color: 'text-{color}-500 dark:text-{color}-400',
ring: '',
rounded: 'rounded-full',
shadow: '',
size: {
'2xs': 'h-px',
xs: 'h-0.5',
sm: 'h-1',
md: 'h-2',
lg: 'h-3',
xl: 'h-4',
'2xl': 'h-5'
},
appearance: {
inner: '[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent',
meter: '[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent',
bar: '[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current',
value: '[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current'
},
bar: {
transition: '[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all',
ring: '',
rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
size: {
'2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
'2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
}
}
},
label: {
base: 'flex gap-2 items-center',
text: 'truncate',
color: 'text-{color}-500 dark:text-{color}-400',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base',
'2xl': 'text-base'
}
},
color: {
white: 'text-white dark:text-black',
black: 'text-black dark:text-white',
gray: 'text-gray-500 dark:text-gray-400'
},
default: {
size: 'md',
color: 'primary'
}
}