| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <!-- |
| 3 @license |
| 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 5 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 7 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 8 Code distributed by Google as part of the polymer project is also |
| 9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 10 --> |
| 11 |
| 12 <html> |
| 13 <head> |
| 14 |
| 15 <title>iron-flex-layout demo</title> |
| 16 <meta charset="utf-8"> |
| 17 <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 18 |
| 19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 20 |
| 21 <link rel="import" href="../../paper-styles/demo-pages.html"> |
| 22 <link rel="import" href="demo-snippet.html"> |
| 23 <link rel="import" href="../iron-flex-layout.html"> |
| 24 |
| 25 <style> |
| 26 .container { |
| 27 background-color: #ccc; |
| 28 padding: 5px; |
| 29 margin: 0; |
| 30 } |
| 31 .container > div { |
| 32 padding: 15px; |
| 33 margin: 5px; |
| 34 background-color: white; |
| 35 min-height: 20px; |
| 36 } |
| 37 |
| 38 demo-snippet { |
| 39 width: 100%; |
| 40 } |
| 41 |
| 42 .vertical-section { |
| 43 padding: 0 !important; |
| 44 } |
| 45 </style> |
| 46 |
| 47 </head> |
| 48 <body unresolved class="fullbleed"> |
| 49 |
| 50 <h4>Horizontal and vertical layout</h4> |
| 51 <div class="vertical-section"> |
| 52 <demo-snippet> |
| 53 <template> |
| 54 <style is="custom-style"> |
| 55 .flex { |
| 56 @apply(--layout-horizontal); |
| 57 } |
| 58 </style> |
| 59 |
| 60 <div class="container flex"> |
| 61 <div>one</div> |
| 62 <div>two</div> |
| 63 <div>three</div> |
| 64 </div> |
| 65 </template> |
| 66 </demo-snippet> |
| 67 </div> |
| 68 |
| 69 <h4>Flexible children</h4> |
| 70 <div class="vertical-section"> |
| 71 <demo-snippet> |
| 72 <template> |
| 73 <style is="custom-style"> |
| 74 .flex-horizontal { |
| 75 @apply(--layout-horizontal); |
| 76 } |
| 77 .flexchild { |
| 78 @apply(--layout-flex); |
| 79 } |
| 80 </style> |
| 81 |
| 82 <div class="container flex-horizontal"> |
| 83 <div>one</div> |
| 84 <div class="flexchild">two (flex)</div> |
| 85 <div>three</div> |
| 86 </div> |
| 87 </template> |
| 88 </demo-snippet> |
| 89 </div> |
| 90 |
| 91 <h4>Flexible children in vertical layouts</h4> |
| 92 <div class="vertical-section"> |
| 93 <demo-snippet> |
| 94 <template> |
| 95 <style is="custom-style"> |
| 96 .flex-vertical { |
| 97 @apply(--layout-vertical); |
| 98 height: 220px; |
| 99 } |
| 100 .flexchild-vertical { |
| 101 @apply(--layout-flex); |
| 102 } |
| 103 </style> |
| 104 |
| 105 <div class="container flex-vertical"> |
| 106 <div>one</div> |
| 107 <div class="flexchild-vertical">two (flex)</div> |
| 108 <div>three</div> |
| 109 </div> |
| 110 </template> |
| 111 </demo-snippet> |
| 112 </div> |
| 113 |
| 114 <h4>Flex ratios</h4> |
| 115 <div class="vertical-section"> |
| 116 <demo-snippet> |
| 117 <template> |
| 118 <style is="custom-style"> |
| 119 .flex-horizontal-with-ratios { |
| 120 @apply(--layout-horizontal); |
| 121 } |
| 122 .flexchild { |
| 123 @apply(--layout-flex); |
| 124 } |
| 125 .flex2child { |
| 126 @apply(--layout-flex-2); |
| 127 } |
| 128 .flex3child { |
| 129 @apply(--layout-flex-3); |
| 130 } |
| 131 </style> |
| 132 |
| 133 <div class="container flex-horizontal-with-ratios"> |
| 134 <div class="flex3child">one</div> |
| 135 <div class="flexchild">two</div> |
| 136 <div class="flex2child">three</div> |
| 137 </div> |
| 138 </template> |
| 139 </demo-snippet> |
| 140 </div> |
| 141 |
| 142 <h4>Cross-axis stretch alignment (default)</h4> |
| 143 <div class="vertical-section"> |
| 144 <demo-snippet> |
| 145 <template> |
| 146 <style is="custom-style"> |
| 147 .flex-stretch-align { |
| 148 @apply(--layout-horizontal); |
| 149 height: 120px; |
| 150 } |
| 151 </style> |
| 152 |
| 153 <div class="container flex-stretch-align"> |
| 154 <div>stretch</div> |
| 155 </div> |
| 156 </template> |
| 157 </demo-snippet> |
| 158 </div> |
| 159 |
| 160 <h4>Cross-axis center alignment</h4> |
| 161 <div class="vertical-section"> |
| 162 <demo-snippet> |
| 163 <template> |
| 164 <style is="custom-style"> |
| 165 .flex-center-align { |
| 166 @apply(--layout-horizontal); |
| 167 @apply(--layout-center); |
| 168 height: 120px; |
| 169 } |
| 170 </style> |
| 171 |
| 172 <div class="container flex-center-align"> |
| 173 <div>center</div> |
| 174 </div> |
| 175 </template> |
| 176 </demo-snippet> |
| 177 </div> |
| 178 |
| 179 <h4>Cross-axis start alignment</h4> |
| 180 <div class="vertical-section"> |
| 181 <demo-snippet> |
| 182 <template> |
| 183 <style is="custom-style"> |
| 184 .flex-start-align { |
| 185 @apply(--layout-horizontal); |
| 186 @apply(--layout-start); |
| 187 height: 120px; |
| 188 } |
| 189 </style> |
| 190 |
| 191 <div class="container flex-start-align"> |
| 192 <div>start</div> |
| 193 </div> |
| 194 </template> |
| 195 </demo-snippet> |
| 196 </div> |
| 197 |
| 198 <h4>Cross-axis end alignment</h4> |
| 199 <div class="vertical-section"> |
| 200 <demo-snippet> |
| 201 <template> |
| 202 <style is="custom-style"> |
| 203 .flex-end-align { |
| 204 @apply(--layout-horizontal); |
| 205 @apply(--layout-end); |
| 206 height: 120px; |
| 207 } |
| 208 </style> |
| 209 |
| 210 <div class="container flex-end-align"> |
| 211 <div>end</div> |
| 212 </div> |
| 213 </template> |
| 214 </demo-snippet> |
| 215 </div> |
| 216 |
| 217 <h4>Justification, start justified</h4> |
| 218 <div class="vertical-section"> |
| 219 <demo-snippet> |
| 220 <template> |
| 221 <style is="custom-style"> |
| 222 .flex-start-justified { |
| 223 @apply(--layout-horizontal); |
| 224 @apply(--layout-start-justified); |
| 225 } |
| 226 </style> |
| 227 |
| 228 <div class="container flex-start-justified"> |
| 229 <div>start-justified</div> |
| 230 </div> |
| 231 </template> |
| 232 </demo-snippet> |
| 233 </div> |
| 234 |
| 235 <h4>Justification, start justified</h4> |
| 236 <div class="vertical-section"> |
| 237 <demo-snippet> |
| 238 <template> |
| 239 <style is="custom-style"> |
| 240 .flex-center-justified { |
| 241 @apply(--layout-horizontal); |
| 242 @apply(--layout-center-justified); |
| 243 } |
| 244 </style> |
| 245 |
| 246 <div class="container flex-center-justified"> |
| 247 <div>center-justified</div> |
| 248 </div> |
| 249 </template> |
| 250 </demo-snippet> |
| 251 </div> |
| 252 |
| 253 <h4>Justification, end justified</h4> |
| 254 <div class="vertical-section"> |
| 255 <demo-snippet> |
| 256 <template> |
| 257 <style is="custom-style"> |
| 258 .flex-end-justified { |
| 259 @apply(--layout-horizontal); |
| 260 @apply(--layout-end-justified); |
| 261 } |
| 262 </style> |
| 263 |
| 264 <div class="container flex-end-justified"> |
| 265 <div>end-justified</div> |
| 266 </div> |
| 267 </template> |
| 268 </demo-snippet> |
| 269 </div> |
| 270 |
| 271 <h4>Justification, equal space between elements</h4> |
| 272 <div class="vertical-section"> |
| 273 <demo-snippet> |
| 274 <template> |
| 275 <style is="custom-style"> |
| 276 .flex-equal-justified { |
| 277 @apply(--layout-horizontal); |
| 278 @apply(--layout-justified); |
| 279 } |
| 280 </style> |
| 281 |
| 282 <div class="container flex-equal-justified"> |
| 283 <div>justified</div> |
| 284 <div>justified</div> |
| 285 <div>justified</div> |
| 286 </div> |
| 287 </template> |
| 288 </demo-snippet> |
| 289 </div> |
| 290 |
| 291 <h4>Justification, equal space around each element</h4> |
| 292 <div class="vertical-section"> |
| 293 <demo-snippet> |
| 294 <template> |
| 295 <style is="custom-style"> |
| 296 .flex-equal-around-justified { |
| 297 @apply(--layout-horizontal); |
| 298 @apply(--layout-around-justified); |
| 299 } |
| 300 </style> |
| 301 |
| 302 <div class="container flex-equal-around-justified"> |
| 303 <div>around-justified</div> |
| 304 <div>around-justified</div> |
| 305 </div> |
| 306 </template> |
| 307 </demo-snippet> |
| 308 </div> |
| 309 |
| 310 <h4>Self alignment</h4> |
| 311 <div class="vertical-section"> |
| 312 <demo-snippet> |
| 313 <template> |
| 314 <style is="custom-style"> |
| 315 .flex-self-align { |
| 316 @apply(--layout-horizontal); |
| 317 @apply(--layout-justified); |
| 318 height: 120px; |
| 319 } |
| 320 .flex-self-align div { |
| 321 @apply(--layout-flex); |
| 322 } |
| 323 .child1 { |
| 324 @apply(--layout-self-start); |
| 325 } |
| 326 .child2 { |
| 327 @apply(--layout-self-center); |
| 328 } |
| 329 .child3 { |
| 330 @apply(--layout-self-end); |
| 331 } |
| 332 .child4 { |
| 333 @apply(--layout-self-stretch); |
| 334 } |
| 335 </style> |
| 336 |
| 337 <div class="container flex-self-align"> |
| 338 <div class="child1">one</div> |
| 339 <div class="child2">two</div> |
| 340 <div class="child3">three</div> |
| 341 <div class="child4">four</div> |
| 342 </div> |
| 343 </template> |
| 344 </demo-snippet> |
| 345 </div> |
| 346 |
| 347 <h4>Wrapping</h4> |
| 348 <div class="vertical-section"> |
| 349 <demo-snippet> |
| 350 <template> |
| 351 <style is="custom-style"> |
| 352 .flex-wrap { |
| 353 @apply(--layout-horizontal); |
| 354 @apply(--layout-wrap); |
| 355 width: 200px; |
| 356 } |
| 357 </style> |
| 358 |
| 359 <div class="container flex-wrap"> |
| 360 <div>one</div> |
| 361 <div>two</div> |
| 362 <div>three</div> |
| 363 <div>four</div> |
| 364 </div> |
| 365 </template> |
| 366 </demo-snippet> |
| 367 </div> |
| 368 |
| 369 <h4>Reversed layouts</h4> |
| 370 <div class="vertical-section"> |
| 371 <demo-snippet> |
| 372 <template> |
| 373 <style is="custom-style"> |
| 374 .flex-reversed { |
| 375 @apply(--layout-horizontal-reverse); |
| 376 } |
| 377 </style> |
| 378 |
| 379 <div class="container flex-reversed"> |
| 380 <div>one</div> |
| 381 <div>two</div> |
| 382 <div>three</div> |
| 383 <div>four</div> |
| 384 </div> |
| 385 </template> |
| 386 </demo-snippet> |
| 387 </div> |
| 388 |
| 389 <h4>General purpose ruls</h4> |
| 390 <div class="vertical-section"> |
| 391 <demo-snippet> |
| 392 <template> |
| 393 <style is="custom-style"> |
| 394 .general { |
| 395 width: 100%; |
| 396 } |
| 397 .general > div { |
| 398 background-color: #ccc; |
| 399 padding: 4px; |
| 400 margin: 12px; |
| 401 } |
| 402 .block { |
| 403 @apply(--layout-block); |
| 404 } |
| 405 .invisible { |
| 406 @apply(--layout-invisible); |
| 407 } |
| 408 .relative { |
| 409 @apply(--layout-relative); |
| 410 } |
| 411 .fit { |
| 412 @apply(--layout-fit); |
| 413 } |
| 414 </style> |
| 415 |
| 416 <div class="general"> |
| 417 <div>Before <span>[A Span]</span> After</div> |
| 418 <div>Before <span class="block">[A Block Span]</span> After</div> |
| 419 <div>Before invisible span <span class="invisible">Not displayed</span
> After invisible span</div> |
| 420 <div class="relative" style="height: 100px;"> |
| 421 <div class="fit" style="background-color: #000;color: white">Fit</di
v> |
| 422 </div> |
| 423 </div> |
| 424 </template> |
| 425 </demo-snippet> |
| 426 </div> |
| 427 </body> |
| 428 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1581713003:
[third_party] add polymer 1.2.3 (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master