-
Notifications
You must be signed in to change notification settings - Fork 462
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
- Loading branch information
1 parent
5296cf2
commit abbcc37
Showing
10 changed files
with
750 additions
and
2 deletions.
There are no files selected for viewing
17 changes: 17 additions & 0 deletions
17
docs/components/content/examples/MeterGroupExampleSlots.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<template> | ||
<UMeterGroup :max="128"> | ||
<template #indicator> | ||
<div class="flex gap-1.5 justify-between text-sm"> | ||
<p>86GB used</p> | ||
<p class="text-gray-500 dark:text-gray-400"> | ||
42GB remaining | ||
</p> | ||
</div> | ||
</template> | ||
|
||
<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" /> | ||
</UMeterGroup> | ||
</template> |
15 changes: 15 additions & 0 deletions
15
docs/components/content/examples/MeterSlotIndicatorExample.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<script setup> | ||
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> |
15 changes: 15 additions & 0 deletions
15
docs/components/content/examples/MeterSlotLabelExample.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<script setup> | ||
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,180 @@ | ||
--- | ||
title: 'Meter' | ||
description: Display a gauge meter that fills or depletes. | ||
navigation: | ||
badge: New | ||
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="MeterGroup"} | ||
--- | ||
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="MeterGroup"} | ||
|
||
## Preset | ||
|
||
:component-preset | ||
|
||
:component-preset{slug="MeterGroup"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
abbcc37
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
ui – ./
ui-git-dev-nuxt-js.vercel.app
ui-nuxt-js.vercel.app
ui.nuxt.com