mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
844b3185e9
Co-authored-by: Pooya Parsa <pooya@pi0.io> Co-authored-by: Florent Delerue <florentdelerue@hotmail.com> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
179 lines
3.6 KiB
Markdown
179 lines
3.6 KiB
Markdown
---
|
|
title: 'Meter'
|
|
description: Display a gauge meter that fills or depletes.
|
|
links:
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Meter.vue
|
|
---
|
|
|
|
## Usage
|
|
|
|
Use the `value` prop from `0` to `100` to set a value for the meter bar.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
value: 25
|
|
---
|
|
::
|
|
|
|
::callout{icon="i-heroicons-light-bulb"}
|
|
Check out the [Range](/forms/range) component for inputs
|
|
::
|
|
|
|
### Min & Max
|
|
|
|
By default, `min` is `0` and `max` is `100`. You can change either of these using their respective props, even for negative numbers.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
value: -25
|
|
min: -50
|
|
max: 50
|
|
---
|
|
::
|
|
|
|
### Indicator
|
|
|
|
You may show a percentage indicator on top of the meter using the `indicator` prop.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
value: 35
|
|
indicator: true
|
|
---
|
|
::
|
|
|
|
### Label
|
|
|
|
Add a label below the meter using the `label` prop.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
value: 86
|
|
props:
|
|
label: Disk usage
|
|
---
|
|
::
|
|
|
|
### Icon
|
|
|
|
You may also add an icon to the start label using the `icon` prop.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
value: 86
|
|
label: Disk usage
|
|
props:
|
|
icon: i-heroicons-server
|
|
excludedProps:
|
|
- icon
|
|
---
|
|
::
|
|
|
|
### Size
|
|
|
|
Change the size of the meter bar using the `size` prop.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
value: 75.4
|
|
props:
|
|
size: 'md'
|
|
indicator: true
|
|
label: CPU Load
|
|
---
|
|
::
|
|
|
|
### Style
|
|
|
|
The `color` prop changes the visual style of the meter bar. The `color` can be any color from the `ui.colors` object.
|
|
|
|
::component-card
|
|
---
|
|
baseProps:
|
|
value: 80
|
|
indicator: true
|
|
label: Memory usage
|
|
props:
|
|
color: 'primary'
|
|
---
|
|
::
|
|
|
|
## Group
|
|
|
|
To group multiple meters into a group, adding all values, use the `MeterGroup` component.
|
|
|
|
- To change the overall minimum and maximum value, pass the `min` and `max` props respectively.
|
|
- To change size of all meters, use the `size` prop.
|
|
- To show an indicator for the overall amount, set the `indicator` prop or slot.
|
|
- To change the color of each meter, use the `color` prop.
|
|
- To show a label for each meter, use the `label` prop on each meter.
|
|
- To change the icon for each meter, use the `icon` prop.
|
|
|
|
::component-card{slug="UMeterGroup"}
|
|
---
|
|
baseProps:
|
|
icon: i-heroicons-minus
|
|
props:
|
|
min: 0
|
|
max: 128
|
|
size: 'md'
|
|
indicator: true
|
|
code: |
|
|
<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 -->
|
|
---
|
|
|
|
#default
|
|
:u-meter{:value="24" color="gray" label="System"}
|
|
:u-meter{:value="8" color="red" label="Apps"}
|
|
:u-meter{:value="12" color="yellow" label="Documents"}
|
|
:u-meter{:value="42" color="green" label="Multimedia"}
|
|
::
|
|
|
|
::callout{icon="i-heroicons-exclamation-triangle"}
|
|
When the Meters are grouped, their individual indicators and label slots are stripped away.
|
|
::
|
|
|
|
A Meter group can also be used with an [indicator slot](#indicator-1), and even individual meter icons.
|
|
|
|
:component-example{component="meter-group-example-slots"}
|
|
|
|
## Slots
|
|
|
|
### `indicator`
|
|
|
|
Use the `#indicator` slot to change the indicator shown at the top of the bar. It receives the current meter percent.
|
|
|
|
:component-example{component="meter-slot-indicator-example"}
|
|
|
|
### `label`
|
|
|
|
The `label` slot can be used to change how the label below the meter bar is shown. It receives the current meter percent.
|
|
|
|
:component-example{component="meter-slot-label-example"}
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
:u-divider{label="MeterGroup" type="dashed" class="my-12"}
|
|
|
|
:component-props{slug="UMeterGroup"}
|
|
|
|
## Config
|
|
|
|
:component-preset
|
|
|
|
:component-preset{slug="MeterGroup"}
|