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

Side by Side 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, 4 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!--

	2 @license

	3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

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

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

	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

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

	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

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

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

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

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

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

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

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

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

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

	18

	19 <!--

	20 `paper-menu-button` allows one to compose a designated "trigger" element with

	21 another element that represents "content", to create a dropdown menu that

	22 displays the "content" when the "trigger" is clicked.

	23

	24 The child element with the class `dropdown-trigger` will be used as the

	25 "trigger" element. The child element with the class `dropdown-content` will be

	26 used as the "content" element.

	27

	28 The `paper-menu-button` is sensitive to its content's `iron-select` events. If

	29 the "content" element triggers an `iron-select` event, the `paper-menu-button`

	30 will close automatically.

	31

	32 Example:

	33

	34 <paper-menu-button>

	35 <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-butto n>

	36 <paper-menu class="dropdown-content">

	37 <paper-item>Share</paper-item>

	38 <paper-item>Settings</paper-item>

	39 <paper-item>Help</paper-item>

	40 </paper-menu>

	41 </paper-menu-button>

	42

	43 ### Styling

	44

	45 The following custom properties and mixins are also available for styling:

	46

	47 Custom property \| Description \| Default

	48 ----------------\|-------------\|----------

	49 `--paper-menu-button-dropdown-background` \| Background color of the paper-menu-b utton dropdown \| `#fff`

	50 `--paper-menu-button` \| Mixin applied to the paper-menu-button \| `{}`

	51 `--paper-menu-button-disabled` \| Mixin applied to the paper-menu-button when dis abled \| `{}`

	52 `--paper-menu-button-dropdown` \| Mixin applied to the paper-menu-button dropdown \| `{}`

	53

	54

	55 @hero hero.svg

	56 @demo demo/index.html

	57 -->

	58

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

	60 <style>

	61 :host {

	62 display: inline-block;

	63 position: relative;

	64 padding: 8px;

	65 outline: none;

	66

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

	68 }

	69

	70 :host([disabled]) {

	71 cursor: auto;

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

	73

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

	75 }

	76

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

	78 margin-bottom: 20px;

	79 margin-top: -10px;

	80 top: 10px;

	81 }

	82

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

	84 bottom: 10px;

	85 margin-bottom: -10px;

	86 margin-top: 20px;

	87 }

	88

	89 paper-material {

	90 border-radius: 2px;

	91 background-color: var(--paper-menu-button-dropdown-background, --primary-b ackground-color);

	92

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

	94 }

	95 </style>

	96 <template>

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

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

	99 </div>

	100 <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizon talAlign]]" vertical-align="[[verticalAlign]]" open-animation-config="[[openAnim ationConfig]]" close-animation-config="[[closeAnimationConfig]]" no-animations=" [[noAnimations]]">

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

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

	103 </paper-material>

	104 </iron-dropdown>

	105 </template>

	106 </dom-module>

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

OLD	NEW