Todos los componentes (204)

Medidor

Superficies · Gauge

Qué es y cuándo usarlo

Cuánto hay de algo: espacio usado, stock, cuota consumida. Es un nivel que está ahí, suba o baje: el color lo deciden los umbrales y el valor va escrito además de pintado, porque una barra que se pone roja no dice cuánto queda.

Cuándo usarlo

Cuotas y ocupación: el espacio de las fotos, los envíos del mes, el stock de una referencia.
Por defecto el color va en accent hasta el 75 %, pasa a warning desde el 75 % y a error desde el 90 %. thresholds cambia los tramos (el orden en que se den da igual); tone fija un color y los desactiva.
min y max (0 y 100 por defecto) marcan el recorrido de value; hint añade una línea de ayuda debajo de la barra.
valueText para decirlo con palabras propias («3,2 GB de 10 GB»): recibe el valor y el porcentaje. format cambia cómo se escribe el número; ojo: con format se escribe value tal cual, no el porcentaje.

Cuándo no

Una tarea que avanza y acaba: Progress.
Comparar varias cantidades entre sí: BarChart.
Una cifra suelta con su variación: Stat.

Teclado: no es enfocable.

Accesibilidad: role="meter" con la label como nombre, aria-valuenow, aria-valuemin y aria-valuemax, y aria-valuetext con lo mismo que se ve escrito. Lleva role="meter" y nada más: un rol compuesto como meter progressbar hace que axe dé por no permitidos aria-valuenow y compañía.

Aspecto fino: sin variables propias: se ajusta con las clases amset-gauge, amset-gauge--sm (barra de 5 px en vez de 8) y amset-gauge__padding--<tone> / amset-gauge__value--<tone>, con el mismo valor que tone.

Contexto: el número se escribe con el idioma de LocaleProvider (o de AmsetProvider).

Cómo se ve

Borra fotos antiguas o amplía el plan.

<Gauge label="Cuota de envios del mes" value={68} />
<Gauge label="Espacio de las fotos" value={96} hint="Borra fotos antiguas o amplia el plan." />
<Gauge
  label="Pedidos de hoy preparados"
  value={40}
  size="sm"
  thresholds={[{ from: 0, tone: 'error' }, { from: 50, tone: 'warning' }, { from: 90, tone: 'success' }]}
/>

Props

Se importa con import { Gauge } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Qué se está midiendo: "Espacio usado", "Stock". Obligatorio.
`value`obligatoria	`number`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`format`	`Intl.NumberFormatOptions`	Cómo se escribe el valor. Por defecto, porcentaje.
`hint`	`string`	—
`max`	`number`	—
`min`	`number`	—
`size`	`"sm" \| "md"`	—
`thresholds`	`readonly GaugeThreshold[]`	Cambia de color al pasar de ciertos porcentajes.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	Fija el tono y desactiva los umbrales. `neutral` es el gris de la tinta secundaria.
`valueText`	`(value: number, percent: number) => string`	Texto propio en lugar del número: "3,2 GB de 10 GB".

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: