mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
70 lines
2.5 KiB
Markdown
70 lines
2.5 KiB
Markdown
|
|
<!---
|
|
|
|
This README is automatically generated from the comments in these files:
|
|
paper-menu-button-animations.html paper-menu-button.html
|
|
|
|
Edit those files, and our readme bot will duplicate them over here!
|
|
Edit this file, and the bot will squash your changes :)
|
|
|
|
The bot does some handling of markdown. Please file a bug if it does the wrong
|
|
thing! https://github.com/PolymerLabs/tedium/issues
|
|
|
|
-->
|
|
|
|
[](https://travis-ci.org/PolymerElements/paper-menu-button)
|
|
|
|
_[Demo and API docs](https://elements.polymer-project.org/elements/paper-menu-button)_
|
|
|
|
|
|
##<paper-menu-button>
|
|
|
|
Material design: [Dropdown buttons](https://www.google.com/design/spec/components/buttons.html#buttons-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:
|
|
|
|
```html
|
|
<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 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 | `{}` |
|
|
|
|
|
|
|
|
<!-- No docs for <paper-menu-grow-height-animation> found. -->
|
|
|
|
<!-- No docs for <paper-menu-grow-width-animation> found. -->
|
|
|
|
<!-- No docs for <paper-menu-shrink-height-animation> found. -->
|
|
|
|
<!-- No docs for <paper-menu-shrink-width-animation> found. -->
|