| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | 3 Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file |
| 4 for details. All rights reserved. Use of this source code is governed by a | 4 for details. All rights reserved. Use of this source code is governed by a |
| 5 BSD-style license that can be found in the LICENSE file. | 5 BSD-style license that can be found in the LICENSE file. |
| 6 --> | 6 --> |
| 7 <html> | 7 <html> |
| 8 <body> | 8 <body> |
| 9 <element name="x-editable-label" extends="div" apply-author-styles> | 9 <element name="x-editable-label" extends="div" apply-author-styles> |
| 10 <template> | 10 <template> |
| 11 <template if="!editing"> | 11 <template if="!editing"> |
| 12 <label class='edit-label' on-double-click="edit()">{{value}}</label> | 12 <label class='edit-label' on-double-click="edit()">{{value}}</label> |
| 13 </template> | 13 </template> |
| 14 <template if="editing"> | 14 <template if="editing"> |
| 15 <form on-submit="update($event)"> | 15 <form on-submit="update($event)"> |
| 16 <input id="edit" class="edit {{editing ? 'editing' : ''}}" | 16 <input id="edit" class="edit {{editing ? 'editing' : ''}}" |
| 17 on-blur="update($event)" | 17 on-blur="update($event)" |
| 18 on-key-up="maybeCancel($event)"> | 18 on-key-up="maybeCancel($event)"> |
| 19 </form> | 19 </form> |
| 20 </template> | 20 </template> |
| 21 </template> | 21 </template> |
| 22 <script type="application/dart"> | 22 <script type="application/dart"> |
| 23 import 'dart:html'; | 23 import 'dart:html'; |
| 24 import 'package:web_components/web_components.dart'; | 24 import 'package:web_ui/web_ui.dart'; |
| 25 | 25 |
| 26 /** | 26 /** |
| 27 * Label whose [value] can be edited by double clicking. When editing, it | 27 * Label whose [value] can be edited by double clicking. When editing, it |
| 28 * displays a form and input element, otherwise it displays the label. You | 28 * displays a form and input element, otherwise it displays the label. You |
| 29 * can enable two-way binding like this: | 29 * can enable two-way binding like this: |
| 30 * | 30 * |
| 31 * <x-editable-label bind-value="{{dartAsignableValue}}"> | 31 * <x-editable-label bind-value="{{dartAsignableValue}}"> |
| 32 * </x-editable-label> | 32 * </x-editable-label> |
| 33 */ | 33 */ |
| 34 class EditableLabel extends WebComponent { | 34 class EditableLabel extends WebComponent { |
| (...skipping 29 matching lines...) Expand all Loading... |
| 64 void maybeCancel(KeyboardEvent e) { | 64 void maybeCancel(KeyboardEvent e) { |
| 65 if (e.keyCode == KeyCode.ESC) { | 65 if (e.keyCode == KeyCode.ESC) { |
| 66 editing = false; | 66 editing = false; |
| 67 } | 67 } |
| 68 } | 68 } |
| 69 } | 69 } |
| 70 </script> | 70 </script> |
| 71 </element> | 71 </element> |
| 72 </body> | 72 </body> |
| 73 </html> | 73 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 11465028:
rename web_components -> web_ui (Closed)
Base URL: https://github.com/dart-lang/web-ui.git@master