Contenido v1.0.0

Cuenta regresiva

Temporizador de cuenta regresiva animado que avanza hacia una fecha objetivo. El estilo simple muestra números planos con etiquetas. El estilo flip renderiza un efecto de reloj con tarjetas divididas en 3D y animaciones CSS con keyframes.

Simple

Números planos con etiquetas debajo de cada unidad, unidos por separadores de dos puntos

Opciones

Nombre Tipo Predeterminado Descripción
target_date * String requerido ISO 8601 date/time string to count down to
show_days Boolean true Whether to display the days unit
show_hours Boolean true Whether to display the hours unit
show_minutes Boolean true Whether to display the minutes unit
show_seconds Boolean true Whether to display the seconds unit
expired_message String "Time's up!" Message shown when countdown reaches zero
labels Hash { days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" } Custom labels for each time unit
size Symbol :md Size variant: :sm, :md, :lg

Flip

Animación de reloj 3D con tarjetas divididas y transformaciones de perspectiva

Opciones

Nombre Tipo Predeterminado Descripción
target_date * String requerido ISO 8601 date/time string to count down to
show_days Boolean true Whether to display the days unit
show_hours Boolean true Whether to display the hours unit
show_minutes Boolean true Whether to display the minutes unit
show_seconds Boolean true Whether to display the seconds unit
expired_message String "Time's up!" Message shown when countdown reaches zero
labels Hash { days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" } Custom labels for each time unit
size Symbol :md Size variant: :sm, :md, :lg

Registro de Cambios v1.0.0

- v1.0.0: Initial release with simple and flip styles

Obtener Acceso Completo

Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.

Obtener Acceso