diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-flex-layout/demo/index.html')
-rw-r--r-- | catapult/third_party/polymer/components/iron-flex-layout/demo/index.html | 396 |
1 files changed, 396 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-flex-layout/demo/index.html b/catapult/third_party/polymer/components/iron-flex-layout/demo/index.html new file mode 100644 index 00000000..4bc2d410 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/demo/index.html @@ -0,0 +1,396 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<html> +<head> + + <title>iron-flex-layout demo</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../../paper-styles/demo-pages.html"> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + <link rel="import" href="../iron-flex-layout.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + demo-snippet { + --demo-snippet-demo: { + padding: 0; + } + } + .container { + background-color: #ccc; + padding: 5px; + margin: 0; + } + .container > div { + padding: 15px; + margin: 5px; + background-color: white; + min-height: 20px; + } + + .vertical-section-container { + max-width: 700px + } + </style> + +</head> +<body unresolved class="fullbleed"> + <div class="vertical-section-container centered"> + <h4>Horizontal and vertical layout</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex { + @apply(--layout-horizontal); + } + </style> + <div class="container flex"> + <div>one</div> + <div>two</div> + <div>three</div> + </div> + </template> + </demo-snippet> + + <h4>Flexible children</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-horizontal { + @apply(--layout-horizontal); + } + .flexchild { + @apply(--layout-flex); + } + </style> + + <div class="container flex-horizontal"> + <div>one</div> + <div class="flexchild">two (flex)</div> + <div>three</div> + </div> + </template> + </demo-snippet> + + <h4>Flexible children in vertical layouts</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-vertical { + @apply(--layout-vertical); + height: 220px; + } + .flexchild-vertical { + @apply(--layout-flex); + } + </style> + + <div class="container flex-vertical"> + <div>one</div> + <div class="flexchild-vertical">two (flex)</div> + <div>three</div> + </div> + </template> + </demo-snippet> + + <h4>Flex ratios</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-horizontal-with-ratios { + @apply(--layout-horizontal); + } + .flexchild { + @apply(--layout-flex); + } + .flex2child { + @apply(--layout-flex-2); + } + .flex3child { + @apply(--layout-flex-3); + } + </style> + + <div class="container flex-horizontal-with-ratios"> + <div class="flex3child">one</div> + <div class="flexchild">two</div> + <div class="flex2child">three</div> + </div> + </template> + </demo-snippet> + + <h4>Cross-axis stretch alignment (default)</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-stretch-align { + @apply(--layout-horizontal); + height: 120px; + } + </style> + + <div class="container flex-stretch-align"> + <div>stretch</div> + </div> + </template> + </demo-snippet> + + <h4>Cross-axis center alignment</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-center-align { + @apply(--layout-horizontal); + @apply(--layout-center); + height: 120px; + } + </style> + + <div class="container flex-center-align"> + <div>center</div> + </div> + </template> + </demo-snippet> + + <h4>Cross-axis start alignment</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-start-align { + @apply(--layout-horizontal); + @apply(--layout-start); + height: 120px; + } + </style> + + <div class="container flex-start-align"> + <div>start</div> + </div> + </template> + </demo-snippet> + + <h4>Cross-axis end alignment</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-end-align { + @apply(--layout-horizontal); + @apply(--layout-end); + height: 120px; + } + </style> + + <div class="container flex-end-align"> + <div>end</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, start justified</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-start-justified { + @apply(--layout-horizontal); + @apply(--layout-start-justified); + } + </style> + + <div class="container flex-start-justified"> + <div>start-justified</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, center justified</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-center-justified { + @apply(--layout-horizontal); + @apply(--layout-center-justified); + } + </style> + + <div class="container flex-center-justified"> + <div>center-justified</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, end justified</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-end-justified { + @apply(--layout-horizontal); + @apply(--layout-end-justified); + } + </style> + + <div class="container flex-end-justified"> + <div>end-justified</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, equal space between elements</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-equal-justified { + @apply(--layout-horizontal); + @apply(--layout-justified); + } + </style> + + <div class="container flex-equal-justified"> + <div>justified</div> + <div>justified</div> + <div>justified</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, equal space around each element</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-equal-around-justified { + @apply(--layout-horizontal); + @apply(--layout-around-justified); + } + </style> + + <div class="container flex-equal-around-justified"> + <div>around-justified</div> + <div>around-justified</div> + </div> + </template> + </demo-snippet> + + <h4>Self alignment</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-self-align { + @apply(--layout-horizontal); + @apply(--layout-justified); + height: 120px; + } + .flex-self-align div { + @apply(--layout-flex); + } + .child1 { + @apply(--layout-self-start); + } + .child2 { + @apply(--layout-self-center); + } + .child3 { + @apply(--layout-self-end); + } + .child4 { + @apply(--layout-self-stretch); + } + </style> + + <div class="container flex-self-align"> + <div class="child1">one</div> + <div class="child2">two</div> + <div class="child3">three</div> + <div class="child4">four</div> + </div> + </template> + </demo-snippet> + + <h4>Wrapping</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-wrap { + @apply(--layout-horizontal); + @apply(--layout-wrap); + width: 200px; + } + </style> + + <div class="container flex-wrap"> + <div>one</div> + <div>two</div> + <div>three</div> + <div>four</div> + </div> + </template> + </demo-snippet> + + <h4>Reversed layouts</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-reversed { + @apply(--layout-horizontal-reverse); + } + </style> + + <div class="container flex-reversed"> + <div>one</div> + <div>two</div> + <div>three</div> + <div>four</div> + </div> + </template> + </demo-snippet> + + <h4>General purpose rules</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .general { + width: 100%; + } + .general > div { + background-color: #ccc; + padding: 4px; + margin: 12px; + } + .block { + @apply(--layout-block); + } + .invisible { + @apply(--layout-invisible); + } + .relative { + @apply(--layout-relative); + } + .fit { + @apply(--layout-fit); + } + </style> + + <div class="general"> + <div>Before <span>[A Span]</span> After</div> + <div>Before <span class="block">[A Block Span]</span> After</div> + <div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div> + <div class="relative" style="height: 100px;"> + <div class="fit" style="background-color: #000;color: white">Fit</div> + </div> + </div> + </template> + </demo-snippet> + </div> +</body> +</html> |