メインコンテンツへスキップ

ドキュメント

カウントダウン

シンプルなカウントダウンタイマーを作成します。

使い方

このコンポーネントを適用するには、コンテナ要素に uk-countdown 属性を追加し、カウントダウンが終了する日付を定義します。date: YYYY-MM-DDThh:mm:ssTZD オプションを属性に追加するだけで、ISO 8601 形式、例えば 2024-04-22T07:30:51+00:00 (UTC 時間) を使用します。

必要な機能とスタイルを適用するには、子要素に次のクラスを追加します。

クラス 説明
.uk-countdown-days このクラスを追加して、カウントダウンする日数を指定します。
.uk-countdown-hours このクラスを追加して、カウントダウンする時間を指定します。
.uk-countdown-minutes このクラスを追加して、カウントダウンする分を指定します。
.uk-countdown-seconds このクラスを追加して、カウントダウンする秒を指定します。
.uk-countdown-number このクラスは、カウントダウンの数字に必要なスタイルを追加します。 
<div uk-countdown="date: {%isodate%}">
    <span class="uk-countdown-number uk-countdown-days"></span>
    <span class="uk-countdown-number uk-countdown-hours"></span>
    <span class="uk-countdown-number uk-countdown-minutes"></span>
    <span class="uk-countdown-number uk-countdown-seconds"></span>
</div>
  • <div class="uk-grid-small uk-child-width-auto uk-margin" uk-grid uk-countdown="date: {%isodate%}">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
    </div>
    <div>
        <div class="uk-countdown-number uk-countdown-hours"></div>
    </div>
    <div>
        <div class="uk-countdown-number uk-countdown-minutes"></div>
    </div>
    <div>
        <div class="uk-countdown-number uk-countdown-seconds"></div>
    </div>
</div>

セパレーター

各数字の間に区切りを挿入するには、.uk-countdown-separator クラスを使用します。

<div uk-countdown="date: {%isodate%}">
    <span class="uk-countdown-number uk-countdown-days"></span>
    <span class="uk-countdown-separator">:</span>
    <span class="uk-countdown-number uk-countdown-hours"></span>
    <span class="uk-countdown-separator">:</span>
    <span class="uk-countdown-number uk-countdown-minutes"></span>
    <span class="uk-countdown-separator">:</span>
    <span class="uk-countdown-number uk-countdown-seconds"></span>
</div>
  • :
    :
    :
  • <div class="uk-grid-small uk-child-width-auto uk-margin" uk-grid uk-countdown="date: {%isodate%}">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-hours"></div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-minutes"></div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-seconds"></div>
    </div>
</div>

ラベル

各数字にラベルを追加するには、.uk-countdown-label クラスを使用します。

<div class="uk-countdown-label">Days</div>
<div class="uk-countdown-label">Hours</div>
<div class="uk-countdown-label">Minutes</div>
<div class="uk-countdown-label">Seconds</div>
  • 日
    :
    時間
    :
    分
    :
    秒
  • <div class="uk-grid-small uk-child-width-auto" uk-grid uk-countdown="date: {%isodate%}">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Days</div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-hours"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Hours</div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-minutes"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Minutes</div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-seconds"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Seconds</div>
    </div>
</div>

コンポーネントオプション

これらのオプションはすべて、コンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細については、コンポーネント構成に関する章を参照してください。

オプション 値 デフォルト 説明
date 文字列 false Date.parse で解析可能な任意の文字列。リファレンスを参照してください。

JavaScript

JavaScript コンポーネントの詳細をご覧ください。

初期化

UIkit.countdown(element, options);

メソッド

コンポーネントで次のメソッドが利用可能です

開始

UIkit.countdown(element).start();

カウントダウンを開始します。

停止

UIkit.countdown(element).stop();

カウントダウンを停止します。

アクセシビリティ

カウントダウンコンポーネントは、適切な WAI-ARIA の役割、状態、およびプロパティを自動的に設定します。