Todos los componentes (244)

Cifra animada

Datos · AnimatedNumber

Qué es y cuándo usarlo

Una cifra que recorre el camino de la anterior a la nueva: el contador de pedidos de un panel que sube cuando llega uno, el importe del carrito al añadir, los seguidores de una ficha.

Cuándo usarlo

Una cifra que cambia delante de quien la mira y conviene que se vea que ha cambiado, no solo que es otra.
format son las opciones de Intl.NumberFormat: { style: 'currency', currency: 'EUR' } para un importe, { style: 'percent' } para un porcentaje, { maximumFractionDigits: 0 } para una cantidad.
duration es lo que dura el recorrido; 0 la cambia de golpe.

Cuándo no

Una cifra que se pinta una vez y no cambia: Text o Stat, que además lleva su tendencia.
Una cuenta atrás: Countdown.

Teclado: no es interactivo.

Accesibilidad: lo que se mueve va escondido al lector de pantalla, que recibe la cifra final escrita una sola vez (con label delante: «Pedidos de hoy: 1204»), y no cuarenta cifras intermedias. Con prefers-reduced-motion la cifra cambia de golpe.

Aspecto fino: sin variables propias; las cifras van tabulares (amset-counter, amset-counter__digits) para que el texto de al lado no baile.

Cómo se ve

Ventas del mes: 12.480 €

<AnimatedNumber
  value={ventas}
  format={{ style: "currency", currency: "EUR", maximumFractionDigits: 0 }}
  label="Ventas del mes"
/>

Props

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

Prop	Tipo	Para qué sirve
`value`obligatoria	`number`	La cifra. Cada cambio se recorre desde la anterior.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`duration`	`number`	Lo que dura el recorrido, en milisegundos. `0` cambia la cifra de golpe, que es tambien lo que pasa si el sistema pide menos movimiento.
`format`	`Intl.NumberFormatOptions`	Como se escribe: las opciones de `Intl.NumberFormat` (`{ style: 'currency', currency: 'EUR' }`, `{ maximumFractionDigits: 0 }`...). Sin ellas, el numero del idioma.
`label`	`string`	Que es la cifra, para quien la oye sin ver lo que tiene alrededor: «Pedidos de hoy».

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: