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

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

Issue 20778002: more link tweaking (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: getting ready for push Created 7 years, 4 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: "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 Templates" 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
(...skipping 25 matching lines...) Expand all
46 </div> 46 </div>
47 47
48 <hr> 48 <hr>
49 49
50 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> 50 <aside class="alert" style="background-color:Lavender;color:SlateBlue">
51 <font size="24"> 51 <font size="24">
52 <i class="icon-bullhorn"> </i> 52 <i class="icon-bullhorn"> </i>
53 </font> 53 </font>
54 54
55 The Dart Web UI team recently 55 The Dart Web UI team recently
56 <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" target="_blank">announced</a>
57 a port of the Polymer project: 57 a port of the Polymer project:
58 <a href="http://pub.dartlang.org/packages/polymer">polymer.dart</a>. 58 <a href="https://pub.dartlang.org/packages/polymer" target="_blank">polymer.da rt</a>.
59 59
60 We've converted most of the tutorial Web UI examples and compiled some 60 We've converted most of the tutorial Web UI examples and compiled some
61 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t o-polymer-notes.txt" target="_blank">notes</a> 61 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t o-polymer-notes.txt" target="_blank">notes</a>
62 along the way. 62 along the way.
63 Check out source code for the polymer version of the 63 Check out source code for the polymer version of the
64 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t arget08-polymer/drseuss" 64 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t arget08-polymer/drseuss"
65 target="_blank">drseuss</a> 65 target="_blank">drseuss</a>
66 example. 66 example.
67 </aside> 67 </aside>
68 68
69 <hr> 69 <hr>
70 70
71 Custom elements are one kind of web component 71 Custom elements are one kind of web component
72 defined in the Web Components model. 72 defined in the Web Components model.
73 Using templates and scripts, 73 Using templates and scripts,
74 a custom element defines a new DOM tag 74 a custom element defines a new DOM tag
75 that extends an existing tag. 75 that extends an existing tag.
76 This target shows you how to define a custom element 76 This target shows you how to define a custom element
77 and how to create an instance of that element. 77 and how to create an instance of that element.
78 Dart's implementation of custom elements is in the 78 Dart's implementation of custom elements is in the
79 <a href="http://pub.dartlang.org/packages/web_ui" 79 <a href="https://pub.dartlang.org/packages/web_ui"
80 target="blank">Web UI package</a>, 80 target="blank">Web UI package</a>,
81 which is required to run the examples in this target. 81 which is required to run the examples in this target.
82 A previous target, 82 A previous target,
83 <a href="/docs/tutorials/web-ui/">Get Started with Web UI</a>, 83 <a href="/docs/tutorials/web-ui/">Get Started with Web UI</a>,
84 shows you how to install the Web UI package. 84 shows you how to install the Web UI package.
85 85
86 * [About custom elements](#about-custom-elements) 86 * [About custom elements](#about-custom-elements)
87 * [Connecting the files](#connecting-the-files) 87 * [Connecting the files](#connecting-the-files)
88 * [Instantiating a custom element](#instantiating-a-custom-element) 88 * [Instantiating a custom element](#instantiating-a-custom-element)
89 * [Defining a custom element](#defining-a-custom-element) 89 * [Defining a custom element](#defining-a-custom-element)
(...skipping 29 matching lines...) Expand all
119 You can also create a complex, 119 You can also create a complex,
120 reusable element by bundling elements together inside the custom element. 120 reusable element by bundling elements together inside the custom element.
121 Running below is an instance of a custom element, called `x-converter`, 121 Running below is an instance of a custom element, called `x-converter`,
122 that extends the &lt;div&gt; tag 122 that extends the &lt;div&gt; tag
123 and contains several elements within it. 123 and contains several elements within it.
124 Everything within the yellow box is part of the x-converter element. 124 Everything within the yellow box is part of the x-converter element.
125 Try it! Type a number into one of the fields and press return. 125 Try it! Type a number into one of the fields and press return.
126 126
127 <iframe class="running-app-frame" 127 <iframe class="running-app-frame"
128 style="height:100px;width:400px;" 128 style="height:100px;width:400px;"
129 src="http://dart-lang.github.com/dart-tutorials-samples/web/target08/drs euss/web/out/drseuss.html"> 129 src="http://dart-lang.github.io/dart-tutorials-samples/web/target08/drse uss/web/out/drseuss.html">
130 </iframe> 130 </iframe>
131 131
132 You can find the complete source code for this sample on github at 132 You can find the complete source code for this sample on github at
133 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar get08/drseuss" target="_blank">drseuss</a>. 133 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar get08/drseuss" target="_blank">drseuss</a>.
134 134
135 This repository includes the pubspec.yaml and build.dart 135 This repository includes the pubspec.yaml and build.dart
136 files necessary to install the Web UI package and build the app. 136 files necessary to install the Web UI package and build the app.
137 Refer to 137 Refer to
138 <a href="/docs/tutorials/web-ui/">Get Started with Web UI</a> 138 <a href="/docs/tutorials/web-ui/">Get Started with Web UI</a>
139 for instructions. 139 for instructions.
(...skipping 23 matching lines...) Expand all
163 ##Connecting the files 163 ##Connecting the files
164 164
165 The embedded app just below contains 165 The embedded app just below contains
166 three x-converter elements, 166 three x-converter elements,
167 each configured with different labels and 167 each configured with different labels and
168 a different ratio. 168 a different ratio.
169 Try it! Enter numbers into each of the fields. 169 Try it! Enter numbers into each of the fields.
170 170
171 <iframe class="running-app-frame" 171 <iframe class="running-app-frame"
172 style="height:225px;width:400px;" 172 style="height:225px;width:400px;"
173 src="http://dart-lang.github.com/dart-tutorials-samples/web/target08/con vertthis/web/out/convertThis.html"> 173 src="http://dart-lang.github.io/dart-tutorials-samples/web/target08/conv ertthis/web/out/convertThis.html">
174 </iframe> 174 </iframe>
175 175
176 You can find the complete source code for this sample on github at 176 You can find the complete source code for this sample on github at
177 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar get08/convertthis" target="_blank">convertthis</a>. 177 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar get08/convertthis" target="_blank">convertthis</a>.
178 178
179 This app is implemented with these Dart and HTML files: 179 This app is implemented with these Dart and HTML files:
180 180
181 | File | Description| 181 | File | Description|
182 |---|---| 182 |---|---|
183 | <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t arget08/convertthis/web/converter-element.html" target="_blank">converter-elemen t.html</a> | Defines the UI for the x-converter custom element | 183 | <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/t arget08/convertthis/web/converter-element.html" target="_blank">converter-elemen t.html</a> | Defines the UI for the x-converter custom element |
(...skipping 223 matching lines...) Expand 10 before | Expand all | Expand 10 after
407 The Web UI package contains several examples, 407 The Web UI package contains several examples,
408 including a version of 408 including a version of
409 <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"
410 target="_blank">TodoMVC</a>. 410 target="_blank">TodoMVC</a>.
411 </li> 411 </li>
412 </ul> 412 </ul>
413 413
414 {% endcapture %} 414 {% endcapture %}
415 415
416 {% include tutorial.html %} 416 {% include tutorial.html %}
OLDNEW
« no previous file with comments | « src/site/docs/tutorials/connect-dart-html/index.markdown ('k') | src/site/docs/tutorials/fetchdata/index.markdown » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698