OLD | NEW |
(Empty) | |
| 1 --- |
| 2 layout: default |
| 3 title: Defining a custom element |
| 4 live_example_url: /docs/tutorials/polymer-intro/examples/stopwatch/out/web/index
.html |
| 5 header: |
| 6 css: ["/samples/samples.css"] |
| 7 --- |
| 8 |
| 9 ## {{ page.title }} |
| 10 |
| 11 Start and stop the stopwatch. Reset the stopwatch to 00:00 using the Reset |
| 12 button. |
| 13 |
| 14 This example shows how to implement a custom element using Polymer. |
| 15 |
| 16 In this example, the stopwatch is a custom element. The definition of a custom |
| 17 element encapsulates and hides the implementation details. With custom |
| 18 elements, you can easily create new kinds of elements that have semantically |
| 19 meaningful tags and that are easy to share, reuse, and read. For example, to |
| 20 put a stopwatch element on the page, you write: |
| 21 |
| 22 `<tute-stopwatch></tute-stopwatch>` |
| 23 |
| 24 The counting text is a String in Dart that changes dynamically based on a |
| 25 Timer. Polymer’s one-way data binding feature keeps the UI in sync with the |
| 26 data as it changes. |
| 27 |
| 28 Declarative event handler binding lets you set up event handlers for UI |
| 29 elements on the HTML-side. |
| 30 |
| 31 Read this [tutorial](/docs/tutorials/polymer-intro) for |
| 32 more detail, or read the |
| 33 [source](https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/sto
pwatch). |
| 34 |
| 35 |
| 36 <iframe class="running-app-frame" |
| 37 style="height:300px;width:300px;" |
| 38 src="{{page.live_example_url}}"> |
| 39 </iframe> |
| 40 |
| 41 See all [samples](/samples/) |
OLD | NEW |