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 UIkit API.

Markup

UIkit.button($(".button"), {/* options */});

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 components

/* 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 core + components separated by a comma */
require("uikit!notify,sortable", function(UI){

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

});

Override default component settings.

It is possible to adjust the default component settings as you can see in the following example.

Usage

                            // override default tooltip settings
                            UIkit.on('beforeready.uk.dom', function(){

                                $.extend(UIkit.components.tooltip.prototype.defaults, {
                                    pos: 'top',
                                    delay: 500,
                                    animation: true
                                });
                            });
                            

Auto-init new added components, e.g via AJAX or reactive framework.

If you inject dynamic HTML markup into the DOM via JavaScript, UIKit JavaScript components will be automatically initialized via the data-uk-* attributes.

You can manually add an observer to your DOM via the UIkit.domObserve method.

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 display.uk.check event, which will be triggered by the container component, for example the Switcher. This is not needed for elements with data-uk-margin, data-uk-grid-margin and data-uk-grid-match attributes, those will be triggered by default.

Usage

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

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