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

Unified Diff: third_party/polymer/components-chromium/core-layout/core-layout.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/core-layout.html
diff --git a/third_party/polymer/components-chromium/core-layout/core-layout.html b/third_party/polymer/components-chromium/core-layout/core-layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..d9c56f77adf58f8b2105f3b1596dd4450798e870
--- /dev/null
+++ b/third_party/polymer/components-chromium/core-layout/core-layout.html
@@ -0,0 +1,169 @@
+<!--
+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
+-->
+
+<!--
+The `core-layout` element is a helper for using
+[CSS3 Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes).
+A `core-layout` element enables a set of css selectors for easy flexbox styling.
+
+Example:
+
+ <core-layout>
+ <div>Left</div>
+ <div core-flex>Main</div>
+ <div>Right</div>
+ </core-layout>
+
+ Renders something like this:
+
+ ---------------------------------
+ |-------------------------------|
+ ||Left| Main |Right||
+ |-------------------------------|
+ ---------------------------------
+
+__Note__: the `core-layout` element applies layout to itself if it has children or to
+its parent element, if it does not. This feature allows you to apply layout to an
+arbitrary parent.
+
+Elements can layout horizontally, such that their items stack
+left to right or vertically, such that their items stack top to bottom. The
+default is horizontal. Set `vertical` to true to layout the elements vertically.
+
+To make a particular child _flexible_, use the `core-flex` attribute.
+You can control flexibility from 1 to 3 by giving the attribute a
+corresponding value. For other values, apply the css manually.
+
+It's common in flexbox parlance to hear the terms _main axis_ and _cross axis_.
+For a horizontal layout the main axis is horizontal and the cross axis is vertical.
+These are exchanged for a vertical layout.
+
+To effect alignment in the main axis, use the `justify` attribute. The
+supported values are `start`, `center`, `end`, and `between`.
+
+To effect alignment in the cross axis, use the `align` attribute. The
+supported values are `start`, `center`, and `end`.
+
+Note, it's also possible to include the `core-layout.css` stylesheet separate
+from the `core-layout` element. Including the element automatically includes
+the stylesheet. To use the stylesheet independent of the element, css classes
+should be used of the following form: `core-h`, `core-v`, `core-flex`,
+`core-justify-start`, and `core-align-start`.
+
+The `core-layout` and css file also provide a few commonly needed layout
+behaviors. Apply the `core-fit` class to fit an element to its container. To
+ensure a container will contain an element inside it with the `core-fit` class
+give it the `core-relative` class.
+
+More examples:
+
+ <core-layout vertical>
+
+ <div>Header</div>
+ <div core-flex>Body</div>
+ <div>Footer</div>
+
+ </core-layout>
+
+ ----------
+ ||------||
+ ||Header||
+ ||------||
+ ||Body ||
+ || ||
+ || ||
+ || ||
+ || ||
+ || ||
+ || ||
+ ||------||
+ ||Footer||
+ ||------||
+ ----------
+
+Justify:
+
+ <core-layout justify="end">
+ <div core-flex>Left</div>
+ <div>Main</div>
+ <div>Right</div>
+ </core-layout>
+
+ ---------------------------------
+ |-------------------------------|
+ || Left|Main|Right||
+ |-------------------------------|
+ ---------------------------------
+
+Align:
+
+ <core-layout align="center">
+ <div>Left</div>
+ <div core-flex>Main</div>
+ <div>Right</div>
+ </core-layout>
+
+ ---------------------------------
+ |-------------------------------|
+ || | | ||
+ ||Left| Main |Right||
+ || | | ||
+ |-------------------------------|
+ ---------------------------------
+
+
+To layout contents of a parent element, place a `core-layout` inside of it:
+
+ <some-element>
+ <core-layout></core-layout>
+ <div>Left</div>
+ <div core-flex>Main</div>
+ <div>Right</div>
+ </some-element>
+
+ ---------------------------------
+ |-------------------------------|
+ ||Left| Main |Right||
+ |-------------------------------|
+ ---------------------------------
+
+You may also use the `core-layout` stylesheet directly:
+
+ <link rel="stylesheet" href="../core-layout/core-layout.css">
+ <div class="core-h core-justify-end">
+ <div core-flex>Left</div>
+ <div>Main</div>
+ <div>Right</div>
+ </div>
+
+ ---------------------------------
+ |-------------------------------|
+ || Left|Main|Right||
+ |-------------------------------|
+ ---------------------------------
+
+@group Polymer Core Elements
+@element core-layout
+
+-->
+<link rel="import" href="../polymer/polymer.html">
+
+<polymer-element name="core-layout" attributes="vertical justify align isContainer reverse" assetpath="">
+
+ <template>
+
+ <link no-shim="" rel="stylesheet" href="core-layout.css">
+ <link no-shim="" rel="stylesheet" href="core-layout-host.css">
+
+ </template>
+
+
+
+</polymer-element>
+<script src="core-layout-extracted.js"></script>

Powered by Google App Engine
This is Rietveld 408576698