Skip to content

Commit 165b3b6

Browse files
tstatlertstatler
committed
Initial doc commit to master
1 parent 385faef commit 165b3b6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+21741
-0
lines changed

‎_config.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
auto: true
2+
server: true
3+
pygments: true
4+
markdown: redcarpet
5+
# # safe: true
6+
# # lsi: false
7+
# # destination: docs/
8+
# # url: http://localhost:4000/docs

‎_includes/left-nav.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="span3">
2+
<div class="well sidebar-nav affix">
3+
<ul class="nav nav-list">
4+
<li class="nav-header">Getting Started
5+
</li>
6+
<li>
7+
<a href="index.html">Introduction</a>
8+
</li>
9+
<li>
10+
<a href="getting-the-code.html">Get the code</a>
11+
</li>
12+
<li>
13+
<a href="getting-started.html">Get started</a>
14+
</li>
15+
<li class="nav-header">Components
16+
</li><!-- <li><a href="components.html">About Toolkit components</a></li> -->
17+
<li>
18+
<a href="toolkit-kernel-explainer.html">Toolkit kernel</a>
19+
</li>
20+
<li class="nav-header">More information
21+
</li>
22+
<li>
23+
<a href="runtime-config.html">Runtime configuration options</a>
24+
</li>
25+
<li>
26+
<a href="shadow-dom-shim.html">About the Shadow DOM shim</a>
27+
</li>
28+
</ul>
29+
</div><!--well -->
30+
</div>

‎_includes/samples/basic-element.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!-- Source tabs -->
2+
<ul id="myTab" class="nav nav-tabs">
3+
<li class="active"><a href="#element" data-toggle="tab">my-element.html</a></li>
4+
<li><a href="#index" data-toggle="tab">index.html</a></li>
5+
</ul>
6+
7+
<!-- Source tab content -->
8+
<div class="tab-content">
9+
<div class="tab-pane active" id="element">
10+
{% highlight html %}
11+
<element name="my-element">
12+
<template>
13+
This is <b>my-element</b>. There are many like it, but this one is mine.
14+
</template>
15+
</element>
16+
{% endhighlight html %}
17+
</div>
18+
<div class="tab-pane" id="index">
19+
{% highlight html %}
20+
<!DOCTYPE html>
21+
<html>
22+
<head>
23+
<script src="../platform/platform.js"></script>
24+
<!-- Load custom element -->
25+
<link rel="components" href="my-element.html">
26+
</head>
27+
<body>
28+
<!-- Instantiate custom element -->
29+
<my-element></my-element>
30+
</body>
31+
</html>
32+
{% endhighlight html %}
33+
</div>
34+
</div>
35+
36+
#### Result ####
37+
<!-- Running sample -->
38+
<div class="well">
39+
<my-element></my-element>
40+
</div>

‎_includes/samples/tk-element-databinding-color.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!-- tk-element-databinding-color.html -->
2+
3+
<ul id="myTab" class="nav nav-tabs">
4+
<li class="active"><a href="#element5" data-toggle="tab">tk-element-databinding-color.html</a></li>
5+
<li><a href="#index5" data-toggle="tab">index.html</a></li>
6+
</ul>
7+
8+
<div class="tab-content">
9+
<div class="tab-pane active" id="element5">
10+
{% highlight html %}
11+
<element name="tk-element-databinding-color">
12+
<link rel="components" href="toolkit/src/g-component.html">
13+
<template>
14+
This is a <strong>{{"{{owner"}}}}</strong>'s tk-element. He likes the color <span style="color: {{"{{color"}}}}">{{"{{color"}}}}</span>.
15+
</template>
16+
<script>
17+
this.component({
18+
owner: "Daniel",
19+
color: "red"
20+
});
21+
</script>
22+
</element>
23+
{% endhighlight html %}
24+
</div>
25+
<div class="tab-pane" id="index5">
26+
{% highlight html %}
27+
<!DOCTYPE html>
28+
<html>
29+
<head>
30+
<script src="../platform/platform.js"></script>
31+
<link rel="components" href="tk-element-databinding-color.html">
32+
</head>
33+
<body>
34+
<tk-element-databinding-color></tk-element-databinding-color>
35+
</body>
36+
</html>
37+
{% endhighlight html %}
38+
</div>
39+
</div>
40+
41+
#### Result ####
42+
43+
<!-- Running sample -->
44+
<div class="well">
45+
<tk-element-databinding-color></tk-element-databinding-color>
46+
</div>

‎_includes/samples/tk-element-databinding.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<ul id="myTab" class="nav nav-tabs">
2+
<li class="active"><a href="#element3" data-toggle="tab">tk-element-databinding.html</a></li>
3+
<li><a href="#index3" data-toggle="tab">index.html</a></li>
4+
</ul>
5+
<div class="tab-content">
6+
<div class="tab-pane active" id="element3">
7+
{% highlight html %}
8+
<element name="tk-element-databinding">
9+
<link rel="components" href="toolkit/src/g-component.html">
10+
<template>
11+
This is a <strong>{{"{{owner"}}}}</strong>'s tk-element.
12+
</template>
13+
<script>
14+
this.component({
15+
owner: "Daniel"
16+
});
17+
</script>
18+
</element>
19+
{% endhighlight html %}
20+
</div>
21+
<div class="tab-pane" id="index3">
22+
{% highlight html %}
23+
<!DOCTYPE html>
24+
<html>
25+
<head>
26+
<script src="../platform/platform.js"></script>
27+
<link rel="components" href="tk-element-databinding.html">
28+
</head>
29+
<body>
30+
<tk-element-databinding></tk-element-databinding>
31+
</body>
32+
</html>
33+
{% endhighlight html %}
34+
</div>
35+
</div>
36+
37+
#### Result ####
38+
39+
<!-- Running sample -->
40+
<div class="well">
41+
<tk-element-databinding></tk-element-databinding>
42+
</div>

‎_includes/samples/tk-element-event-binding.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!-- Source tabs -->
2+
<ul id="myTab" class="nav nav-tabs">
3+
<li class="active"><a href="#element8" data-toggle="tab">tk-node-finding.html</a></li>
4+
<li><a href="#index8" data-toggle="tab">index.html</a></li>
5+
</ul>
6+
7+
<!-- Source tab content -->
8+
<div class="tab-content">
9+
<div class="tab-pane active" id="element8">
10+
{% highlight html %}
11+
<element name="tk-element-event-binding">
12+
<link rel="comopnents" href="toolkit/src/g-component.html">
13+
<template>
14+
<p>This is a <strong>{{owner}}</strong>'s tk-element. He likes the color <span style="color: {{color}}">{{color}}</span>.</p>
15+
<button on-click="sayHello">Say hello</button>
16+
</template>
17+
<script>
18+
this.component({
19+
publish: {
20+
color: "red",
21+
owner: "Daniel"
22+
},
23+
sayHello: function(inEvent, inDetail, inSender) {
24+
alert(this.owner + " says hi!");
25+
inSender.innerText = "Thanks!"
26+
}
27+
});
28+
</script>
29+
</element>
30+
{% endhighlight html %}
31+
</div>
32+
<div class="tab-pane" id="index8">
33+
{% highlight html %}
34+
<!DOCTYPE html>
35+
<html>
36+
<head>
37+
<script src="../platform/platform.js"></script>
38+
<!-- Load custom element -->
39+
<link rel="components" href="tk-element-event-binding.html">
40+
</head>
41+
<body>
42+
<!-- Instantiate custom element -->
43+
<tk-element-event-binding></tk-element-event-binding>
44+
</body>
45+
</html>
46+
{% endhighlight html %}
47+
</div>
48+
</div>
49+
50+
#### Result ####
51+
<!-- Running sample -->
52+
<div class="well">
53+
<tk-element-event-binding owner="Scott" color="blue"></tk-element-event-binding>
54+
</div>

‎_includes/samples/tk-element-property-public-publish.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<ul id="myTab" class="nav nav-tabs">
2+
<li class="active"><a href="#element7" data-toggle="tab">tk-element-property-public-publish.html</a></li>
3+
<li><a href="#index7" data-toggle="tab">index.html</a></li>
4+
</ul>
5+
6+
<div class="tab-content">
7+
<div class="tab-pane active" id="element7">
8+
{% highlight html %}
9+
<element name="tk-element-property-public-publish">
10+
<link rel="components" href="toolkit/src/g-component.html">
11+
<template>
12+
This is a <strong>{{"{{owner"}}}}</strong>'s tk-element. He likes the color <span style="color: color">{{"{{color}}}}</span>.
13+
</template>
14+
<script>
15+
this.component({
16+
publish: {
17+
color: "red",
18+
owner: "Daniel"
19+
}
20+
});
21+
</script>
22+
</element>
23+
{% endhighlight html %}
24+
</div>
25+
<div class="tab-pane" id="index7">
26+
{% highlight html %}
27+
<!DOCTYPE html>
28+
<html>
29+
<head>
30+
<script src="../platform/platform.js"></script>
31+
<link rel="components" href="tk-element-property-public-publish.html">
32+
</head>
33+
<body>
34+
<div class="well">
35+
<tk-element-property-public-publish owner="Alex" color="purple">
36+
</tk-element-property-public-publish>
37+
</div>
38+
</body>
39+
</html>
40+
{% endhighlight html %}
41+
</div>
42+
</div>
43+
44+
#### Result ####
45+
46+
<!-- Live sample. -->
47+
<div class="well">
48+
<tk-element-property-public-publish owner="Alex" color="purple">
49+
</tk-element-property-public-publish>
50+
</div>

‎_includes/samples/tk-element-property-public.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<ul id="myTab" class="nav nav-tabs">
2+
<li class="active"><a href="#element6" data-toggle="tab">tk-element-property-public.html</a></li>
3+
<li><a href="#index6" data-toggle="tab">index.html</a></li>
4+
</ul>
5+
6+
<div class="tab-content">
7+
<div class="tab-pane active" id="element6">
8+
{% highlight html %}
9+
<element name="tk-element-property-public" attributes="owner color">
10+
<link rel="components" href="toolkit/src/g-component.html">
11+
<template>
12+
This is a <strong>{{owner}}</strong>'s tk-element. He likes the color <span style="color: {{ "{{ color " }}}}">{{ "{{ color " }}}}</span>.
13+
</template>
14+
<script>
15+
this.component({
16+
owner: "Daniel",
17+
color: "red"
18+
});
19+
</script>
20+
</element>
21+
{% endhighlight html %}
22+
</div>
23+
<div class="tab-pane" id="index6">
24+
{% highlight html %}
25+
<!DOCTYPE html>
26+
<html>
27+
<head>
28+
<script src="../platform/platform.js"></script>
29+
<link rel="components" href="tk-element-property-public.html">
30+
</head>
31+
<body>
32+
<div class="well">
33+
<!-- Make new component and specify values for new public properties. -->
34+
<tk-element-property-public owner="Scott" color="blue">
35+
</tk-element-property-public>
36+
</div>
37+
</body>
38+
</html>
39+
{% endhighlight html %}
40+
</div>
41+
</div>
42+
43+
#### Result ####
44+
45+
<!-- Running sample -->
46+
<div class="well">
47+
<tk-element-property-public owner="Scott" color="blue"></tk-element-property-public>
48+
49+
</div>

‎_includes/samples/tk-element-property.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<ul id="myTab" class="nav nav-tabs">
2+
<li class="active"><a href="#element4" data-toggle="tab">tk-element-property.html</a></li>
3+
<li><a href="#index4" data-toggle="tab">index.html</a></li>
4+
</ul>
5+
6+
<div class="tab-content">
7+
<div class="tab-pane active" id="element4">
8+
{% highlight html %}
9+
<element name="tk-element-property">
10+
<link rel="components" href="toolkit/src/g-component.html">
11+
<template>
12+
This is a <b>tk-element</b> with a (protected) property.
13+
</template>
14+
<script>
15+
this.component({
16+
owner: "Daniel"
17+
});
18+
</script>
19+
</element>
20+
{% endhighlight html %}
21+
</div>
22+
<div class="tab-pane" id="index4">
23+
{% highlight html %}
24+
<!DOCTYPE html>
25+
<html>
26+
<head>
27+
<script src="../platform/platform.js"></script>
28+
<link rel="components" href="tk-element-property.html">
29+
</head>
30+
<body>
31+
<tk-element-property></tk-element-property>
32+
</body>
33+
</html>
34+
{% endhighlight html %}
35+
</div>
36+
</div>
37+
38+
#### Result ####
39+
40+
<!-- Running sample -->
41+
<div class="well">
42+
<tk-element-property></tk-element-property>
43+
</div>

0 commit comments

Comments
 (0)