-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (89 loc) · 3.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<title>Demo of WebComponents built with Lego</title>
<link rel=stylesheet href=index.css>
<h1>Lego webcomponents demo</h1>
<article>
<section id="hello-world">
<h2>Hello World <a href="#hello-world">🔗</a></h2>
<p>Simple example with a default text and attributes override</p>
<hello-world></hello-world>
<hello-world planet="Hearth!" icon="🌏"></hello-world>
</section>
<aside>
<script src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2FPolight%2Flego-demo%2Fblob%2Fmain%2Fbricks%2Fhello-world.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
</aside>
</article>
<article>
<section id="buttons">
<h2>Button <a href="#buttons">🔗</a></h2>
<p>Demonstrate state change when clicking a button</p>
<x-button></x-button>
</section>
<aside>
<script src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2FPolight%2Flego-demo%2Fblob%2Fmain%2Fbricks%2Fx-button.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
</aside>
</article>
<article>
<section id="world-clock">
<h2>Independant instances <a href="#world-clock">🔗</a></h2>
<p>A single component can be behave different with attributes.</p>
<p>Here are how countries display the same time:</p>
<world-clock></world-clock>
<world-clock country="fr"></world-clock>
<world-clock country="us"></world-clock>
</section>
<aside>
<script src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2FPolight%2Flego-demo%2Fblob%2Fmain%2Fbricks%2Fworld-clock.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
</aside>
</article>
<article>
<section id=tiles>
<h2>Color Tiling <a href="#tiles">🔗</a></h2>
<p>🖱️ Mouse over the block below</p>
<p>This demo is about <strong>reactive CSS</strong> with mouse event and setInterval 😎</p>
<x-tiles></x-tiles>
</section>
<aside>
<script
src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2FPolight%2Flego-demo%2Fblob%2Fmain%2Fbricks%2Fx-tile.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
</aside>
</article>
<article>
<section id=counter>
<h2>Counter <a href="#counter">🔗</a></h2>
<p>This shows how events can update the view</p>
<x-counter></x-counter>
</section>
<aside>
<script src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2FPolight%2Flego-demo%2Fblob%2Fmain%2Fbricks%2Fx-counter.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
</aside>
</article>
<footer>
<a href="https://github.com/polight/lego">Source and documentation</a>
</footer>
<script type=module src="./dist/index.js"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//matomo.collectivite.org/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '5']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</html>
<style>
h2 a {
opacity: .8;
text-decoration: none;
font-size: 1rem;
}
</style>