| Index: third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl.html
|
| diff --git a/third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl.html b/third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..eed198bdc60efaa2d6858f1e5986bf19c1e01ea4
|
| --- /dev/null
|
| +++ b/third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl.html
|
| @@ -0,0 +1,141 @@
|
| +<!--
|
| +Copyright (c) 2014 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
|
| +-->
|
| +
|
| +<!--
|
| +`<core-layout-trbl>` arranges nodes horizontally via absolute positioning.
|
| +Set the `vertical` attribute (boolean) to arrange vertically instead.
|
| +
|
| +`<core-layout-trbl>` arranges it's <b>sibling elements</b>, not
|
| +it's children.
|
| +
|
| +One arranged node may be marked as elastic by giving it a `flex`
|
| +attribute (boolean).
|
| +
|
| +You may remove a node from layout by giving it a `nolayout`
|
| +attribute (boolean).
|
| +
|
| +CSS Notes:
|
| +
|
| +`padding` is ignored on the parent node.
|
| +`margin` is ignored on arranged nodes.
|
| +`min-width` is ignored on arranged nodes, use `min-width` on the parent node
|
| +instead.
|
| +
|
| +Example:
|
| +
|
| +Arrange three `div` into columns. `flex` attribute on Column Two makes that
|
| +column elastic.
|
| +
|
| + <core-layout-trbl></core-layout-trbl>
|
| + <div>Column One</div>
|
| + <div flex>Column Two</div>
|
| + <div>Column Three</div>
|
| +
|
| +Remember that `<core-layout-trbl>` arranges it's sibling elements, not it's children.
|
| +
|
| +If body has width 52 device pixels (in this case, ascii characters), call that 52px.
|
| +Column One has it's natural width of 12px (including border), Column Three has it's
|
| +natural width of 14px, body border uses 2px, and Column Two automatically uses the
|
| +remaining space: 24px.
|
| +
|
| + |- 52px -|
|
| + ----------------------------------------------------
|
| + ||Column One|| Column Two ||Column Three||
|
| + ----------------------------------------------------
|
| + |- 12px -||- (24px) -|| 14px -|
|
| +
|
| +As the parent node resizes, the elastic column reacts via CSS to adjust it's size.
|
| +No javascript is used during parent resizing, for best performance.
|
| +
|
| +Changes in content or sibling size are not handled automatically.
|
| +
|
| + ----------------------------------------------------------------
|
| + ||Column One| Column Two |Column Three||
|
| + ----------------------------------------------------------------
|
| +
|
| + --------------------------------------
|
| + ||Column One|Column Two|Column Three||
|
| + --------------------------------------
|
| +
|
| +Arrange in rows by adding the `vertical` attribute.
|
| +
|
| +Example:
|
| +
|
| + <core-layout-trbl vertical></core-layout-trbl>
|
| + <div>Row One</div>
|
| + <div flex>Row Two</div>
|
| + <div>Row Three</div>
|
| +
|
| +This setup will cause Row Two to stretch to fill the container.
|
| +
|
| + ----------- -----------
|
| + |---------| |---------|
|
| + | | | |
|
| + |Row One | |Row One |
|
| + | | | |
|
| + |---------| |---------|
|
| + | | | |
|
| + |Row Two | |Row Two |
|
| + | | | |
|
| + |---------| | |
|
| + | | | |
|
| + |Row Three| | |
|
| + | | |---------|
|
| + |---------| | |
|
| + ----------- |Row Three|
|
| + | |
|
| + |---------|
|
| + |---------|
|
| +
|
| +Layouts can be nested arbitrarily.
|
| +
|
| + <core-layout-trbl></core-layout-trbl>
|
| + <div>Menu</div>
|
| + <div flex>
|
| + <core-layout-trbl vertical></core-layout-trbl>
|
| + <div>Title</div>
|
| + <div>Toolbar</div>
|
| + <div flex>Main</div>
|
| + <div>Footer</div>
|
| + </div>
|
| +
|
| +Renders something like this
|
| +
|
| + --------------------------------
|
| + ||Menu ||Title ||
|
| + || ||-----------------||
|
| + || ||Toolbar ||
|
| + || ||-----------------||
|
| + || ||Main ||
|
| + || || ||
|
| + || ||-----------------||
|
| + || ||Footer ||
|
| + --------------------------------
|
| +
|
| +@group Polymer Core Elements
|
| +@element core-layout-trbl
|
| +-->
|
| +<link rel="import" href="../polymer/polymer.html">
|
| +
|
| +<polymer-element name="core-layout-trbl" attributes="vertical" assetpath="">
|
| +
|
| + <template>
|
| +
|
| + <style>
|
| + :host {
|
| + display: none;
|
| + }
|
| + </style>
|
| +
|
| + </template>
|
| +
|
| +
|
| +
|
| +</polymer-element>
|
| +<script src="core-layout-trbl-extracted.js"></script>
|
|
|