Обратный отстчет

Компонент Uikit 3 countdown

Компонент обратного отсчета до события.

Как использовать Компонент Countdown в UIkit 3

Для использования компонента добавим атрибут uk-countdown к элементу контейнера и определим дату окончания обратного отсчета. Добавьте опцию в к атрибуту контейнера в виде date: YYYY-MM-DDThh:mm:ssTZD. Таймер использует формат ISO 8601, т.е, 2017-12-04T22:00:00+00:00 (время в UTC).

Следом добавим классы к дочерним элементам, чтобы применить необходимую функциональность и стилизацию.

Класс Описание
.uk-countdown-days Класс для указания дней.
.uk-countdown-hours Класс для указания часов.
.uk-countdown-minutes Класс для указания минут.
.uk-countdown-seconds Класс для указания секунд.
.uk-countdown-number Добавляет стили к цифрам. 
<div uk-countdown="date: 2019-01-23T07:03:09+00:00">
    <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>
  • 06
    23
    59
    51
  • <div class="uk-grid-small uk-child-width-auto uk-margin" uk-grid uk-countdown="date: 2019-01-23T07:03:09+00:00">
    <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: 2019-01-23T07:03:09+00:00">
    <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>
  • 06
    :
    23
    :
    59
    :
    51
  • <div class="uk-grid-small uk-child-width-auto uk-margin" uk-grid uk-countdown="date: 2019-01-23T07:03:09+00:00">
    <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">Дни</div>
<div class="uk-countdown-label">Часы</div>
<div class="uk-countdown-label">Минуты</div>
<div class="uk-countdown-label">Секунды</div>
  • 06
    Дни
    :
    23
    Часы
    :
    59
    Минуты
    :
    51
    Секунды
  • <div class="uk-grid-small uk-child-width-auto" uk-grid uk-countdown="date: 2019-01-23T07:03:09+00:00">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
        <div class="uk-countdown-label uk-margin-small uk-text-center uk-visible@s">Дни</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">Часы</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">Минуты</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">Секунды</div>
    </div>
</div>

Опции компонента

Любой из этих параметров может быть применен к атрибуту компонента. Отделяйте опции друг от друга точкой с запятой. Подробнее об этом смотрите в конфигурации.

Опция Значение По умолчанию Описание
date String false Любая строка, доступная Date.parse. Подробнее.

JavaScript

Больше о компонентах JavaScript.

Инициализация

UIkit.countdown(element, options);

Методы

Для компонента доступны следующие методы:

Start

UIkit.countdown(element).start();

Начало отстчета.

Stop

UIkit.countdown(element).stop();

Остановка отстчета.