OLD | NEW |
| (Empty) |
1 <!DOCTYPE html><!-- | |
2 Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | |
3 for details. All rights reserved. Use of this source code is governed by a | |
4 BSD-style license that can be found in the LICENSE file. | |
5 --><html lang="en"><head><script src="packages/web_components/platform.js"></scr
ipt> | |
6 <script src="packages/web_components/dart_support.js"></script> | |
7 | |
8 <meta charset="utf-8"> | |
9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
10 | |
11 | |
12 | |
13 <title>Searchable list</title> | |
14 </head> | |
15 <body> | |
16 | |
17 | |
18 | |
19 | |
20 <!-- unminfied for debugging: | |
21 <link rel="import" href="src/js/polymer/layout.html"> | |
22 <script src="src/js/polymer/polymer.concat.js"></script> | |
23 --> | |
24 | |
25 | |
26 | |
27 <style shim-shadowdom=""> | |
28 /******************************* | |
29 Flex Layout | |
30 *******************************/ | |
31 | |
32 html /deep/ [layout][horizontal], html /deep/ [layout][vertical] { | |
33 display: -ms-flexbox; | |
34 display: -webkit-flex; | |
35 display: flex; | |
36 } | |
37 | |
38 html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline]
{ | |
39 display: -ms-inline-flexbox; | |
40 display: -webkit-inline-flex; | |
41 display: inline-flex; | |
42 } | |
43 | |
44 html /deep/ [layout][horizontal] { | |
45 -ms-flex-direction: row; | |
46 -webkit-flex-direction: row; | |
47 flex-direction: row; | |
48 } | |
49 | |
50 html /deep/ [layout][horizontal][reverse] { | |
51 -ms-flex-direction: row-reverse; | |
52 -webkit-flex-direction: row-reverse; | |
53 flex-direction: row-reverse; | |
54 } | |
55 | |
56 html /deep/ [layout][vertical] { | |
57 -ms-flex-direction: column; | |
58 -webkit-flex-direction: column; | |
59 flex-direction: column; | |
60 } | |
61 | |
62 html /deep/ [layout][vertical][reverse] { | |
63 -ms-flex-direction: column-reverse; | |
64 -webkit-flex-direction: column-reverse; | |
65 flex-direction: column-reverse; | |
66 } | |
67 | |
68 html /deep/ [layout][wrap] { | |
69 -ms-flex-wrap: wrap; | |
70 -webkit-flex-wrap: wrap; | |
71 flex-wrap: wrap; | |
72 } | |
73 | |
74 html /deep/ [layout][wrap-reverse] { | |
75 -ms-flex-wrap: wrap-reverse; | |
76 -webkit-flex-wrap: wrap-reverse; | |
77 flex-wrap: wrap-reverse; | |
78 } | |
79 | |
80 html /deep/ [flex] { | |
81 -ms-flex: 1; | |
82 -webkit-flex: 1; | |
83 flex: 1; | |
84 } | |
85 | |
86 html /deep/ [flex][auto] { | |
87 -ms-flex: 1 1 auto; | |
88 -webkit-flex: 1 1 auto; | |
89 flex: 1 1 auto; | |
90 } | |
91 | |
92 html /deep/ [flex][none] { | |
93 -ms-flex: none; | |
94 -webkit-flex: none; | |
95 flex: none; | |
96 } | |
97 | |
98 html /deep/ [flex][one] { | |
99 -ms-flex: 1; | |
100 -webkit-flex: 1; | |
101 flex: 1; | |
102 } | |
103 | |
104 html /deep/ [flex][two] { | |
105 -ms-flex: 2; | |
106 -webkit-flex: 2; | |
107 flex: 2; | |
108 } | |
109 | |
110 html /deep/ [flex][three] { | |
111 -ms-flex: 3; | |
112 -webkit-flex: 3; | |
113 flex: 3; | |
114 } | |
115 | |
116 html /deep/ [flex][four] { | |
117 -ms-flex: 4; | |
118 -webkit-flex: 4; | |
119 flex: 4; | |
120 } | |
121 | |
122 html /deep/ [flex][five] { | |
123 -ms-flex: 5; | |
124 -webkit-flex: 5; | |
125 flex: 5; | |
126 } | |
127 | |
128 html /deep/ [flex][six] { | |
129 -ms-flex: 6; | |
130 -webkit-flex: 6; | |
131 flex: 6; | |
132 } | |
133 | |
134 html /deep/ [flex][seven] { | |
135 -ms-flex: 7; | |
136 -webkit-flex: 7; | |
137 flex: 7; | |
138 } | |
139 | |
140 html /deep/ [flex][eight] { | |
141 -ms-flex: 8; | |
142 -webkit-flex: 8; | |
143 flex: 8; | |
144 } | |
145 | |
146 html /deep/ [flex][nine] { | |
147 -ms-flex: 9; | |
148 -webkit-flex: 9; | |
149 flex: 9; | |
150 } | |
151 | |
152 html /deep/ [flex][ten] { | |
153 -ms-flex: 10; | |
154 -webkit-flex: 10; | |
155 flex: 10; | |
156 } | |
157 | |
158 html /deep/ [flex][eleven] { | |
159 -ms-flex: 11; | |
160 -webkit-flex: 11; | |
161 flex: 11; | |
162 } | |
163 | |
164 html /deep/ [flex][twelve] { | |
165 -ms-flex: 12; | |
166 -webkit-flex: 12; | |
167 flex: 12; | |
168 } | |
169 | |
170 /* alignment in cross axis */ | |
171 | |
172 html /deep/ [layout][start] { | |
173 -ms-flex-align: start; | |
174 -webkit-align-items: flex-start; | |
175 align-items: flex-start; | |
176 } | |
177 | |
178 html /deep/ [layout][center], html /deep/ [layout][center-center] { | |
179 -ms-flex-align: center; | |
180 -webkit-align-items: center; | |
181 align-items: center; | |
182 } | |
183 | |
184 html /deep/ [layout][end] { | |
185 -ms-flex-align: end; | |
186 -webkit-align-items: flex-end; | |
187 align-items: flex-end; | |
188 } | |
189 | |
190 /* alignment in main axis */ | |
191 | |
192 html /deep/ [layout][start-justified] { | |
193 -ms-flex-pack: start; | |
194 -webkit-justify-content: flex-start; | |
195 justify-content: flex-start; | |
196 } | |
197 | |
198 html /deep/ [layout][center-justified], html /deep/ [layout][center-center] { | |
199 -ms-flex-pack: center; | |
200 -webkit-justify-content: center; | |
201 justify-content: center; | |
202 } | |
203 | |
204 html /deep/ [layout][end-justified] { | |
205 -ms-flex-pack: end; | |
206 -webkit-justify-content: flex-end; | |
207 justify-content: flex-end; | |
208 } | |
209 | |
210 html /deep/ [layout][around-justified] { | |
211 -ms-flex-pack: around; | |
212 -webkit-justify-content: space-around; | |
213 justify-content: space-around; | |
214 } | |
215 | |
216 html /deep/ [layout][justified] { | |
217 -ms-flex-pack: justify; | |
218 -webkit-justify-content: space-between; | |
219 justify-content: space-between; | |
220 } | |
221 | |
222 /* self alignment */ | |
223 | |
224 html /deep/ [self-start] { | |
225 -ms-align-self: flex-start; | |
226 -webkit-align-self: flex-start; | |
227 align-self: flex-start; | |
228 } | |
229 | |
230 html /deep/ [self-center] { | |
231 -ms-align-self: center; | |
232 -webkit-align-self: center; | |
233 align-self: center; | |
234 } | |
235 | |
236 html /deep/ [self-end] { | |
237 -ms-align-self: flex-end; | |
238 -webkit-align-self: flex-end; | |
239 align-self: flex-end; | |
240 } | |
241 | |
242 html /deep/ [self-stretch] { | |
243 -ms-align-self: stretch; | |
244 -webkit-align-self: stretch; | |
245 align-self: stretch; | |
246 } | |
247 | |
248 /******************************* | |
249 Other Layout | |
250 *******************************/ | |
251 | |
252 html /deep/ [block] { | |
253 display: block; | |
254 } | |
255 | |
256 /* ie support for hidden */ | |
257 html /deep/ [hidden] { | |
258 display: none !important; | |
259 } | |
260 | |
261 html /deep/ [relative] { | |
262 position: relative; | |
263 } | |
264 | |
265 html /deep/ [fit] { | |
266 position: absolute; | |
267 top: 0; | |
268 right: 0; | |
269 bottom: 0; | |
270 left: 0; | |
271 } | |
272 | |
273 body[fullbleed] { | |
274 margin: 0; | |
275 height: 100vh; | |
276 } | |
277 | |
278 /******************************* | |
279 Other | |
280 *******************************/ | |
281 | |
282 html /deep/ [segment], html /deep/ segment { | |
283 display: block; | |
284 position: relative; | |
285 -webkit-box-sizing: border-box; | |
286 -ms-box-sizing: border-box; | |
287 box-sizing: border-box; | |
288 margin: 1em 0.5em; | |
289 padding: 1em; | |
290 background-color: white; | |
291 -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
292 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
293 border-radius: 5px 5px 5px 5px; | |
294 } | |
295 | |
296 </style><script src="packages/polymer/src/js/polymer/polymer.js"></script><scrip
t> | |
297 // TODO(sigmund): remove this script tag (dartbug.com/19650). This empty | |
298 // script tag is necessary to work around a bug in Chrome 36. | |
299 </script><polymer-element name="searchable-list"> | |
300 <template> | |
301 <div class="container"> | |
302 <input class="form-control" type="text" value="{{searchParam}}"> | |
303 <template if="{{results.length > 0}}"> | |
304 <ul class="list-unstyled"> | |
305 <template repeat="{{result in results}}"> | |
306 <li>{{result}}</li> | |
307 </template> | |
308 </ul> | |
309 </template> | |
310 </div> | |
311 </template> | |
312 | |
313 | |
314 </polymer-element> | |
315 <polymer-element name="demo-app"> | |
316 <template> | |
317 <style> | |
318 * { | |
319 margin: 10px; | |
320 } | |
321 </style> | |
322 <searchable-list data="{{fruits}}"></searchable-list> | |
323 </template> | |
324 | |
325 </polymer-element> | |
326 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.cs
s" rel="stylesheet"> | |
327 <demo-app></demo-app> | |
328 | |
329 | |
330 <script src="index.html_bootstrap.dart.js" async=""></script></body></html> | |
OLD | NEW |