Visualización de datos

Rolling stat tiles

Rolling stat tiles: Una fila de mosaicos de estadísticas cuyos números grandes avanzan dígito a dígito hasta alcanzar un nuevo valor en lugar de romperse.

This week

Monthly revenue

Conversion rate

Active users

Cómo usar Rolling stat tiles

Rolling stat tiles se presenta con el formato de vista previa «tarjeta» y el tema «oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`accentColor`	`color`	`#9BE15D`	Los metadatos no indican otro límite.
`tileCount`	`number`	`3`	De 2 a 4; paso 1
`compactNotation`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Rolling stat tiles?

Rolling stat tiles está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Rolling stat tiles?

Los metadatos de React indican estas dependencias npm además de React: motion.

¿Qué detalles de accesibilidad se observan en Rolling stat tiles?

El código React de Rolling stat tiles incluye: elementos nativos (button); atributos y manejadores (aria-hidden, aria-live). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Rolling stat tiles el movimiento reducido?

Rolling stat tiles consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Animated metric counter de Fieldbook, de la categoría Visualización de datos.

2299Animated metric counterVisualización de datosUn gran número simple que surge desde un valor inicial hasta su objetivo en el momento en que aparece a la vista, sobrepasándose ligeramente antes de estabilizarse, con separadores de miles y un sufijo opcional.

Imagen fija del componente Counting number readout de Fieldbook, de la categoría Visualización de datos.

2328Counting number readoutVisualización de datosUna estadística grande que cuenta hasta su valor en una curva de desaceleración, escribiendo el texto directamente en cada fotograma para que el diseño nunca se mueva.

Imagen fija del componente Before/After Code Diff de Fieldbook, de la categoría Visualización de datos.

2113Before/After Code DiffVisualización de datosDos paneles de código uno al lado del otro, etiquetados antes y después, con líneas agregadas y eliminadas teñidas y un efecto de enfoque flotante.

Imagen fija del componente Billing Ledger Table de Fieldbook, de la categoría Visualización de datos.

2304Billing Ledger TableVisualización de datosFiltra estados de facturas, ordena importes y recalcula el total visible del registro.

Imagen fija del componente Concentric goal rings de Fieldbook, de la categoría Visualización de datos.

2128Concentric goal ringsVisualización de datosTres anillos de progreso anidados que se dibujan en secuencia junto a una lectura del valor objetivo y actual de cada objetivo.

Imagen fija del componente Credit balance ledger de Fieldbook, de la categoría Visualización de datos.

2856Credit balance ledgerVisualización de datosConsulta créditos de cuenta y aplica un importe permitido a una factura actualizando el saldo.