| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Use Templates" | 3 title: "Use Templates" |
| 4 description: "Use template loops and conditionals for declarative UI creation." | 4 description: "Use template loops and conditionals for declarative UI creation." |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: web-ui-templates | 7 id: web-ui-templates |
| 8 next: custom-elements/ | 8 next: custom-elements/ |
| 9 next-title: "Define a Custom DOM Tag" | 9 next-title: "Define a Custom DOM Tag" |
| 10 prev: web-ui/ | 10 prev: web-ui/ |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 47 <h1>{{page.title}}</h1> | 47 <h1>{{page.title}}</h1> |
| 48 <h3>Create dynamic elements declaratively.</h3> | 48 <h3>Create dynamic elements declaratively.</h3> |
| 49 </div> | 49 </div> |
| 50 | 50 |
| 51 <hr> | 51 <hr> |
| 52 | 52 |
| 53 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> | 53 <aside class="alert" style="background-color:Lavender;color:SlateBlue"> |
| 54 <font size="24"> | 54 <font size="24"> |
| 55 <i class="icon-bullhorn"> </i> | 55 <i class="icon-bullhorn"> </i> |
| 56 </font> | 56 </font> |
| 57 | 57 Web UI is being upgraded to polymer.dart. |
| 58 The Dart Web UI team recently | 58 For more information about polymer.dart, |
| 59 <a href="https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/6laXXxR
tA7k" target="_blank">announced</a> | 59 including tips on porting Web UI apps to polymer.dart |
| 60 a port of the Polymer project: | 60 and the current status of the project, |
| 61 <a href="https://pub.dartlang.org/packages/polymer" target="_blank">polymer.da
rt</a>. | 61 check out the <a href="/polymer-dart/" target="_blank">polymer.dart</a> |
| 62 | 62 home page. |
| 63 We've converted most of the tutorial Web UI examples and compiled some | 63 For polymer.dart versions of the tutorial's Web UI apps, |
| 64 <a href="https://github.com/dart-lang/dart-tutorials-samples/blob/master/web/t
o-polymer-notes.txt" target="_blank">notes</a> | 64 check out the tutorial's |
| 65 along the way. | 65 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/" |
| 66 Here is source code for the polymer versions of the three examples from this t
arget: | 66 target="_blank">code repo</a> on github. |
| 67 <ul> | |
| 68 <li> | |
| 69 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/w
eb/target07-polymer/adlibitum" | |
| 70 target="_blank">adlibitum</a> | |
| 71 </li> | |
| 72 <li> | |
| 73 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/w
eb/target07-polymer/simplehangman" | |
| 74 target="_blank">simplehangman</a> | |
| 75 </li> | |
| 76 <li> | |
| 77 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/w
eb/target07-polymer/hangman" | |
| 78 target="_blank">hangman</a> | |
| 79 </li> | |
| 80 </ul> | |
| 81 </aside> | 67 </aside> |
| 82 | 68 |
| 83 <hr> | 69 <hr> |
| 84 | 70 |
| 85 The Web UI package implements the <template> tag, | 71 The Web UI package implements the <template> tag, |
| 86 which you can use directly in your HTML. | 72 which you can use directly in your HTML. |
| 87 Templates define UI elements that are instantiated | 73 Templates define UI elements that are instantiated |
| 88 only under specific circumstances. | 74 only under specific circumstances. |
| 89 You can use templates to define the structure of a custom element, | 75 You can use templates to define the structure of a custom element, |
| 90 to instantiate UI elements based on a boolean condition, | 76 to instantiate UI elements based on a boolean condition, |
| (...skipping 243 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 334 Sigmund Cherem's article, | 320 Sigmund Cherem's article, |
| 335 <a href="/articles/dart-web-components/">Web UI Package</a>, | 321 <a href="/articles/dart-web-components/">Web UI Package</a>, |
| 336 contains several interactive examples on the page | 322 contains several interactive examples on the page |
| 337 and the corresponding source code. | 323 and the corresponding source code. |
| 338 </li> | 324 </li> |
| 339 </ul> | 325 </ul> |
| 340 | 326 |
| 341 {% endcapture %} | 327 {% endcapture %} |
| 342 | 328 |
| 343 {% include tutorial.html %} | 329 {% include tutorial.html %} |
| OLD | NEW |