tree: 7d08d2abd57ef6eb9abd1f20033d2bb318786a4d [path history] [tgz]
  1. demo/
  2. test/
  3. bower.json
  4. CONTRIBUTING.md
  5. hero.svg
  6. index.html
  7. paper-menu-button-animations.html
  8. paper-menu-button.html
  9. README.md
systrace/catapult/third_party/polymer/components/paper-menu-button/README.md

Build status

Demo and API docs

##<paper-menu-button>

Material design: Dropdown buttons

paper-menu-button allows one to compose a designated “trigger” element with another element that represents “content”, to create a dropdown menu that displays the “content” when the “trigger” is clicked.

The child element with the class dropdown-trigger will be used as the “trigger” element. The child element with the class dropdown-content will be used as the “content” element.

The paper-menu-button is sensitive to its content's iron-select events. If the “content” element triggers an iron-select event, the paper-menu-button will close automatically.

Example:

<paper-menu-button>
  <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
  <paper-menu class="dropdown-content">
    <paper-item>Share</paper-item>
    <paper-item>Settings</paper-item>
    <paper-item>Help</paper-item>
  </paper-menu>
</paper-menu-button>

Styling

The following custom properties and mixins are also available for styling:

Custom propertyDescriptionDefault
--paper-menu-button-dropdown-backgroundBackground color of the paper-menu-button dropdown--primary-background-color
--paper-menu-buttonMixin applied to the paper-menu-button{}
--paper-menu-button-disabledMixin applied to the paper-menu-button when disabled{}
--paper-menu-button-dropdownMixin applied to the paper-menu-button dropdown{}
--paper-menu-button-contentMixin applied to the paper-menu-button content{}