README.md
1
2 <!---
3
4 This README is automatically generated from the comments in these files:
5 paper-menu-button-animations.html paper-menu-button.html
6
7 Edit those files, and our readme bot will duplicate them over here!
8 Edit this file, and the bot will squash your changes :)
9
10 The bot does some handling of markdown. Please file a bug if it does the wrong
11 thing! https://github.com/PolymerLabs/tedium/issues
12
13 -->
14
15 [](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 ##<paper-menu-button>
21
22 Material 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
25 another element that represents "content", to create a dropdown menu that
26 displays the "content" when the "trigger" is clicked.
27
28 The 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
30 used as the "content" element.
31
32 The `paper-menu-button` is sensitive to its content's `iron-select` events. If
33 the "content" element triggers an `iron-select` event, the `paper-menu-button`
34 will close automatically.
35
36 Example:
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
51 The 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