Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(68)

Side by Side Diff: third_party/polymer/components-chromium/paper-dropdown/demo.html

Issue 864173009: Add paper-dropdown and paper-dropdown-menu and run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 5 years, 10 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
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>core-dropdown</title> 18 <title>paper-dropdown</title>
19 19
20 <script src="../webcomponentsjs/webcomponents.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-collapse/core-collapse.html" rel="import">
23 <link href="../core-icons/core-icons.html" rel="import"> 23 <link href="../core-icons/core-icons.html" rel="import">
24 <link href="../core-icon-button/core-icon-button.html" rel="import"> 24 <link href="../paper-icon-button/paper-icon-button.html" rel="import">
25 <link href="../paper-item/paper-item.html" rel="import">
25 26
26 <link href="core-dropdown.html" rel="import"> 27 <link href="paper-dropdown.html" rel="import">
27 28
28 <style shim-shadowdom> 29 <style shim-shadowdom>
29 body { 30 body {
30 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; 31 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
31 font-size: 14px; 32 font-size: 14px;
32 margin: 0; 33 margin: 0;
33 padding: 24px; 34 padding: 24px;
34 -webkit-tap-highlight-color: rgba(0,0,0,0); 35 -webkit-tap-highlight-color: rgba(0,0,0,0);
35 -webkit-touch-callout: none; 36 -webkit-touch-callout: none;
36 } 37 }
37 38
38 section { 39 section {
39 padding: 20px 0; 40 padding: 20px 0;
40 } 41 }
41 42
42 section > div { 43 section > div {
43 padding: 14px; 44 padding: 14px;
44 font-size: 16px; 45 font-size: 16px;
45 } 46 }
46 47
47 html /deep/ core-dropdown { 48 x-trigger {
48 background-color: #eee; 49 z-index: auto;
49 color: #000; 50 }
50 border: 1px solid #ccc; 51
51 border-radius: 3px; 52 html /deep/ paper-dropdown:not(.no-padding)::shadow #scroller {
53 box-sizing: border-box;
52 padding: 8px; 54 padding: 8px;
53 } 55 }
54 56
55 .with-margin { 57 .with-margin {
56 margin: 12px; 58 margin: 12px;
57 } 59 }
58 60
59 .open-below { 61 .open-below {
60 top: 38px; 62 top: 38px;
61 } 63 }
62 64
63 </style> 65 </style>
64 66
65 </head> 67 </head>
66 <body> 68 <body>
67 69
68 <polymer-element name="x-trigger" extends="core-icon-button" relative on-tap=" {{toggle}}"> 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>
69 <script> 75 <script>
70 Polymer({ 76 Polymer({
71 toggle: function() { 77 toggle: function() {
72 if (!this.dropdown) { 78 if (!this.dropdown) {
73 this.dropdown = this.querySelector('core-dropdown'); 79 this.dropdown = this.querySelector('paper-dropdown');
74 } 80 }
75 this.dropdown && this.dropdown.toggle(); 81 this.dropdown && this.dropdown.toggle();
76 } 82 }
77 }); 83 });
78 </script> 84 </script>
79 </polymer-element> 85 </polymer-element>
80 86
81 <template is="auto-binding"> 87 <template is="auto-binding">
82 88
83 <section> 89 <section>
84 90
85 <div>Absolutely positioned dropdowns</div> 91 <div>Absolutely positioned dropdowns</div>
86 92
87 <x-trigger icon="menu"> 93 <x-trigger icon="menu">
88 <core-dropdown> 94 <paper-dropdown>
89 halign = left 95 halign = left
90 <br> 96 <br>
91 valign = top 97 valign = top
92 </core-dropdown> 98 </paper-dropdown>
93 </x-trigger> 99 </x-trigger>
94 100
95 <x-trigger icon="menu"> 101 <x-trigger icon="menu">
96 <core-dropdown valign="bottom"> 102 <paper-dropdown valign="bottom">
97 halign = left 103 halign = left
98 <br> 104 <br>
99 valign = bottom 105 valign = bottom
100 </core-dropdown> 106 </paper-dropdown>
101 </x-trigger> 107 </x-trigger>
102 108
103 <x-trigger icon="menu"> 109 <x-trigger icon="menu">
104 <core-dropdown halign="right"> 110 <paper-dropdown halign="right">
105 halign = right 111 halign = right
106 <br> 112 <br>
107 valign = top 113 valign = top
108 </core-dropdown> 114 </paper-dropdown>
115 </x-trigger>
116
117 <x-trigger icon="menu">
118 <paper-dropdown class="no-padding">
119 <div class="menu">
120 <paper-item>Item 1</paper-item>
121 <paper-item>Item 2</paper-item>
122 <paper-item>Item 3</paper-item>
123 </div>
124 </paper-dropdown>
109 </x-trigger> 125 </x-trigger>
110 126
111 </section> 127 </section>
112 128
113 <section> 129 <section>
114 130
115 <div>Layered dropdowns</div> 131 <div>Layered dropdowns</div>
116 132
117 <button onclick="document.getElementById('collapse').toggle()">toggle core -collapse</button> 133 <button onclick="document.getElementById('collapse').toggle()">toggle core -collapse</button>
118 134
119 <br> 135 <br>
120 136
121 <core-collapse id="collapse"> 137 <core-collapse id="collapse">
122 138
123 <x-trigger icon="menu"> 139 <x-trigger icon="menu">
124 <core-dropdown layered> 140 <paper-dropdown layered>
125 halign = left 141 halign = left
126 <br> 142 <br>
127 valign = top 143 valign = top
128 </core-dropdown> 144 </paper-dropdown>
129 </x-trigger> 145 </x-trigger>
130 146
131 </core-collapse> 147 </core-collapse>
132 148
133 </section> 149 </section>
134 150
135 <section> 151 <section>
136 152
137 <div>Scrolling and margin</div> 153 <div>Scrolling and margin</div>
138 154
139 <x-trigger icon="menu"> 155 <x-trigger icon="menu">
140 <core-dropdown> 156 <paper-dropdown>
141 no margin<br> 157 no margin<br>
142 <br> 158 <br>
143 <template repeat="{{countries}}"> 159 <template repeat="{{countries}}">
144 {{name}}<br> 160 {{name}}<br>
145 </template> 161 </template>
146 </core-dropdown> 162 </paper-dropdown>
147 </x-trigger> 163 </x-trigger>
148 164
149 <x-trigger icon="menu"> 165 <x-trigger icon="menu">
150 <core-dropdown class="with-margin"> 166 <paper-dropdown class="with-margin">
151 with margin<br> 167 with margin<br>
152 <br> 168 <br>
153 <template repeat="{{countries}}"> 169 <template repeat="{{countries}}">
154 {{name}}<br> 170 {{name}}<br>
155 </template> 171 </template>
156 </core-dropdown> 172 </paper-dropdown>
157 </x-trigger> 173 </x-trigger>
158 174
159 </section> 175 </section>
160 176
161 <section> 177 <section>
162 178
163 <div>Custom position</div> 179 <div>Custom position</div>
164 180
165 <x-trigger icon="menu"> 181 <x-trigger icon="menu">
166 <core-dropdown class="open-below"> 182 <paper-dropdown class="open-below">
167 top: 38px 183 top: 38px
168 </core-dropdown> 184 </paper-dropdown>
169 </x-trigger> 185 </x-trigger>
170 186
171 </section> 187 </section>
172 188
173 </template> 189 </template>
174 190
175 <script> 191 <script>
176 192
177 scope = document.querySelector('template[is=auto-binding]'); 193 scope = document.querySelector('template[is=auto-binding]');
178 194
(...skipping 252 matching lines...) Expand 10 before | Expand all | Expand 10 after
431 'Madeleine', 447 'Madeleine',
432 'Pound cake', 448 'Pound cake',
433 'Pretzel', 449 'Pretzel',
434 'Sfogliatelle' 450 'Sfogliatelle'
435 ]; 451 ];
436 452
437 </script> 453 </script>
438 454
439 </body> 455 </body>
440 </html> 456 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698