OLD | NEW |
1 --- | 1 --- |
2 layout: default | 2 layout: default |
3 title: "Target 8: Define a Custom DOM Tag" | 3 title: "Target 8: 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 |
| 9 next-title: "Fetch Data Dynamically" |
| 10 prev: templates |
| 11 prev-title: "Use <template>" |
8 --- | 12 --- |
9 | 13 |
10 {% capture whats_the_point %} | 14 {% capture whats_the_point %} |
11 | 15 |
12 * Make your own DOM element tags with the <element> tag. | 16 * Make your own DOM element tags with the <element> tag. |
13 * A custom element requires a template and can have a script. | 17 * A custom element requires a template and can have a script. |
14 * Use data binding to connect Dart variables to content. | 18 * Use data binding to connect Dart variables to content. |
15 * Directly attach event handlers in HTML. | 19 * Directly attach event handlers in HTML. |
16 | 20 |
17 {% endcapture %} | 21 {% endcapture %} |
(...skipping 377 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
395 and the corresponding source code. | 399 and the corresponding source code. |
396 </li> | 400 </li> |
397 <li> | 401 <li> |
398 The Web UI package contains several examples, | 402 The Web UI package contains several examples, |
399 including a version of | 403 including a version of |
400 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc" | 404 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc" |
401 target="_blank">TodoMVC</a>. | 405 target="_blank">TodoMVC</a>. |
402 </li> | 406 </li> |
403 </ul> | 407 </ul> |
404 | 408 |
405 <hr> | |
406 | |
407 <div class="row"> | |
408 <div class="span3"> | |
409 <a href="/docs/tutorials/templates/"><i class="icon-chevron-left"> </i> Use &l
t;template></a> | |
410 </div> | |
411 <div class="span3"> | |
412 <a href="http://code.google.com/p/dart/issues/entry?template=Tutorial%20feedback
" | |
413 target="_blank"> | |
414 <i class="icon-comment"> </i> | |
415 Send feedback | |
416 </a> | |
417 </div> | |
418 <div class="span3"> | |
419 <a href="/docs/tutorials/fetchdata/" class="pull-right">Fetch Data Dynamically
<i class="icon-chevron-right"> </i> </a> | |
420 </div> | |
421 </div> | |
422 | |
423 {% endcapture %} | 409 {% endcapture %} |
424 | 410 |
425 {% include tutorial.html %} | 411 {% include tutorial.html %} |
OLD | NEW |