Datos vivos

Estado: Beta

Número que rueda

Para créditos, precios y contadores: al cambiar, cada dígito rueda hasta su valor como un odómetro, los de la derecha primero. Se anima cambiando un atributo, así que un Turbo Stream basta para que el saldo "cuente" solo.

8

Créditos disponibles

Mensualidad $1,450

app/views/… (la demo de arriba)

<div class="flex flex-col items-center gap-8">
  <div class="flex flex-col items-center gap-2">
    <%= render Ui::AnimatedNumberComponent.new(value: 8, from: 0, min: 0, max: 99, class: "gap-5 text-6xl font-semibold tracking-[-0.04em]") do %>
      <button type="button" class="order-first grid size-9 text-base font-normal tracking-normal place-items-center rounded-full border border-border bg-raised text-muted-foreground eui-press eui-focus hover:border-border-hover hover:text-foreground" data-action="animated-number#decrement" aria-label="Quitar un crédito">−</button>
      <button type="button" class="grid size-9 text-base font-normal tracking-normal place-items-center rounded-full border border-border bg-raised text-muted-foreground eui-press eui-focus hover:border-border-hover hover:text-foreground" data-action="animated-number#increment" aria-label="Agregar un crédito">+</button>
    <% end %>
    <p class="eui-label">Créditos disponibles</p>
  </div>
  <p class="text-sm text-muted-foreground">
    Mensualidad <span class="font-medium text-foreground"><%= render Ui::AnimatedNumberComponent.new(value: 1450, from: 0, format: :currency) %></span>
  </p>
</div>

Qué hace

  • Reusa los rodillos que siguen existiendo; 9 → 10 solo agrega uno.
  • Escalonado de 40ms de derecha a izquierda.
  • Acciones animated-number#increment y

Props

Nombre Tipo Default Descripción
value Numeric — El valor a mostrar.
from Numeric nil Si se da, rueda desde aquí al cargar.
format :integer | :decimal | :currency :integer Formato es-MX; currency usa pesos sin centavos.
prefix / suffix String nil Texto antes o después (p. ej. " créditos").
min / max Numeric nil Límites para increment / decrement.
(bloque) ERB — Controles dentro del mismo controlador (botones +/−).

Accesibilidad