Skip to content

Commit 18332aa

Browse files
leifoolsenleifoolsen
committed
Demo code and documentation
1 parent cff43bb commit 18332aa

File tree

3 files changed

+113
-44
lines changed

3 files changed

+113
-44
lines changed

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ Style the `lavu-grid` as desired (colors, font size, maximum width, etc.), by se
2020

2121
## Demo and Documentaion
2222

23-
(No releases yet. Clone and install to view documentation and examples)
24-
<!-- [See the component page](http://leifoolsen.github.io/lavu-grid/). -->
23+
[See the component page](http://leifoolsen.github.io/lavu-grid/).
2524

2625

2726
## Install

‎demo/index.html‎

Lines changed: 110 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,15 @@
3434
.demo-grid lavu-grid:first-of-type lavu-cell {
3535
height: 50px;
3636
}
37+
.demo-grid lavu-grid:nth-child(even) lavu-cell {
38+
background-color: #CBCBCB;
39+
}
3740
</style>
3841

3942
</head>
4043
<body unresolved>
4144

42-
<h2>Some examples of <code>&lt;lavu-grid&gt;</code>:</h2>
45+
<h2>Examples of <code>&lt;lavu-grid&gt;</code>:</h2>
4346
<div class="demo-grid">
4447
<lavu-grid>
4548
<lavu-cell span="1">1</lavu-cell>
@@ -152,50 +155,125 @@ <h2>Some examples of <code>&lt;lavu-grid&gt;</code>:</h2>
152155
</div>
153156

154157

155-
<h3>Nested grid with listener</h3>
158+
<div style="margin: 16px 8px 0 8px;">
159+
<p>Nested grid demo</p>
156160

157-
<div style="margin: 8px 8px 0 8px;">
158-
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:0;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #1e90ff; font-weight: bold">&lt;lavu-grid</span> <span style="color: #FF0000; background-color: #FFAAAA">no-spacing</span> <span style="color: #1e90ff">on-media-query-changed=</span><span style="color: #aa5500">&#39;_mediaQueryChanged&#39;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;outer&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
159-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;6&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;cornflower-blue&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
160-
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-1&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
161-
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
162161

163-
<span style="color: #1e90ff; font-weight: bold">&lt;template</span> <span style="color: #1e90ff">is=</span><span style="color: #aa5500">&quot;dom-if&quot;</span> <span style="color: #1e90ff">if=</span><span style="color: #aa5500">&quot;{{!_isScreenMd}}&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
164-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;7&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
165-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-grid</span> <span style="color: #FF0000; background-color: #FFAAAA">no-spacing</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
166-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-sm=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;golden-rod&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
167-
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
162+
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:0;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #1e90ff; font-weight: bold">&lt;link</span> <span style="color: #1e90ff">rel=</span><span style="color: #aa5500">&quot;import&quot;</span> <span style="color: #1e90ff">href=</span><span style="color: #aa5500">&quot;../../polymer/polymer.html&quot;</span><span style="color: #1e90ff; font-weight: bold">/&gt;</span>
163+
<span style="color: #1e90ff; font-weight: bold">&lt;dom-module</span> <span style="color: #1e90ff">id=</span><span style="color: #aa5500">&quot;nested-grid-demo&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
164+
165+
<span style="color: #1e90ff; font-weight: bold">&lt;link</span> <span style="color: #1e90ff">rel=</span><span style="color: #aa5500">&quot;import&quot;</span> <span style="color: #1e90ff">href=</span><span style="color: #aa5500">&quot;../lavu-grid.html&quot;</span> <span style="color: #1e90ff; font-weight: bold">/&gt;</span>
166+
167+
<span style="color: #1e90ff; font-weight: bold">&lt;style&gt;</span>
168+
:host {
169+
}
170+
:host .content-1,
171+
:host .content-2 {
172+
height: 100px;
173+
box-sizing: border-box;
174+
color: #fff;
175+
padding-left: 8px;
176+
padding-top: 4px;
177+
}
178+
:host .content-2 {
179+
height: 50px;
180+
}
181+
:host .cornflower-blue {
182+
background-color: cornflowerBlue;
183+
}
184+
:host .golden-rod {
185+
background-color: goldenRod;
186+
}
187+
:host .dark-orchid {
188+
background-color: darkOrchid;
189+
}
190+
:host .medium-orchid {
191+
background-color: mediumOrchid;
192+
}
193+
:host .coral {
194+
background-color: #F08080;
195+
}
196+
:host .olive {
197+
background-color: olive;
198+
}
199+
.outer {
200+
--lavu-grid: {
201+
margin: 8px 8px 16px;
202+
}
203+
}
204+
<span style="color: #1e90ff; font-weight: bold">&lt;/style&gt;</span>
205+
206+
<span style="color: #1e90ff; font-weight: bold">&lt;template&gt;</span>
207+
208+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-grid</span> <span style="color: #FF0000; background-color: #FFAAAA">no-spacing</span> <span style="color: #1e90ff">on-media-query-changed=</span><span style="color: #aa5500">&#39;_mediaQueryChanged&#39;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;outer&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
209+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;6&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;cornflower-blue&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
210+
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-1&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>Nested grid<span style="color: #1e90ff; font-weight: bold">&lt;/div&gt;</span>
211+
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
212+
213+
<span style="color: #1e90ff; font-weight: bold">&lt;template</span> <span style="color: #1e90ff">is=</span><span style="color: #aa5500">&quot;dom-if&quot;</span> <span style="color: #1e90ff">if=</span><span style="color: #aa5500">&quot;{{!_isScreenMd}}&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
214+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;7&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
215+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-grid</span> <span style="color: #FF0000; background-color: #FFAAAA">no-spacing</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
216+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-sm=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;golden-rod&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
217+
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
218+
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
219+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-sm=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;dark-orchid&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
220+
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
221+
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
222+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-sm=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;olive&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
223+
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
224+
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
225+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-sm=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;coral&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
226+
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
227+
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
228+
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-grid&gt;</span>
229+
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
230+
<span style="color: #1e90ff; font-weight: bold">&lt;/template&gt;</span>
231+
232+
<span style="color: #1e90ff; font-weight: bold">&lt;template</span> <span style="color: #1e90ff">is=</span><span style="color: #aa5500">&quot;dom-if&quot;</span> <span style="color: #1e90ff">if=</span><span style="color: #aa5500">&quot;{{_isScreenMd}}&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
233+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;6&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;golden-rod&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
234+
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-1&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
168235
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
169-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-sm=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;dark-orchid&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
236+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;dark-orchid&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
170237
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
171238
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
172-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-sm=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;olive&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
239+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;olive&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
173240
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
174241
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
175-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span=</span><span style="color: #aa5500">&quot;8&quot;</span> <span style="color: #1e90ff">span-sm=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;coral&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
242+
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;coral&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
176243
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
177244
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
178-
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-grid&gt;</span>
179-
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
180-
<span style="color: #1e90ff; font-weight: bold">&lt;/template&gt;</span>
245+
<span style="color: #1e90ff; font-weight: bold">&lt;/template&gt;</span>
246+
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-grid&gt;</span>
181247

182-
<span style="color: #1e90ff; font-weight: bold">&lt;template</span> <span style="color: #1e90ff">is=</span><span style="color: #aa5500">&quot;dom-if&quot;</span> <span style="color: #1e90ff">if=</span><span style="color: #aa5500">&quot;{{_isScreenMd}}&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
183-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;6&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;golden-rod&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
184-
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-1&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
185-
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
186-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;dark-orchid&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
187-
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
188-
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
189-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;olive&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
190-
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
191-
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
192-
<span style="color: #1e90ff; font-weight: bold">&lt;lavu-cell</span> <span style="color: #1e90ff">span-md=</span><span style="color: #aa5500">&quot;4&quot;</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;coral&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;</span>
193-
<span style="color: #1e90ff; font-weight: bold">&lt;div</span> <span style="color: #1e90ff">class=</span><span style="color: #aa5500">&quot;content-2&quot;</span><span style="color: #1e90ff; font-weight: bold">&gt;&lt;/div&gt;</span>
194-
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-cell&gt;</span>
195248
<span style="color: #1e90ff; font-weight: bold">&lt;/template&gt;</span>
196-
<span style="color: #1e90ff; font-weight: bold">&lt;/lavu-grid&gt;</span>
249+
250+
<span style="color: #1e90ff; font-weight: bold">&lt;script&gt;</span>
251+
(function() {
252+
Polymer({
253+
is: &#39;nested-grid-demo&#39;,
254+
255+
properties: {
256+
_screenClass: {
257+
type: String
258+
},
259+
_isScreenMd: {
260+
type: Boolean
261+
}
262+
},
263+
_mediaQueryChanged: function(e) {
264+
console.log(&#39;media-query-changed&#39; + &#39;: &#39;
265+
+ e.detail.screenClass + &#39;, &#39; + e.detail.mediaQuery);
266+
267+
this._screenClass = e.detail.screenClass;
268+
this._isScreenMd = this._screenClass === &#39;screen-md&#39;;
269+
}
270+
});
271+
})();
272+
<span style="color: #1e90ff; font-weight: bold">&lt;/script&gt;</span>
273+
<span style="color: #1e90ff; font-weight: bold">&lt;/dom-module&gt;</span>
197274
</pre></div>
198275

276+
199277
</div>
200278

201279

0 commit comments

Comments
 (0)