Inhalt v1.0.0

Countdown

Animierter Countdown-Timer, der zu einem Zieldatum herunterzählt. Der einfache Stil zeigt schlichte Zahlen mit Beschriftungen. Der Klapp-Stil rendert einen 3D-Klappuhr- Effekt mit geteilten Karten und CSS-Keyframe-Animationen.

Einfach

Schlichte Zahlen mit Beschriftungen unter jeder Einheit, verbunden durch Doppelpunkt-Trennzeichen

Optionen

Name Typ Standard Beschreibung
target_date * String erforderlich 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

Klappuhr

3D-Klappuhr-Animation mit geteilten Karten und Perspektivtransformationen

Optionen

Name Typ Standard Beschreibung
target_date * String erforderlich 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

Änderungsprotokoll v1.0.0

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

Vollzugang erhalten

Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.

Jetzt Zugang erhalten