Timepicker

Create a timepicker which can easily be used by selecting a time value from a pre filled dropdown.

Usage

To apply the timepicker, just add the data-uk-timepicker attribute to an <input> element. The timepicker will automatically display a pre filled dropdown on focus, which can be navigated by pressing the up or down button on the keyboard or by scrolling with the mouse.

IMPORTANT The timepicker component requires the Autocomplete component in order to work. Please make sure that you always include them together.

Example

Markup

<form class="uk-form">
    <input type="text" data-uk-timepicker>
</form>

Display meridian time

To display meridian time, just define the format option and set it to 12h

Example

Markup

<form class="uk-form">
    <input type="text" data-uk-timepicker="{format:'12h'}">
</form>

JavaScript options

This is an example of how to set options via data attribute:

data-uk-timepicker="{format:'12h'}"

Init element manually

var timepicker = UIkit.timepicker(element, { /* options */ });

Datepicker

Create a toggleable dropdown with an datepicker.

Usage

To create a datepicker, just add the data-uk-datepicker attribute to an <input> element. You also have the possibility of customizing the date format. Just add the format option to the data-uk-datepicker attribute.

The datepicker detects whether the JavaScript from the Form select component is being loaded. This allows you to quickly toggle between years and months through a select form inside the datepicker.

Example

Markup

<form class="uk-form">
    <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}">
</form>

JavaScript options

This is an example of how to set options via attribute:

data-uk-datepicker="{weekstart:0, format:'DD.MM.YYYY'}"

Init element manually

var datepicker = UIkit.datepicker(element, { /* options */ });

Events

Tooltip

Easily create a nicely looking tooltip.

Usage

To apply this component, add the data-uk-tooltip attribute to an element. You also need to add a title attribute, whose value will represent your tooltip's text.

Example

Hover me Hover me

Markup

<button class="uk-button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>

Alignment

Add one of the following options to the data-uk-tooltip attribute to adjust the tooltip's alignment.

Markup

<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

JavaScript options

This is an example of how to set options via attribute:

data-uk-tooltip="{pos:'bottom-left'}"

Sticky

Make elements remain at the top of the viewport, like a sticky navbar.

Usage

To create an element that remains at the top of the viewport when scrolling down the site, add the data-uk-sticky attribute to that element.

Example

Markup

<div data-uk-sticky>...</div>

Define an offset

You can also position the element below the viewport edge. For example, add the data-uk-sticky="{top:100}" attribute to create a margin of 100px.

Example

Markup

<div data-uk-sticky="{top:100}">...</div>

Add a delay

To add a delay to the element, so it becomes sticky only after scrolling a specified distance, you need to add a negative offset to the data attribute, e.g. data-uk-sticky="{top:-200}". You can also add an animation from the Animation component in order to have the sticky element reappear smoothly.

Example

Markup

<div data-uk-sticky="{top:-200, animation: 'uk-animation-slide-top'}">...</div>

Responsive behavior

You also have the possibility of disabling the sticky behavior for different devices by adding a breakpoint option to the data attribute, e.g. data-uk-sticky="{media: 640}". Additionaly you can use any valid media query.

Markup

<!-- This is basically a shortcode to define a min-width -->
<div data-uk-sticky="{media: 640}">...</div>

<!-- This is a media string using the min-width and orientation properties -->
<div data-uk-sticky="{media: '(min-width: 640px) and (orientation: landscape)'}>...</div>

Sticky boundary

You can define the boundary of a sticky element by setting the boundary parameter. This keeps the sticky element within the dimensions of the boundary element.

Example

Markup

<!-- Bind sticky to its parent element -->
<div data-uk-sticky="{boundary: true}">...</div>

<!-- Bind sticky to any element -->
<div data-uk-sticky="{boundary: '#my-id'}">...</div>

JavaScript options

Init element manually

var sticky = UIkit.sticky(element, { /* options */ });

Events