bs-dropdown

Create a dropdown using a polymer element. It's based on boostrap dropdown.

Example

• 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>

Properties

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	[]

Methods

Attribute	Description	return
Open	Open menu list
Close	Close menu list
Toggle	If menu list, it is opened, else closed

Style

bs-dropdown

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	{}

bs-dropdown-item

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	{}

Dependencies

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