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 assigned to the dropdown-trigger slot will be used as the
"trigger" element. The child element assigned to the dropdown-content slot 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.
The following custom properties and mixins are also available for styling:
| Custom property | Description | Default |
|---|---|---|
--paper-menu-button-dropdown-background |
Background color of the paper-menu-button dropdown | --primary-background-color |
--paper-menu-button |
Mixin applied to the paper-menu-button | {} |
--paper-menu-button-disabled |
Mixin applied to the paper-menu-button when disabled | {} |
--paper-menu-button-dropdown |
Mixin applied to the paper-menu-button dropdown | {} |
--paper-menu-button-content |
Mixin applied to the paper-menu-button content | {} |
Defines these animations:
- <paper-menu-grow-height-animation>
- <paper-menu-grow-width-animation>
- <paper-menu-shrink-height-animation>
- <paper-menu-shrink-width-animation>
See: Documentation, Demo.
npm install --save @polymer/paper-menu-button
<html>
<head>
<script type="module">
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-menu-button/paper-menu-button.js';
</script>
</head>
<body>
<paper-menu-button>
<paper-icon-button icon="menu" slot="dropdown-trigger"></paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-listbox>
</paper-menu-button>
</body>
</html>import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-menu-button/paper-menu-button.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<paper-menu-button>
<paper-icon-button icon="menu" slot="dropdown-trigger"></paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-listbox>
</paper-menu-button>
`;
}
}
customElements.define('sample-element', SampleElement);If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/PolymerElements/paper-menu-button
cd paper-menu-button
npm install
npm install -g polymer-clipolymer serve --npm
open http://127.0.0.1:<port>/demo/polymer test --npm