third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button.html - Issue 1261403002: Add paper-menu-button and its dependencies to third_party/polymer

Unified Diff: third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button.html

Issue 1261403002: Add paper-menu-button and its dependencies to third_party/polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: reproduce.sh Created 5 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-menu-button/index.html ('k') | third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button-animations.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button.html

diff --git a/third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button.html b/third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button.html

new file mode 100644

index 0000000000000000000000000000000000000000..ba482353e159229e96f75c5a0b22efe2409e8efc

--- /dev/null

+++ b/third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button.html

@@ -0,0 +1,107 @@

+<!--

+@license

+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt

+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt

+Code distributed by Google as part of the polymer project is also

+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt

+--><html><head><link rel="import" href="../polymer/polymer.html">

+<link rel="import" href="../iron-dropdown/iron-dropdown.html">

+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">

+<link rel="import" href="../iron-behaviors/iron-control-state.html">

+<link rel="import" href="../paper-material/paper-material.html">

+<link rel="import" href="../paper-styles/default-theme.html">

+<link rel="import" href="../neon-animation/animations/fade-in-animation.html">

+<link rel="import" href="../neon-animation/animations/fade-out-animation.html">

+<link rel="import" href="paper-menu-button-animations.html">

+<!--

+`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:

+ <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 | `#fff`

+`--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 | `{}`

+@hero hero.svg

+@demo demo/index.html

+-->

+</head><body><dom-module id="paper-menu-button">

+ <style>

+ :host {

+ display: inline-block;

+ position: relative;

+ padding: 8px;

+ outline: none;

+ @apply(--paper-menu-button);

+ }

+ :host([disabled]) {

+ cursor: auto;

+ color: var(--disabled-text-color);

+ @apply(--paper-menu-button-disabled);

+ }

+ :host([vertical-align="top"]) paper-material {

+ margin-bottom: 20px;

+ margin-top: -10px;

+ top: 10px;

+ }

+ :host([vertical-align="bottom"]) paper-material {

+ bottom: 10px;

+ margin-bottom: -10px;

+ margin-top: 20px;

+ }

+ paper-material {

+ border-radius: 2px;

+ background-color: var(--paper-menu-button-dropdown-background, --primary-background-color);

+ @apply(--paper-menu-button-dropdown);

+ }

+ </style>

+ <template>

+ <div id="trigger" on-tap="open">

+ <content select=".dropdown-trigger"></content>

+ </div>

+ <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizontalAlign]]" vertical-align="[[verticalAlign]]" open-animation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimationConfig]]" no-animations="[[noAnimations]]">

+ <paper-material class="dropdown-content">

+ <content select=".dropdown-content"></content>

+ </paper-material>

+ </iron-dropdown>

+ </template>

+</dom-module>

+<script src="paper-menu-button-extracted.js"></script></body></html>