Dropdown

Dropdown helps you build hidden menus or sets of commands that open by clicking on the toggle element. This is a powerful tool to make your application more interactive.

Usage #

Dropdown menus in Kube are simple and intuitive. You've got a toggle element with data-kube="dropdown" and a target layer with some kind of items.

// toggle element
<button data-kube="dropdown" data-target="#dropdown">
    Show
    <span class="caret is-down"></span>
</button>

// dropdown box
<div id="dropdown" class="dropdown is-hidden">
    <a href="#">Item 1</a>

    // active state
    <a href="#" class="is-active">Item 2</a>

    // separating line
    <a href="#" class="is-separator">Item 3</a>
    <a href="#">Item 4</a>
</div>

Settings #

target

Type: String

Default: false

Sets ID selector of an element that will open as the dropdown.

<button data-kube="dropdown" data-target="#dropdown">Open</button>

<div id="dropdown" class="dropdown is-hidden">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
</div>

Commands #

Commands is a way to send and catch actions that should occur when you click on the dropdown items. Commands generate events with names that you specify at the dropdown item using the data-command attribute.

When you click on the dropdown item, the command sends an event with the following parameters as arguments:

Name Description
module Instance of the dropdown module.
$element DOM element of the clicked item.
args Object of parameters specified with data attributes (data-id="1", data-value="new-item" etc).

See the example of how to set up the commands to the dropdown items.

// toggle element
<button data-kube="dropdown" data-target="#dropdown">
    Show
    <span class="caret is-down"></span>
</button>

// dropdown box
<div id="dropdown" class="dropdown is-hidden">
    <a href="#" data-command="dropdown.add" data-id="1" data-add="New item">Add</a>
    <a href="#" data-command="dropdown.remove" data-id="1">Remove</a>
</div>

Catch commands in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch commands
        onmessage: {
            dropdown: {
                add: function(sender, $element, args)
                {
                    console.log('Add action');
                },
                remove: function(sender, $element, args)
                {
                    console.log('Remove action');
                }
            }
        }
    });
})(Kube);

You can easily set up the ID or data-name attribute to catch commands from a specific dropdown.

// toggle element
<button data-name="mydropdown" data-kube="dropdown" data-target="#dropdown">
    Show
    <span class="caret is-down"></span>
</button>

// dropdown box
<div id="dropdown" class="dropdown is-hidden">
    <a href="#" data-command="dropdown.add" data-id="1" data-add="New item">Add</a>
    <a href="#" data-command="dropdown.remove" data-id="1">Remove</a>
</div>

Catch commands from the dropdown:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch commands
        onmessage: {
            dropdown: {
                add: function(sender, $element, args)
                {
                    if (sender._id === 'mydropdown')
                    {
                        console.log('Add action');
                    }
                },
                remove: function(sender, $element, args)
                {
                    if (sender._id === 'mydropdown')
                    {
                        console.log('Remove action');
                    }
                }
            }
        }
    });
})(Kube);

Events #

Event Description
open This event fires immediately when the open instance method is called.
opened This event is fired when the dropdown has been opened, will wait for CSS animation to complete.
close This event fires immediately when the close instance method is called.
closed This event is fired when the dropdown has been closed, will wait for CSS animation to complete.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            dropdown: {
                closed: function(sender)
                {
                    console.log('Dropdown is closed.');
                }
            }
        }
    });
})(Kube);

Catch events from a specific dropdown

Set an ID for the dropdown:

<button id="mydropdown" data-kube="dropdown" data-target="#dropdown">Open</button>

<div id="dropdown" class="dropdown is-hidden">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
</div>

Or set data-name attribute:

<button data-name="mydropdown" data-kube="dropdown" data-target="#dropdown">Open</button>

<div id="dropdown" class="dropdown is-hidden">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
</div>

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            dropdown: {
                closed: function(sender)
                {
                    if (sender._id === 'mydropdown')
                    {
                        console.log('Dropdown #mydropdown is closed.');
                    }
                }
            }
        }
    });
})(Kube);