Work with Components

Metro UI has a large set of ready-to-use components!

Initialization

Metro UI supports two ways to initialization components:

• with data-role attribute
• with calling component init function

Data-role attribute

To initialize a component with data-role attribute, you need to add data-role attribute to the HTML element and specify the component name.

<div data-role="accordion">
...
</div>

Pass Options

When you create a component with attribute data-role, you must pass options with attributes data-*, where specify option-name in dashed-name format:

<div data-role="accordion" data-one-frame="false">
...
</div>

makePlugin() function

The second way to init component - using calling special fabric function Metro.makePlugin(...). This method receives three arguments: selector, component name, and component options.

HTML

<div id="accordion">
...
</div>

JavaScript

Metro.makePlugin("#accordion", "accordion", {...});

Pass Options

When you create a component with a fabric function, you must pass options in third argument in camel-case format:

JavaScript

Metro.makePlugin("#accordion", "accordion", {
    oneFrame: false
});

Component API

Each component has a set of methods and properties that allow you to interact with the component. To get access to components API, you must call method Metro.getPlugin(...). This method receives two arguments: element (can be selector, Dom object, jQuery object or HTMLElement) and component name.

const charm = Metro.getPlugin("#left-charm", "charms");
charm.open(); // API method

or

const charm = $("#left-charm").data("charms");
charm.open(); // API method

Component Events

Many components in Metro UI generate events during their work. All events are defined width attributes with prefix data-on-*. To define an event, you can use two ways:

1. Specify a function name in attribute data-on-* for component.
2. Use valid javascript code for data-on-* attribute value.

<input data-role="keypad" data-on-change="console.log(arguments)">
<input data-role="keypad" data-on-change="dataChange">
<input data-role="keypad" data-on-change="MyPackage.dataChange">

<script>
    function dataChange(el){
        console.log(arguments);
    }

    var MyPackage = {
        dataChange: function(el){
            console.log(arguments);
        }
    }
</script>

Subscribing to the events

You can subscribe to the component events with @olton/Dom method $.on(...) or method addEventListener(...).

<input data-role="keypad" id="keypad">

<script>
    $("#keypad").on("shuffle", function(e){
        console.log(e.detail);
    })

    /* or */

    document.getElementById("keypad").addEventListener("shuffle", function(e){
        console.log(e.detail);
    })
</script>

Standard events

You can specify standard events for HTML elements without any restrictions.

Global Component Setup

Each component has a global setup object that allows you to set default options for all components of this type.

To create a global setup object, you must create global object in format metroComponentSetup with required options before including a metro library.

<script>
// Setup component
var metroAccordionSetup = {
    oneFrame: false,
}
</script>

// Include Metro UI library
<script src="https://cdn.metroui.org.ua/current/metro.js"></script>