Dropdown
Easy creating dropdown elements with special role.
About
Quite often you have to create elements that dropdown at the user's request. For example, drop-down menus.
In Metro 4 you can transform any element to dropdown. Element must have display: block css property.
To create dropdown element you can add role data-role="dropdown" and define toggle for it with attribute data-toggle-element="...".
At the same time, only one dropdown element can be opened.
In Metro 4 you can transform any element to dropdown.
<button class="button" id="dropdown_toggle_1">Drop block</button>
<div class="pos-relative">
<div class="bg-red fg-white"
data-role="dropdown"
data-toggle-element="#dropdown_toggle_1">
<p class="p-10 text-center">
In Metro 4 you can transform any element to dropdown.
</p>
</div>
</div>
Options
Each dropdown element has a number of option:
| Option | Data-* | Default | Desc |
|---|---|---|---|
| effect | data-effect |
slide | Show/Close effect. Values: slide, fade |
| toggleElement | data-toggle-element |
null | Selector who specified toggle element |
| duration | data-duration |
300 | Effect duration in milliseconds |
| noClose | data-no-close |
false | If true, dropped element can't be close |
| onDrop | data-on-drop |
Metro.noop | Event fired when element dropped |
| onUp | data-on-up |
Metro.noop | Event fired when element close |
| onDropdownCreate | data-on-dropdown-create |
Metro.noop | Event fired when element created |
Important! One dropdown element is open, other dropdown elements are closed!
Methods
Each dropdown component has next methods: open(), close(). You can use this methods to interact with component.
el = $('#el').data('dropdown');
el.open();
setTimeout(function(){
el.close();
}, 2000);