Chromium Code Reviews

Side by Side Diff: polymer_0.5.0/bower_components/paper-dropdown/demo.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff |
« no previous file with comments | « polymer_0.5.0/bower_components/paper-dropdown/bower.json ('k') | polymer_0.5.0/bower_components/paper-dropdown/index.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2014 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 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 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 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 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 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <html> 11 <html>
12 <head> 12 <head>
13 13
14 <meta charset="utf-8"> 14 <meta charset="utf-8">
15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1.0, user-scalable=yes"> 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1.0, user-scalable=yes">
17 17
18 <title>paper-menu-button</title> 18 <title>paper-dropdown</title>
19 19
20 <script src="../platform/platform.js"></script> 20 <script src="../webcomponentsjs/webcomponents.js"></script>
21 21
22 <link href="../core-collapse/core-collapse.html" rel="import">
22 <link href="../core-icons/core-icons.html" rel="import"> 23 <link href="../core-icons/core-icons.html" rel="import">
24 <link href="../paper-icon-button/paper-icon-button.html" rel="import">
23 <link href="../paper-item/paper-item.html" rel="import"> 25 <link href="../paper-item/paper-item.html" rel="import">
24 26
25 <link href="paper-menu-button.html" rel="import"> 27 <link href="paper-dropdown.html" rel="import">
26 28
27 <style shim-shadowdom> 29 <style shim-shadowdom>
28 body { 30 body {
29 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 31 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
32 font-size: 14px;
33 margin: 0;
34 padding: 24px;
35 -webkit-tap-highlight-color: rgba(0,0,0,0);
36 -webkit-touch-callout: none;
37 }
38
39 section {
40 padding: 20px 0;
41 }
42
43 section > div {
44 padding: 14px;
30 font-size: 16px; 45 font-size: 16px;
31 } 46 }
32 47
33 html, body { 48 x-trigger {
34 height: 100%; 49 z-index: auto;
35 margin: 0;
36 } 50 }
37 51
38 .toolbar { 52 html /deep/ paper-dropdown:not(.no-padding)::shadow #scroller {
39 color: #fff; 53 box-sizing: border-box;
40 font-size: 16px; 54 padding: 8px;
41 padding: 12px;
42 } 55 }
43 56
44 .toolbar-1 { 57 .with-margin {
45 background-color: #3b78e7; 58 margin: 12px;
46 } 59 }
47 60
48 .toolbar-2 { 61 .open-below {
49 background-color: #4285f4; 62 top: 38px;
50 }
51
52 .toolbar-3 {
53 background-color: #5e97f6;
54 }
55
56 .bottom-toolbar-1 {
57 background-color: #0d904f;
58 }
59
60 .bottom-toolbar-2 {
61 background-color: #0f9d58;
62 }
63
64 .bottom-toolbar-3 {
65 background-color: #33ac71;
66 } 63 }
67 64
68 </style> 65 </style>
69 66
70 </head> 67 </head>
71 <body> 68 <body>
72 69
70 <polymer-element name="x-trigger" extends="paper-icon-button" relative on-tap= "{{toggle}}" noink>
71 <template>
72 <shadow></shadow>
73 <content></content>
74 </template>
75 <script>
76 Polymer({
77 toggle: function() {
78 if (!this.dropdown) {
79 this.dropdown = this.querySelector('paper-dropdown');
80 }
81 this.dropdown && this.dropdown.toggle();
82 }
83 });
84 </script>
85 </polymer-element>
86
73 <template is="auto-binding"> 87 <template is="auto-binding">
74 88
75 <div layout vertical fit> 89 <section>
76 90
77 <div class="toolbar toolbar-1" layout horizontal center> 91 <div>Absolutely positioned dropdowns</div>
78 92
79 <paper-menu-button icon="menu"> 93 <x-trigger icon="menu">
80 <template repeat="{{pastries}}"> 94 <paper-dropdown>
81 <paper-item>{{}}</paper-item> 95 halign = left
82 </template> 96 <br>
83 </paper-menu-button> 97 valign = top
98 </paper-dropdown>
99 </x-trigger>
84 100
85 <paper-menu-button icon="menu" noTransition> 101 <x-trigger icon="menu">
86 <template repeat="{{countries}}"> 102 <paper-dropdown valign="bottom">
87 <paper-item>{{name}}</paper-item> 103 halign = left
88 </template> 104 <br>
89 </paper-menu-button> 105 valign = bottom
106 </paper-dropdown>
107 </x-trigger>
90 108
91 <div flex></div> 109 <x-trigger icon="menu">
110 <paper-dropdown halign="right">
111 halign = right
112 <br>
113 valign = top
114 </paper-dropdown>
115 </x-trigger>
92 116
93 <paper-menu-button icon="more-vert" halign="right" noTransition> 117 <x-trigger icon="menu">
94 <template repeat="{{countries}}"> 118 <paper-dropdown class="no-padding">
95 <paper-item>{{name}}</paper-item> 119 <div class="menu">
96 </template> 120 <paper-item>Item 1</paper-item>
97 </paper-menu-button> 121 <paper-item>Item 2</paper-item>
98 122 <paper-item>Item 3</paper-item>
99 <paper-menu-button icon="more-vert" halign="right"> 123 </div>
100 <template repeat="{{pastries}}"> 124 </paper-dropdown>
101 <paper-item>{{}}</paper-item> 125 </x-trigger>
102 </template>
103 </paper-menu-button>
104 126
105 </div> 127 </section>
106 128
107 <div flex></div> 129 <section>
108 130
109 <div class="toolbar bottom-toolbar-1" layout horizontal center> 131 <div>Layered dropdowns</div>
110 132
111 <paper-menu-button icon="menu" valign="bottom"> 133 <button onclick="document.getElementById('collapse').toggle()">toggle core -collapse</button>
112 <template repeat="{{pastries}}">
113 <paper-item>{{}}</paper-item>
114 </template>
115 </paper-menu-button>
116 134
117 <paper-menu-button icon="menu" valign="bottom" noTransition> 135 <br>
118 <template repeat="{{countries}}">
119 <paper-item>{{name}}</paper-item>
120 </template>
121 </paper-menu-button>
122 136
123 <div flex></div> 137 <core-collapse id="collapse">
124 138
125 <paper-menu-button icon="more-vert" halign="right" valign="bottom" noTrans ition> 139 <x-trigger icon="menu">
126 <template repeat="{{countries}}"> 140 <paper-dropdown layered>
127 <paper-item>{{name}}</paper-item> 141 halign = left
128 </template> 142 <br>
129 </paper-menu-button> 143 valign = top
130 144 </paper-dropdown>
131 <paper-menu-button icon="more-vert" halign="right" valign="bottom"> 145 </x-trigger>
132 <template repeat="{{pastries}}">
133 <paper-item>{{}}</paper-item>
134 </template>
135 </paper-menu-button>
136 146
137 </div> 147 </core-collapse>
138 148
139 </div> 149 </section>
150
151 <section>
152
153 <div>Scrolling and margin</div>
154
155 <x-trigger icon="menu">
156 <paper-dropdown>
157 no margin<br>
158 <br>
159 <template repeat="{{countries}}">
160 {{name}}<br>
161 </template>
162 </paper-dropdown>
163 </x-trigger>
164
165 <x-trigger icon="menu">
166 <paper-dropdown class="with-margin">
167 with margin<br>
168 <br>
169 <template repeat="{{countries}}">
170 {{name}}<br>
171 </template>
172 </paper-dropdown>
173 </x-trigger>
174
175 </section>
176
177 <section>
178
179 <div>Custom position</div>
180
181 <x-trigger icon="menu">
182 <paper-dropdown class="open-below">
183 top: 38px
184 </paper-dropdown>
185 </x-trigger>
186
187 </section>
140 188
141 </template> 189 </template>
142 190
143 <script> 191 <script>
144 192
145 scope = document.querySelector('template[is=auto-binding]'); 193 scope = document.querySelector('template[is=auto-binding]');
146 194
147 scope.countries = [ 195 scope.countries = [
148 {name: 'Afghanistan', code: 'AF'}, 196 {name: 'Afghanistan', code: 'AF'},
149 {name: 'Åland Islands', code: 'AX'}, 197 {name: 'Åland Islands', code: 'AX'},
(...skipping 249 matching lines...)
399 'Madeleine', 447 'Madeleine',
400 'Pound cake', 448 'Pound cake',
401 'Pretzel', 449 'Pretzel',
402 'Sfogliatelle' 450 'Sfogliatelle'
403 ]; 451 ];
404 452
405 </script> 453 </script>
406 454
407 </body> 455 </body>
408 </html> 456 </html>
OLDNEW
« no previous file with comments | « polymer_0.5.0/bower_components/paper-dropdown/bower.json ('k') | polymer_0.5.0/bower_components/paper-dropdown/index.html » ('j') | no next file with comments »

Powered by Google App Engine