Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(49)

Unified Diff: third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698