1
2<!---
3
4This README is automatically generated from the comments in these files:
5paper-menu-button-animations.html  paper-menu-button.html
6
7Edit those files, and our readme bot will duplicate them over here!
8Edit this file, and the bot will squash your changes :)
9
10The bot does some handling of markdown. Please file a bug if it does the wrong
11thing! https://github.com/PolymerLabs/tedium/issues
12
13-->
14
15[![Build status](https://travis-ci.org/PolymerElements/paper-menu-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-menu-button)
16
17_[Demo and API docs](https://elements.polymer-project.org/elements/paper-menu-button)_
18
19
20##&lt;paper-menu-button&gt;
21
22Material design: [Dropdown buttons](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
23
24`paper-menu-button` allows one to compose a designated "trigger" element with
25another element that represents "content", to create a dropdown menu that
26displays the "content" when the "trigger" is clicked.
27
28The child element with the class `dropdown-trigger` will be used as the
29"trigger" element. The child element with the class `dropdown-content` will be
30used as the "content" element.
31
32The `paper-menu-button` is sensitive to its content's `iron-select` events. If
33the "content" element triggers an `iron-select` event, the `paper-menu-button`
34will close automatically.
35
36Example:
37
38```html
39<paper-menu-button>
40  <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
41  <paper-menu class="dropdown-content">
42    <paper-item>Share</paper-item>
43    <paper-item>Settings</paper-item>
44    <paper-item>Help</paper-item>
45  </paper-menu>
46</paper-menu-button>
47```
48
49### Styling
50
51The following custom properties and mixins are also available for styling:
52
53| Custom property | Description | Default |
54| --- | --- | --- |
55| `--paper-menu-button-dropdown-background` | Background color of the paper-menu-button dropdown | `--primary-background-color` |
56| `--paper-menu-button` | Mixin applied to the paper-menu-button | `{}` |
57| `--paper-menu-button-disabled` | Mixin applied to the paper-menu-button when disabled | `{}` |
58| `--paper-menu-button-dropdown` | Mixin applied to the paper-menu-button dropdown | `{}` |
59| `--paper-menu-button-content` | Mixin applied to the paper-menu-button content | `{}` |
60
61
62
63<!-- No docs for <paper-menu-grow-height-animation> found. -->
64
65<!-- No docs for <paper-menu-grow-width-animation> found. -->
66
67<!-- No docs for <paper-menu-shrink-height-animation> found. -->
68
69<!-- No docs for <paper-menu-shrink-width-animation> found. -->
70