コンテンツ v1.0.0

カウントダウン

目標日時までカウントダウンするアニメーション付きタイマー。シンプルスタイルでは プレーンな数字とラベルを表示。フリップスタイルでは分割カードとCSSキーフレーム アニメーションによる3Dフリップ時計エフェクトを描画します。

シンプル

各ユニットの下にラベルを配置し、コロンで区切ったプレーンな数字表示

オプション

名前 型 デフォルト 説明
target_date * String 必須 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

フリップ

分割カードとパースペクティブ変換を使った3Dフリップ時計アニメーション

オプション

名前 型 デフォルト 説明
target_date * String 必須 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

変更履歴 v1.0.0

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

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得