https://github.com/polymerelements/paper-menu-button
An element that allows composing a trigger and content as a dropdown menu.
https://github.com/polymerelements/paper-menu-button
Last synced: about 1 year ago
JSON representation
An element that allows composing a trigger and content as a dropdown menu.
- Host: GitHub
- URL: https://github.com/polymerelements/paper-menu-button
- Owner: PolymerElements
- Created: 2015-05-05T00:43:04.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T14:04:19.000Z (over 2 years ago)
- Last Synced: 2024-05-09T10:09:28.898Z (about 2 years ago)
- Language: JavaScript
- Homepage: https://www.webcomponents.org/element/PolymerElements/paper-menu-button
- Size: 682 KB
- Stars: 24
- Watchers: 20
- Forks: 46
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@polymer/paper-menu-button)
[](https://travis-ci.org/PolymerElements/paper-menu-button)
[](https://webcomponents.org/element/@polymer/paper-menu-button)
## <paper-menu-button>
`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.
### Styling
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 | `{}` |
## paper-menu-button-animations.js
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](https://www.webcomponents.org/element/@polymer/paper-menu-button),
[Demo](https://www.webcomponents.org/element/@polymer/paper-menu-button/demo/demo/index.html).
## Usage
### Installation
```
npm install --save @polymer/paper-menu-button
```
### In an html file
```html
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';
Share
Settings
Help
```
### In a Polymer 3 element
```js
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`
Share
Settings
Help
`;
}
}
customElements.define('sample-element', SampleElement);
```
## Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/PolymerElements/paper-menu-button
cd paper-menu-button
npm install
npm install -g polymer-cli
```
### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:/demo/
```
### Running the tests
```sh
polymer test --npm
```