| 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"> | |
| 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 <script> | |
| 167 | |
| 168 (function() { | |
| 169 | |
| 170 Polymer('core-layout', { | |
| 171 | |
| 172 isContainer: false, | |
| 173 /** | |
| 174 * Controls if the element lays out vertically or not. | |
| 175 * | |
| 176 * @attribute vertical | |
| 177 * @type boolean | |
| 178 * @default false | |
| 179 */ | |
| 180 vertical: false, | |
| 181 /** | |
| 182 * Controls how the items are aligned in the main-axis direction. For | |
| 183 * example for a horizontal layout, this controls how each item is aligned | |
| 184 * horizontally. | |
| 185 * | |
| 186 * @attribute justify | |
| 187 * @type string start|center|end|between | |
| 188 * @default '' | |
| 189 */ | |
| 190 justify: '', | |
| 191 /** | |
| 192 * Controls how the items are aligned in cross-axis direction. For | |
| 193 * example for a horizontal layout, this controls how each item is aligned | |
| 194 * vertically. | |
| 195 * | |
| 196 * @attribute align | |
| 197 * @type string start|center|end | |
| 198 * @default '' | |
| 199 */ | |
| 200 align: '', | |
| 201 /** | |
| 202 * Controls whether or not the items layout in reverse order. | |
| 203 * | |
| 204 * @attribute reverse | |
| 205 * @type boolean | |
| 206 * @default false | |
| 207 */ | |
| 208 reverse: false, | |
| 209 layoutPrefix: 'core-', | |
| 210 | |
| 211 // NOTE: include template so that styles are loaded, but remove | |
| 212 // so that we can decide dynamically what part to include | |
| 213 registerCallback: function(polymerElement) { | |
| 214 var template = polymerElement.querySelector('template'); | |
| 215 this.styles = template.content.querySelectorAll('style').array(); | |
| 216 this.styles.forEach(function(s) { | |
| 217 s.removeAttribute('no-shim'); | |
| 218 }) | |
| 219 }, | |
| 220 | |
| 221 fetchTemplate: function() { | |
| 222 return null; | |
| 223 }, | |
| 224 | |
| 225 attached: function() { | |
| 226 this.installScopeStyle(this.styles[0]); | |
| 227 if (this.children.length) { | |
| 228 this.isContainer = true; | |
| 229 } | |
| 230 var container = this.isContainer ? this : this.parentNode; | |
| 231 // detect if laying out a shadowRoot host. | |
| 232 var forHost = container instanceof ShadowRoot; | |
| 233 if (forHost) { | |
| 234 this.installScopeStyle(this.styles[1], 'host'); | |
| 235 container = container.host || document.body; | |
| 236 } | |
| 237 this.layoutContainer = container; | |
| 238 }, | |
| 239 | |
| 240 detached: function() { | |
| 241 this.layoutContainer = null; | |
| 242 }, | |
| 243 | |
| 244 layoutContainerChanged: function(old) { | |
| 245 this.style.display = this.layoutContainer === this ? null : 'none'; | |
| 246 this.verticalChanged(); | |
| 247 this.alignChanged(); | |
| 248 this.justifyChanged(); | |
| 249 }, | |
| 250 | |
| 251 setLayoutClass: function(prefix, old, newValue) { | |
| 252 if (this.layoutContainer) { | |
| 253 prefix = this.layoutPrefix + prefix; | |
| 254 if (old) { | |
| 255 this.layoutContainer.classList.remove(prefix + old); | |
| 256 } | |
| 257 if (newValue) { | |
| 258 this.layoutContainer.classList.add(prefix + newValue); | |
| 259 } | |
| 260 } | |
| 261 }, | |
| 262 | |
| 263 verticalChanged: function(old) { | |
| 264 old = old ? 'v' : 'h'; | |
| 265 var vertical = this.vertical ? 'v' : 'h'; | |
| 266 this.setLayoutClass('', old, vertical); | |
| 267 }, | |
| 268 | |
| 269 alignChanged: function(old) { | |
| 270 this.setLayoutClass('align-', old, this.align); | |
| 271 }, | |
| 272 | |
| 273 justifyChanged: function(old) { | |
| 274 this.setLayoutClass('justify-', old, this.justify); | |
| 275 }, | |
| 276 | |
| 277 reverseChanged: function(old) { | |
| 278 old = old ? 'reverse' : ''; | |
| 279 var newValue = this.reverse ? 'reverse' : ''; | |
| 280 this.setLayoutClass('', old, newValue); | |
| 281 } | |
| 282 | |
| 283 }); | |
| 284 | |
| 285 })(); | |
| 286 </script> | |
| 287 | |
| 288 </polymer-element> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 592603004:
Revert "Polymer elements added to third_party/polymer." (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master