| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> |
| 9 |
| 10 <!-- |
| 11 The `core-layout` element is a helper for using |
| 12 [CSS3 Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Fle
xible_boxes). |
| 13 A `core-layout` element enables a set of css selectors for easy flexbox styling. |
| 14 |
| 15 Example: |
| 16 |
| 17 <core-layout> |
| 18 <div>Left</div> |
| 19 <div core-flex>Main</div> |
| 20 <div>Right</div> |
| 21 </core-layout> |
| 22 |
| 23 Renders something like this: |
| 24 |
| 25 --------------------------------- |
| 26 |-------------------------------| |
| 27 ||Left| Main |Right|| |
| 28 |-------------------------------| |
| 29 --------------------------------- |
| 30 |
| 31 __Note__: the `core-layout` element applies layout to itself if it has children
or to |
| 32 its parent element, if it does not. This feature allows you to apply layout to a
n |
| 33 arbitrary parent. |
| 34 |
| 35 Elements can layout horizontally, such that their items stack |
| 36 left to right or vertically, such that their items stack top to bottom. The |
| 37 default is horizontal. Set `vertical` to true to layout the elements vertically. |
| 38 |
| 39 To make a particular child _flexible_, use the `core-flex` attribute. |
| 40 You can control flexibility from 1 to 3 by giving the attribute a |
| 41 corresponding value. For other values, apply the css manually. |
| 42 |
| 43 It's common in flexbox parlance to hear the terms _main axis_ and _cross axis_. |
| 44 For a horizontal layout the main axis is horizontal and the cross axis is vertic
al. |
| 45 These are exchanged for a vertical layout. |
| 46 |
| 47 To effect alignment in the main axis, use the `justify` attribute. The |
| 48 supported values are `start`, `center`, `end`, and `between`. |
| 49 |
| 50 To effect alignment in the cross axis, use the `align` attribute. The |
| 51 supported values are `start`, `center`, and `end`. |
| 52 |
| 53 Note, it's also possible to include the `core-layout.css` stylesheet separate |
| 54 from the `core-layout` element. Including the element automatically includes |
| 55 the stylesheet. To use the stylesheet independent of the element, css classes |
| 56 should be used of the following form: `core-h`, `core-v`, `core-flex`, |
| 57 `core-justify-start`, and `core-align-start`. |
| 58 |
| 59 The `core-layout` and css file also provide a few commonly needed layout |
| 60 behaviors. Apply the `core-fit` class to fit an element to its container. To |
| 61 ensure a container will contain an element inside it with the `core-fit` class |
| 62 give it the `core-relative` class. |
| 63 |
| 64 More examples: |
| 65 |
| 66 <core-layout vertical> |
| 67 |
| 68 <div>Header</div> |
| 69 <div core-flex>Body</div> |
| 70 <div>Footer</div> |
| 71 |
| 72 </core-layout> |
| 73 |
| 74 ---------- |
| 75 ||------|| |
| 76 ||Header|| |
| 77 ||------|| |
| 78 ||Body || |
| 79 || || |
| 80 || || |
| 81 || || |
| 82 || || |
| 83 || || |
| 84 || || |
| 85 ||------|| |
| 86 ||Footer|| |
| 87 ||------|| |
| 88 ---------- |
| 89 |
| 90 Justify: |
| 91 |
| 92 <core-layout justify="end"> |
| 93 <div core-flex>Left</div> |
| 94 <div>Main</div> |
| 95 <div>Right</div> |
| 96 </core-layout> |
| 97 |
| 98 --------------------------------- |
| 99 |-------------------------------| |
| 100 || Left|Main|Right|| |
| 101 |-------------------------------| |
| 102 --------------------------------- |
| 103 |
| 104 Align: |
| 105 |
| 106 <core-layout align="center"> |
| 107 <div>Left</div> |
| 108 <div core-flex>Main</div> |
| 109 <div>Right</div> |
| 110 </core-layout> |
| 111 |
| 112 --------------------------------- |
| 113 |-------------------------------| |
| 114 || | | || |
| 115 ||Left| Main |Right|| |
| 116 || | | || |
| 117 |-------------------------------| |
| 118 --------------------------------- |
| 119 |
| 120 |
| 121 To layout contents of a parent element, place a `core-layout` inside of it: |
| 122 |
| 123 <some-element> |
| 124 <core-layout></core-layout> |
| 125 <div>Left</div> |
| 126 <div core-flex>Main</div> |
| 127 <div>Right</div> |
| 128 </some-element> |
| 129 |
| 130 --------------------------------- |
| 131 |-------------------------------| |
| 132 ||Left| Main |Right|| |
| 133 |-------------------------------| |
| 134 --------------------------------- |
| 135 |
| 136 You may also use the `core-layout` stylesheet directly: |
| 137 |
| 138 <link rel="stylesheet" href="../core-layout/core-layout.css"> |
| 139 <div class="core-h core-justify-end"> |
| 140 <div core-flex>Left</div> |
| 141 <div>Main</div> |
| 142 <div>Right</div> |
| 143 </div> |
| 144 |
| 145 --------------------------------- |
| 146 |-------------------------------| |
| 147 || Left|Main|Right|| |
| 148 |-------------------------------| |
| 149 --------------------------------- |
| 150 |
| 151 @group Polymer Core Elements |
| 152 @element core-layout |
| 153 |
| 154 --> |
| 155 <link rel="import" href="../polymer/polymer.html"> |
| 156 |
| 157 <polymer-element name="core-layout" attributes="vertical justify align isContain
er reverse" assetpath=""> |
| 158 |
| 159 <template> |
| 160 |
| 161 <link no-shim="" rel="stylesheet" href="core-layout.css"> |
| 162 <link no-shim="" rel="stylesheet" href="core-layout-host.css"> |
| 163 |
| 164 </template> |
| 165 |
| 166 |
| 167 |
| 168 </polymer-element> |
| 169 <script src="core-layout-extracted.js"></script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 592593002:
Inline scripts were extracted from Polymer elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master