Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit ddb9007

Browse files
author
Scott J. Miles
committed
more doc work on polymer-layout
1 parent cb0da62 commit ddb9007

1 file changed

Lines changed: 81 additions & 73 deletions

File tree

‎polymer-layout/polymer-layout.html‎

Lines changed: 81 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -11,104 +11,112 @@
1111
* `<polymer-layout>` arranges nodes horizontally via absolution positioning.
1212
* Set the `vertical` attribute (boolean) to arrange vertically instead.
1313
*
14+
* `<polymer-layout>` arranges it's <b>sibling elements</b>, not
15+
* it's children.
16+
*
1417
* One arranged node may be marked as elastic by giving it a `flex`
1518
* attribute (boolean).
16-
17-
* `<polymer-layout>` arranges it's sibling elements, not
18-
* it's children.
1919
*
20-
* Padding on the parent node is ignored.
21-
* Margin on arranged nodes is ignored.
20+
* You may remove a node from layout by giving it a `nolayout`
21+
* attribute (boolean).
22+
*
23+
* CSS Notes:
2224
*
23-
* Example:
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.
2429
*
25-
* // arrange divs into columns
26-
* // `flex` attribute on Column Two
27-
* // makes that column elastic
30+
* Example:
2831
*
29-
* <polymer-layout><polymer-layout>
30-
* <div>Column One</div>
31-
* <div flex>Column Two</div>
32-
* <div>Column Three</div>
32+
* Arrange three `div` into columns. `flex` attribute on Column Two makes that
33+
* column elastic.
3334
*
34-
* ----------------------------------------------------
35-
* |--------------------------------------------------|
36-
* ||Column One|-------Column Two-------|Column Three||
37-
* |--------------------------------------------------|
38-
* ----------------------------------------------------
35+
* <polymer-layout></polymer-layout>
36+
* <div>Column One</div>
37+
* <div flex>Column Two</div>
38+
* <div>Column Three</div>
39+
*
40+
* Remember that `<polymer-layout>` arranges it's sibling elements, not it's children.
3941
*
4042
* If body has width 52 device pixels (in this case, ascii characters), call that 52px.
4143
* Column One has it's natural width of 12px (including border), Column Three has it's
4244
* natural width of 14px, body border uses 2px, and Column Two automatically uses the
4345
* remaining space: 24px.
4446
*
47+
* |- 52px -|
48+
* ----------------------------------------------------
49+
* ||Column One|| Column Two ||Column Three||
50+
* ----------------------------------------------------
51+
* |- 12px -||- (24px) -|| 14px -|
52+
*
4553
* As the parent node resizes, the elastic column reacts via CSS to adjust it's size.
46-
* No javascript is used so the performance is generally ideal.
54+
* No javascript is used during parent resizing, for best performance.
55+
*
56+
* Changes in content or sibling size is not handled automatically.
4757
*
4858
* --------------------------------------------------------------------------
49-
* |------------------------------------------------------------------------|
50-
* ||Column One|------------------Column Two------------------|Column Three||
51-
* |------------------------------------------------------------------------|
59+
* ||Column One| Column Two |Column Three||
5260
* --------------------------------------------------------------------------
5361
*
54-
* ----------------------------------- ----
55-
* |--------------------------------------|
56-
* ||Column One|-Column Two-|Column Three||
57-
* |--------------------------------------|
58-
* ----------------------------------------
62+
* --------------------------------------
63+
* ||Column One|Column Two|Column Three||
64+
* --------------------------------------
5965
*
6066
* Arrange in rows by adding the `vertical` attribute.
6167
*
6268
* Example:
6369
*
64-
* // arrange divs into rows
65-
*
66-
* <polymer-layout vertical><polymer-layout>
67-
* <div>Row One</div>
68-
* <div flex>Row Two</div>
69-
* <div>Row Three</div>
70-
*
71-
* ------------- -------------
72-
* ||---------|| ||---------||
73-
* ||Row One || ||Row One ||
74-
* ||---------|| ||---------||
75-
* ||Row Two || ||Row Two ||
76-
* ||---------|| || ||
77-
* ||Row Three|| || ||
78-
* ||---------|| || ||
79-
* ------------- || ||
80-
* || ||
81-
* || ||
82-
* ||---------||
83-
* ||Row Three||
84-
* ||---------||
85-
* -------------
70+
* <polymer-layout vertical></polymer-layout>
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+
* |---------|
8695
*
8796
* Layouts can be nested arbitrarily.
8897
*
89-
* <polymer-layout><polymer-layout>
90-
* <div>Menu</div>
91-
* <div flex>
92-
* <polymer-layout vertical><polymer-layout>
93-
* <div>Title</div>
94-
* <div>Toolbar</div>
95-
* <div>Main</div>
96-
* <div>Footer</div>
97-
* </div>
98-
*
99-
* --------------------------------
100-
* |-----------------------------||
101-
* ||Menu ||Title ||
102-
* || ||-----------------||
103-
* || ||Toolbar ||
104-
* || ||-----------------||
105-
* || ||Main ||
106-
* || || ||
107-
* || || ||
108-
* || ||-----------------||
109-
* || ||Footer ||
110-
* || ||-----------------||
111-
* --------------------------------
98+
* <polymer-layout></polymer-layout>
99+
* <div>Menu</div>
100+
* <div flex>
101+
* <polymer-layout vertical></polymer-layout>
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+
* --------------------------------
112120
*
113121
* @class polymer-layout
114122
*
@@ -143,7 +151,7 @@
143151
if (cs.position === 'static') {
144152
parent.style.position = 'relative';
145153
}
146-
parent.style.overflow = 'hidden';
154+
//parent.style.overflow = 'hidden';
147155
// changes will cause another recalc at next validation step
148156
var vertical;
149157
this.parentNode.childNodes.forEach(function(c, i) {

0 commit comments

Comments
 (0)