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.
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.
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.
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.
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 --><divdata-uk-sticky="{media: 640}">...</div><!-- This is a media string using the min-width and orientation properties --><divdata-uk-sticky="{media: '(min-width: 640px) and (orientation: landscape)'}>...</div>
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
Sticky bound to parent container
Sticky as long as bondary element is in view
Boundary element
Markup
<!-- Bind sticky to its parent element --><divdata-uk-sticky="{boundary: true}">...</div><!-- Bind sticky to any element --><divdata-uk-sticky="{boundary: '#my-id'}">...</div>
To apply this component, add the data-uk-parallax attribute to a container element. Add an option with the desired animation target value for each CSS property you want to animate.
Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Properties are always animated from the current value to the target value which you set in the option. However, you can also define a start value yourself. This is done by passing a string to the option which contains two values separated by comma.
NOTE Some properties, like colors, require a start and a stop value!
Using different animations for nested elements is a simple task. Just create another container within the first parallax container and add your options to a new data-uk-parallax attribute.
Example
Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Usually, the animation lasts as long as the element itself is in the viewport. To start and stop the animation based on the viewport visibility of another element, use the target option. This can be helpful when using nested animations.
Example
Heading
This text is animated as long as the headline "Target Option" is in the viewport.
Using the viewport option, the animation duration can be adjusted. With the value 1 or false the animation lasts as long as the element is in the viewport. Setting it to 0.5, for example, animates the property only in the first half of the viewport.
Example
Heading
This text is animated until it reaches the middle of the viewport.
Αυτός ο ιστότοπος χρησιμοποιεί cookies και σε ορισμένες περιπτώσεις cookies τρίτων μερών για σκοπούς μάρκετινγκ και για την παροχή βελτιωμένων υπηρεσιών σύμφωνα με τις προτιμήσεις σας. Κάνοντας κλικ στο OK ή συνεχίζοντας την περιήγησή σας στον ιστότοπό μας, αποδέχεστε την χρήση cookies σύμφωνα με τη σχετική πολιτική μας.
