Meter

Измерение на шкале с цветом по порогам: хранилище, заряд, надёжность. Бесплатно, MIT · Данные и показатели › Показатели и виджеты

Установка

npx valyro-cli@latest add meter

npx shadcn@latest add https://valyro.xyz/r/meter.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Meter } from 'valyro-ui';

Prop	Type	Default
`value` *	`number`		The measured value, clamped to min…max.
`min`	`number`		Lower end of the scale (default 0).
`max`	`number`		Upper end of the scale (default 100; never below `min`).
`low`	`number`		Upper bound of the low region, as on the HTML `<meter>`.
`high`	`number`		Lower bound of the high region, as on the HTML `<meter>`.
`optimum`	`number`		The best value. With `low` / `high` it decides the colour: an optimum below `low` means "less is better" (storage, quotas), above `high` "more is better" (battery, password strength).
`color`	`'auto' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'auto'`	`auto` follows the region of the value when thresholds are set (else the accent); any other value fixes the colour.
`label`	`ReactNode`		Visible caption above the bar; also names the meter unless `aria-label` is given.
`showValue`	`boolean`	`false`	Show the value next to the label.
`formatValue`	`(value: number, min: number, max: number) => string`		Custom value text (shown and announced), e.g. "7.4 of 10 GB".
`locale`	`string`		Locale for the percentage (default: the ThemeProvider's, then the browser's).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Bar thickness.
`showThresholds`	`boolean`	`false`	Tick marks at `low` and `high` on the track.
`labels`	`Partial<MeterLabels>`		Status words added to the announced value when thresholds are set.