JavaScript

Use data attributes to apply JavaScript to UIkit components

You can use all UIkit components by just adding data-uk-* attributes to your HTML elements without writing a single line of JavaScript. This is UIkit's best practice of using its components and should always be considered first.

Markup

<button data-uk-button>My Button</button>

But of course you can still use the components just through the jQuery API.

Markup

$(".button").uk("button");

AMD support

AMD (Asynchronous Module Definition) is a way of defining JavaScript modules and their dependencies so they can be loaded asynchronously.

Usage

/* Simple require of the UIkit core */
require("path/to/uikit.js", function(UI){

    // UI is the global UIkit object a.k.a. $.UIkit

});

Autoload UIkit and its add-ons

/* setup require.js first */
requirejs.config({

    paths: {
        "uikit": 'path/to/uikit.js'
    },

    config: {
        "uikit": {
            "base": "path/to/uikit_dist_folder"
        }
    }

});

/* now you can autoload uikit + addons separated by a comma */
require("uikit!notify,sortable", function(UI){

    // access loaded addons: UI.notify, UI.sortable

});

Observe the DOM to auto-init new added components, e.g via AJAX.

If you inject dynamic HTML markup into the DOM via JavaScript, just add the data-uk-observe attribute to one of the parent elements to auto-initialize UIKit JavaScript components.

Usage

<div data-uk-observe>
    <!-- inject your dynamic html here -->
</div>

Observe an element via JavaScript

$.UIkit.domObserve('#element', function(element) { /* apply on dom change within element */ })

Check Display event on visibility change.

Sometimes components, like Grid or Tab are hidden in the markup. This may happen when used in combination with the Switcher, Modal or Dropdown. Once they become visible, they need to be recalculated to adjust or fix the height and other dimensions.

To do so, add the data-uk-check-display attribute to the elements which need to be recalculated. They now listen to the uk.check.display event, which will be triggered by the container component, for example the Switcher. This is not needed for the Grid, it's triggered by default.

Usage

<!-- Element within a modal, switcher or dropdown -->
<div id="myelement" data-uk-check-display>...</div>

<script>
$("#myelement").on('uk.check.display', function(){
   // custom code to adjust height etc on show
});
</script>