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

Side by Side 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, 2 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 unified diff | Download patch
OLDNEW
(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 `<core-layout-trbl>` arranges nodes horizontally via absolute positioning.
12 Set the `vertical` attribute (boolean) to arrange vertically instead.
13
14 `<core-layout-trbl>` arranges it's <b>sibling elements</b>, not
15 it's children.
16
17 One arranged node may be marked as elastic by giving it a `flex`
18 attribute (boolean).
19
20 You may remove a node from layout by giving it a `nolayout`
21 attribute (boolean).
22
23 CSS Notes:
24
25 `padding` is ignored on the parent node.
26 `margin` is ignored on arranged nodes.
27 `min-width` is ignored on arranged nodes, use `min-width` on the parent node
28 instead.
29
30 Example:
31
32 Arrange three `div` into columns. `flex` attribute on Column Two makes that
33 column elastic.
34
35 <core-layout-trbl></core-layout-trbl>
36 <div>Column One</div>
37 <div flex>Column Two</div>
38 <div>Column Three</div>
39
40 Remember that `<core-layout-trbl>` arranges it's sibling elements, not it's chil dren.
41
42 If body has width 52 device pixels (in this case, ascii characters), call that 5 2px.
43 Column One has it's natural width of 12px (including border), Column Three has i t's
44 natural width of 14px, body border uses 2px, and Column Two automatically uses t he
45 remaining space: 24px.
46
47 |- 52px -|
48 ----------------------------------------------------
49 ||Column One|| Column Two ||Column Three||
50 ----------------------------------------------------
51 |- 12px -||- (24px) -|| 14px -|
52
53 As the parent node resizes, the elastic column reacts via CSS to adjust it's siz e.
54 No javascript is used during parent resizing, for best performance.
55
56 Changes in content or sibling size are not handled automatically.
57
58 ----------------------------------------------------------------
59 ||Column One| Column Two |Column Three||
60 ----------------------------------------------------------------
61
62 --------------------------------------
63 ||Column One|Column Two|Column Three||
64 --------------------------------------
65
66 Arrange in rows by adding the `vertical` attribute.
67
68 Example:
69
70 <core-layout-trbl vertical></core-layout-trbl>
71 <div>Row One</div>
72 <div flex>Row Two</div>
73 <div>Row Three</div>
74
75 This setup will cause Row Two to stretch to fill the container.
76
77 ----------- -----------
78 |---------| |---------|
79 | | | |
80 |Row One | |Row One |
81 | | | |
82 |---------| |---------|
83 | | | |
84 |Row Two | |Row Two |
85 | | | |
86 |---------| | |
87 | | | |
88 |Row Three| | |
89 | | |---------|
90 |---------| | |
91 ----------- |Row Three|
92 | |
93 |---------|
94 |---------|
95
96 Layouts can be nested arbitrarily.
97
98 <core-layout-trbl></core-layout-trbl>
99 <div>Menu</div>
100 <div flex>
101 <core-layout-trbl vertical></core-layout-trbl>
102 <div>Title</div>
103 <div>Toolbar</div>
104 <div flex>Main</div>
105 <div>Footer</div>
106 </div>
107
108 Renders something like this
109
110 --------------------------------
111 ||Menu ||Title ||
112 || ||-----------------||
113 || ||Toolbar ||
114 || ||-----------------||
115 || ||Main ||
116 || || ||
117 || ||-----------------||
118 || ||Footer ||
119 --------------------------------
120
121 @group Polymer Core Elements
122 @element core-layout-trbl
123 -->
124 <link rel="import" href="../polymer/polymer.html">
125
126 <polymer-element name="core-layout-trbl" attributes="vertical" assetpath="">
127
128 <template>
129
130 <style>
131 :host {
132 display: none;
133 }
134 </style>
135
136 </template>
137
138
139
140 </polymer-element>
141 <script src="core-layout-trbl-extracted.js"></script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698