Create a dropdown using a polymer element. It's based on boostrap dropdown.
- Using content
<bs-dropdown btn_title="Content">
<div class="menu-content">
<p>Link 1</p>
<p>Link 2</p>
<p>Link 3</p>
</div>
</bs-dropdown>
- Using menu_items Array
<template id="bind" is="dom-bind">
<bs-dropdown id="complexList" btn_title="Custom list items" menu_items="{{complexList}}"> </bs-dropdown>
</template>
<script>
var bind = document.querySelector('#bind');
bind.complexList = [
{
name: 'Load',
onclick: function(){
console.log('Clicked Load');
},
link:'#load',
icon: 'folder-open'
},
{
name: 'Save',
onclick: function(){
console.log('Clicked Save');
},
link:'#option2',
icon: 'floppy-saved'
},
{
name: 'Edit',
onclick: function(){
console.log('Clicked Edit');
},
link:'#edit',
icon: 'pencil'
}
]
</script>
NOTE: menu_items can be a single array with the names of the options fields.
var option_list = ['Link1','Link2','Link3']
or it can be an object with some camps:
- Name: name of the field
- onclick: function which will be invoke when the field is Clicked
- icon: type of icon
- Using bs-dropdown-item (included in bs-dropdown)
<bs-dropdown btn_title="Toggle">
<div class="menu-content">
<bs-dropdown-item>Example</bs-dropdown-item>
<bs-dropdown-item>Example</bs-dropdown-item>
<bs-dropdown-item>Example</bs-dropdown-item>
</div>
</bs-dropdown>
Attribute | Description | Type | Default |
---|---|---|---|
btn_title | Change the button title | Sting | Dropdown |
dropup | Menu list is showed above the button | Boolean | false |
opened | If true, menu list is showed | Boolean | false |
menu_items | If it is defined, all items in the array are menu items | Array | [] |
Attribute | Description | return |
---|---|---|
Open | Open menu list | |
Close | Close menu list | |
Toggle | If menu list, it is opened, else closed |
Attribute | Description | Default |
---|---|---|
--bs-dropdown-btn-toggle | Mixin applied to bs-dropdown button | {} |
--bs-dropdown-btn-toggle-focused | Mixin applied to bs-dropdown button when is focused | {} |
--bs-dropdown-box | Mixin aplied to menu box that contains menu options | {} |
--bs-dropdown-menuItem-hover | Mixin aplied to menu item when it is hovered | {} |
--bs-dropdown-divider | Mixin aplied to divider | {} |
Attribute | Description | Default |
---|---|---|
--bs-dropdown-item | Mixin applied to bs-dropdown-item | {} |
--bs-dropdown-item-hovered | Mixin applied to bs-dropdown-item when is focused | {} |
Element dependencies are managed via Bower. You can install that via:
npm install -g bower
Then, go ahead and download the element's dependencies:
bower install