third_party/polymer/components-chromium/core-layout/core-layout.html

   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.github.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/CONTRIBUTORS.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/PATENTS.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/Flexible_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 an
  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 vertical.
  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 isContainer 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>