OLD | NEW |
1 --- | 1 --- |
2 layout: default | 2 layout: default |
3 title: "Target 8: Define a Custom DOM Tag" | 3 title: "Define a Custom DOM Tag" |
4 description: "Define a custom DOM element tag with help from the Web UI package" | 4 description: "Define a custom DOM element tag with help from the Web UI package" |
5 has-permalinks: true | 5 has-permalinks: true |
6 tutorial: | 6 tutorial: |
7 id: web-components | 7 id: web-components |
8 next: fetchdata | 8 next: fetchdata |
9 next-title: "Fetch Data Dynamically" | 9 next-title: "Fetch Data Dynamically" |
10 prev: templates | 10 prev: templates |
11 prev-title: "Use <template>" | 11 prev-title: "Use Templates" |
12 --- | 12 --- |
13 | 13 |
14 {% capture whats_the_point %} | 14 {% capture whats_the_point %} |
15 | 15 |
16 * Make your own DOM element tags with the <element> tag. | 16 * Make your own DOM element tags with the <element> tag. |
17 * A custom element requires a template and can have a script. | 17 * A custom element requires a template and can have a script. |
18 * Use data binding to connect Dart variables to content. | 18 * Use data binding to connect Dart variables to content. |
19 * Directly attach event handlers in HTML. | 19 * Directly attach event handlers in HTML. |
20 | 20 |
21 {% endcapture %} | 21 {% endcapture %} |
(...skipping 11 matching lines...) Expand all Loading... |
33 <li> | 33 <li> |
34 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target08/convertthis" | 34 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target08/convertthis" |
35 target="_blank">convertthis</a> | 35 target="_blank">convertthis</a> |
36 </li> | 36 </li> |
37 </ul> | 37 </ul> |
38 | 38 |
39 {% endcapture %} | 39 {% endcapture %} |
40 | 40 |
41 {% capture content %} | 41 {% capture content %} |
42 | 42 |
| 43 <div class="tute-target-title"> |
| 44 <h1>{{page.title}}</h1> |
| 45 <h3>Create your own, customized DOM elements.</h3> |
| 46 </div> |
| 47 |
43 <hr> | 48 <hr> |
44 | 49 |
45 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> | 50 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> |
46 <font size="24"> | 51 <font size="24"> |
47 <i class="icon-bullhorn"> </i> | 52 <i class="icon-bullhorn"> </i> |
48 </font> | 53 </font> |
49 | 54 |
50 The Dart Web UI team recently | 55 The Dart Web UI team recently |
51 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR
tA7k">announced</a> | 56 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR
tA7k">announced</a> |
52 a port of the Polymer project: | 57 a port of the Polymer project: |
(...skipping 349 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
402 The Web UI package contains several examples, | 407 The Web UI package contains several examples, |
403 including a version of | 408 including a version of |
404 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc" | 409 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc" |
405 target="_blank">TodoMVC</a>. | 410 target="_blank">TodoMVC</a>. |
406 </li> | 411 </li> |
407 </ul> | 412 </ul> |
408 | 413 |
409 {% endcapture %} | 414 {% endcapture %} |
410 | 415 |
411 {% include tutorial.html %} | 416 {% include tutorial.html %} |
OLD | NEW |