Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(365)

Side by Side Diff: src/site/docs/tutorials/custom-elements/index.markdown

Issue 19621005: linked to new polymer examples (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: merge with master...forgot Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 --- 8 ---
9 9
10 {% capture whats_the_point %} 10 {% capture whats_the_point %}
11 11
12 * Make your own DOM element tags with the <element> tag. 12 * Make your own DOM element tags with the <element> tag.
13 * A custom element requires a template and can have a script. 13 * A custom element requires a template and can have a script.
14 * Use data binding to connect Dart variables to content. 14 * Use data binding to connect Dart variables to content.
15 * Directly attach event handlers in HTML. 15 * Directly attach event handlers in HTML.
16 16
17 {% endcapture %} 17 {% endcapture %}
18 18
19 {% capture sample_links %} 19 {% capture sample_links %}
20 20
21 <p> 21 <p>
22 Get the source code for the samples featured in this target:</p> 22 Get the source code for the samples featured in this target:</p>
23 23
24 <ul> 24 <ul>
25 <li> 25 <li>
26 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /target08/drseuss" 26 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /target08/drseuss"
27 target="_blank">drseuss</a> 27 target="_blank">drseuss</a> (web_ui)
28 </li>
29 <li>
30 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /target08-polymer/drseuss"
31 target="_blank">drseuss</a> (polymer)
28 </li> 32 </li>
29 <li> 33 <li>
30 <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"
31 target="_blank">convertthis</a> 35 target="_blank">convertthis</a>
32 </li> 36 </li>
33 </ul> 37 </ul>
34 38
35 {% endcapture %} 39 {% endcapture %}
36 40
37 {% capture content %} 41 {% capture content %}
38 42
43 <hr>
44
45 <aside class="alert" style="background-color:Lavender;color:SlateBlue">
46 <font size="24">
47 <i class="icon-bullhorn"> </i>
48 </font>
49
50 The Dart Web UI team recently
51 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR tA7k">announced</a>
52 a port of the Polymer project:
53 <a href="http://pub.dartlang.org/packages/polymer">polymer.dart</a>.
54
55 We've converted most of the tutorial Web UI examples and compiled some
56 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t o-polymer-notes.txt" target="_blank">notes</a>
57 along the way.
58 Check out source code for the polymer version of the
59 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t arget08-polymer/drseuss"
60 target="_blank">drseuss</a>
61 example.
62 </aside>
63
64 <hr>
65
39 Custom elements are one kind of web component 66 Custom elements are one kind of web component
40 defined in the Web Components model. 67 defined in the Web Components model.
41 Using templates and scripts, 68 Using templates and scripts,
42 a custom element defines a new DOM tag 69 a custom element defines a new DOM tag
43 that extends an existing tag. 70 that extends an existing tag.
44 This target shows you how to define a custom element 71 This target shows you how to define a custom element
45 and how to create an instance of that element. 72 and how to create an instance of that element.
46 Dart's implementation of custom elements is in the 73 Dart's implementation of custom elements is in the
47 <a href="http://pub.dartlang.org/packages/web_ui" 74 <a href="http://pub.dartlang.org/packages/web_ui"
48 target="blank">Web UI package</a>, 75 target="blank">Web UI package</a>,
(...skipping 344 matching lines...) Expand 10 before | Expand all | Expand 10 after
393 </a> 420 </a>
394 </div> 421 </div>
395 <div class="span3"> 422 <div class="span3">
396 <a href="/docs/tutorials/fetchdata/" class="pull-right">Fetch Data Dynamically <i class="icon-chevron-right"> </i> </a> 423 <a href="/docs/tutorials/fetchdata/" class="pull-right">Fetch Data Dynamically <i class="icon-chevron-right"> </i> </a>
397 </div> 424 </div>
398 </div> 425 </div>
399 426
400 {% endcapture %} 427 {% endcapture %}
401 428
402 {% include tutorial.html %} 429 {% include tutorial.html %}
OLDNEW
« no previous file with comments | « no previous file | src/site/docs/tutorials/fetchdata/index.markdown » ('j') | src/site/docs/tutorials/web-ui/index.markdown » ('J')

Powered by Google App Engine
This is Rietveld 408576698