Installation
Barrel
import { Meter } from 'kumo-svelte';Granular
import { Meter } from 'kumo-svelte/components/meter';Usage
<script lang="ts"> import { Meter } from 'kumo-svelte';</script><Meter label="Storage used" value={65} />Examples
Basic Meter
The default meter displays a label and percentage value.
Custom Value Display
Use customValue to show a custom string instead of the percentage.
Hidden Value
Set showValue={false} to hide the value display.
Full Meter
A meter at 100% capacity.
Low Value
A meter with a low value.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| customValue | string | - | Custom value label. |
| label * | string | - | Visible label content. |
| showValue | boolean | true | Shows the current value. |
| trackClassName | string | - | Class for the meter track. |
| indicatorClassName | string | - | Class for the meter indicator. |
| value | number | 0 | Controlled value. |
| max | number | 100 | Maximum value. |
| min | number | 0 | Minimum value. |
| class | string | - | Additional classes merged onto the root element. |