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