Uikit3. Примеры использования

Инициализировать событие Uikit3. Пример на scrollspy, modal

Если Uikit уже подключен, то события при прокрутке экрана можно вызывать через него.

Сначала нужно инициализировать сам компонент (если не сделано другим способом):

UIkit.scrollspy("#foot", {
    //delay: 500,
	//cls:   'uk-animation-fade',
	hidden: false
});

У каждого компонента есть события, ими и воспользуемся:

UIkit.util.on('#foot', 'inview', function () {
    alert("It works");
});

 А вот так можно вызвать модальное окно

function showModal() {
  UIkit.modal("#modal").show();
}
setTimeout(showModal, 1000);

Описано тут: https://getuikit.com/docs/scrollspy#initialization 

Про модальное окно: https://toster.ru/q/417740 

Раньше (версия 2) делалось так: https://getuikit.com/v2/docs/scrollspy.html#javascript-options 

http://qaru.site/questions/9726904/uikit-scrollspy-custom-event 

Показать значение "range" в форме Uikit3 (ползунок)

У данного типа поля можно указать начальное и конечное значение, указать шаг, а вот так можно вывести то что выбрано:

<div class="uk-margin" uk-grid>
	<p class="uk-width-1-3">Priority: <span class="uk-badge uk-label-danger" id="rangeValue">2</span></p>
	<input id="range" class="uk-range uk-width-2-3" type="range" value="2" min="0" max="10" step="1" oninput="document.getElementById('rangeValue').innerHTML = this.value">
</div>

Пример: codepen.io, codepen.io