├── .analysis_options ├── .gitignore ├── README.md ├── pubspec.lock ├── pubspec.yaml └── web ├── basics ├── binding_to_a_complex_object │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── binding_to_a_field │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── binding_to_a_map │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── binding_to_a_native_html_element │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── binding_to_a_style │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── creating_a_read_only_property │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── dynamically_adding_a_polymer_element_to_the_dom │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── finding_shadow_dom_elements │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html └── using_a_computed_property │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── control_flow ├── conditionally_hiding_an_element │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── getting_the_iteration_index_when_looping_over_a_collection │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── looping_over_a_collection_using_iterative_templates │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── using_conditional_templates │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html └── using_template_repeat_with_a_table_row │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── events └── using_custom_events │ ├── README.md │ ├── child_element.dart │ ├── child_element.html │ ├── index.dart │ ├── index.html │ ├── parent_element.dart │ └── parent_element.html ├── forms ├── binding_a_boolean_field_to_a_checkbox │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── binding_to_a_text_input │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── binding_to_a_textarea │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── implementing_simple_autocompletion │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── match_element.dart │ ├── match_element.html │ ├── my_element.dart │ └── my_element.html ├── implementing_simple_validation │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── selecting_many_items_using_checkboxes │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html └── selecting_one_item_using_radio_buttons │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── index.html ├── insertion_points ├── accessing_the_dom_inside_a_content_tag │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── creating_an_insertion_point_using_the_content_tag │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── creating_insertion_points_using_the_select_attribute │ ├── README.md │ ├── child_element.dart │ ├── child_element.html │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html └── retrieving_the_insertion_points_for_distributed_nodes │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── layout_attributes ├── nesting_flex_layouts │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── using_flex │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html └── using_layout_classes │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_horizontal_element.dart │ ├── my_horizontal_element.html │ ├── my_vertical_element.dart │ └── my_vertical_element.html ├── observing_changes ├── observing_changes_to_element_fields │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── observing_changes_to_light_dom_children │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html └── watching_for_changes_to_a_nested_object │ ├── README.md │ ├── index.dart │ ├── index.html │ ├── my_element.dart │ └── my_element.html ├── polymer_elements └── paper_toolbar │ ├── adding_a_menu_button │ ├── README.md │ └── index.html │ ├── adding_button_rows │ ├── README.md │ └── index.html │ ├── changing_the_toolbar_size │ ├── README.md │ └── index.html │ └── using_paper_toolbar │ ├── README.md │ └── index.html └── styling_elements ├── applying_styles_by_piercing_shadow_dom_boundaries ├── README.md ├── child_element.dart ├── child_element.html ├── index.dart ├── index.html ├── my_element.dart └── my_element.html ├── defining_styles_inside_a_polymer_element ├── README.md ├── index.dart ├── index.html ├── my_element.dart └── my_element.html ├── programmatically_changing_the_styles_of_an_element ├── README.md ├── index.dart ├── index.html ├── my_element.dart └── my_element.html ├── styling_distributed_nodes ├── README.md ├── index.dart ├── index.html ├── my_element.dart └── my_element.html ├── using_host_context_to_theme_an_element ├── README.md ├── index.dart ├── index.html ├── my_element.dart └── my_element.html ├── using_host_with_a_css_selector ├── README.md ├── index.dart ├── index.html ├── my_element.dart └── my_element.html └── using_host_with_pseudo_classes ├── README.md ├── index.dart ├── index.html ├── my_element.dart └── my_element.html /.analysis_options: -------------------------------------------------------------------------------- 1 | analyzer: 2 | strong-mode: true 3 | linter: 4 | rules: 5 | # - always_declare_return_types 6 | # - always_specify_types 7 | # - avoid_as 8 | - camel_case_types 9 | - constant_identifier_names 10 | - empty_constructor_bodies 11 | # - implementation_imports 12 | - library_names 13 | - library_prefixes 14 | - non_constant_identifier_names 15 | - one_member_abstracts 16 | - package_api_docs 17 | - package_prefixed_library_names 18 | # - prefer_is_not_empty 19 | - slash_for_doc_comments 20 | - super_goes_last 21 | # - type_annotate_public_apis 22 | - type_init_formals 23 | - unnecessary_brace_in_string_interp 24 | - unnecessary_getters_setters 25 | - package_names 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | packages 2 | .packages 3 | .pub 4 | .idea 5 | /build 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Polymer Snippets 2 | 3 | 4 | Small, useful, snippets/samples that show how to do things the Polymer way. 5 | 6 | Port of polymer.js snippets in 7 | [https://github.com/PolymerLabs/polymer-snippets](https://github.com/PolymerLabs/polymer-snippets). 8 | 9 | ## Repo structure 10 | 11 | All snippets go in `web/`. 12 | 13 | Each snippet should have its own directory. Here is a typical list of files for 14 | a snippet: 15 | 16 | - `my_element.html`: the HTML for `` 17 | - `my_element.dart`: the Dart code for `` 18 | - `index.html`: the entry point for the snippet. Imports ``. 19 | - `README.md`: the documentation for the snippet. This should mirror the 20 | documentation in the original as much as possible. 21 | 22 | Unless there is a compelling reason to do so, name your element ``. 23 | 24 | Be sure to add the snippet to the `entry_points` list in `pubspec.yaml`. 25 | 26 | ## Keeping track of upstream commits 27 | 28 | When porting a `polymer.js` snippet, be sure to reference the original, and 29 | include the commit ID. For example: 30 | 31 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/ca250355c6d4076f16353fb386c07ca106d6fc4e/snippets/forms/binding-to-a-text-input.html 32 | 33 | See https://help.github.com/articles/getting-permanent-links-to-files#press-y-to-permalink-to-a-file-in-a-specific-commit 34 | for details on how to get a link to the commit ID. 35 | 36 | ## Making your snippets Dart-y 37 | 38 | All snippets should follow the [Dart Style Guide](https://www.dartlang.org/articles/style-guide/). 39 | 40 | Before creating a pull request, please run the sample in Dart Editor, ensuring 41 | that it runs in both JS and Dartium without errors or warnings. 42 | 43 | ## Contents 44 | 45 | ### Basics 46 | - [Binding to a field](web/basics/binding_to_a_field/) 47 | - [Binding to a complex object](web/basics/binding_to_a_complex_object/) 48 | - [Binding to a map](web/basics/binding_to_a_map/) 49 | - [Binding to a native HTML element](web/basics/binding_to_a_native_html_element/) 50 | - [Binding to a style](web/basics/binding_to_a_style/) 51 | - [Dynamically adding a Polymer element to the DOM](web/basics/dynamically_adding_a_polymer_element_to_the_dom/) 52 | - [Finding Shadow DOM elements](web/basics/finding_shadow_dom_elements/) 53 | - [Using a computed property](web/basics/using_a_computed_property/) 54 | - [Creating a read-only property](web/basics/creating_a_read_only_property/) 55 | 56 | ### Control flow 57 | 58 | - [Conditionally hiding an element](web/control_flow/conditionally_hiding_an_element/) 59 | - [Getting the iteration index when looping over a collection](web/control_flow/getting_the_iteration_index_when_looping_over_a_collection/) 60 | - [Looping over a collection using iterative templates](web/control_flow/looping_over_a_collection_using_iterative_templates/) 61 | - [Using conditional templates](web/control_flow/using_conditional_templates/) 62 | - [Using template repeat with a table row](web/control_flow/using_template_repeat_with_a_table_row/) 63 | 64 | ### Insertion points 65 | 66 | - [Creating an insertion point using the content tag](web/insertion_points/creating_an_insertion_point_using_the_content_tag/) 67 | - [Creating insertions using the select attribute](web/insertion_points/creating_insertion_points_using_the_select_attribute/) 68 | - [Accessing the DOM inside a content tag](web/insertion_points/accessing_the_dom_inside_a_content_tag/) 69 | - [Retrieving the insertion points for distributed nodes](web/insertion_points/retrieving_the_insertion_points_for_distributed_nodes/) 70 | 71 | ### Observing changes 72 | 73 | - [Observing changes to element fields](web/observing_changes/observing_changes_to_element_fields/) 74 | - [Watching for changes to a nested objects](web/observing_changes/watching_for_changes_to_a_nested_object/) 75 | 76 | ### Forms 77 | 78 | - [Binding a boolean field to a checkbox](web/forms/binding_a_boolean_field_to_a_checkbox/) 79 | - [Binding to a text input](web/forms/binding_to_a_text_input/) 80 | - [Binding to a textarea](web/forms/binding_to_a_textarea/) 81 | - [Selecting one item using radio buttons](web/forms/selecting_one_item_using_radio_buttons/) 82 | - [Selecting many items using checkboxes](web/forms/selecting_many_items_using_checkboxes/) 83 | - [Implementing simple validation](web/forms/implementing_simple_validation/) 84 | - [Implementing simple autocompletion](web/forms/implementing_simple_autocompletion/) 85 | 86 | ### Events 87 | 88 | - [Using custom events](web/events/using_custom_events/) 89 | 90 | ### Styling elements 91 | 92 | - [Applying styles by piercing Shadow DOM boundaries](web/styling_elements/applying_styles_by_piercing_shadow_dom_boundaries/) 93 | - [Defining styles inside a Polymer element](web/styling_elements/defining_styles_inside_a_polymer_element/) 94 | - [Programatically changing the styles of an element](web/styling_elements/programmatically_changing_the_styles_of_an_element/) 95 | - [Styling distributed nodes](web/styling_elements/styling_distributed_nodes/) 96 | - [Using host-context to theme an element](web/styling_elements/using_host_context_to_theme_an_element/) 97 | - [Using :host with a CSS selector](web/styling_elements/using_host_with_a_css_selector/) 98 | - [Using :host with pseudo classes](web/styling_elements/using_host_with_pseudo_classes/) 99 | 100 | ### Layout attributes 101 | 102 | - [Using layout attributes](web/layout_attributes/using_layout_classes/) 103 | - [Using flex](web/layout_attributes/using_flex/) 104 | - [Nesting flex layouts](web/layout_attributes/nesting_flex_layouts/) 105 | 106 | ### Polymer elements 107 | 108 | Samples using [Polymer elements](https://elements.polymer-project.org/). 109 | 110 | #### Paper toolbar 111 | 112 | - [Using paper-toolbar](web/polymer_elements/paper_toolbar/using_paper_toolbar/) 113 | - [Adding a menu button](web/polymer_elements/paper_toolbar/adding_a_menu_button/) 114 | - [Adding button rows](web/polymer_elements/paper_toolbar/adding_button_rows/) 115 | - [Changing toolbar size](web/polymer_elements/paper_toolbar/changing_the_toolbar_size/) 116 | 117 | -------------------------------------------------------------------------------- /pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See http://pub.dartlang.org/doc/glossary.html#lockfile 3 | packages: 4 | analyzer: 5 | description: analyzer 6 | source: hosted 7 | version: "0.27.1" 8 | args: 9 | description: args 10 | source: hosted 11 | version: "0.13.3+3" 12 | async: 13 | description: async 14 | source: hosted 15 | version: "1.8.0" 16 | barback: 17 | description: barback 18 | source: hosted 19 | version: "0.15.2+7" 20 | boolean_selector: 21 | description: boolean_selector 22 | source: hosted 23 | version: "1.0.0" 24 | browser: 25 | description: browser 26 | source: hosted 27 | version: "0.10.0+2" 28 | charcode: 29 | description: charcode 30 | source: hosted 31 | version: "1.1.0" 32 | cli_util: 33 | description: cli_util 34 | source: hosted 35 | version: "0.0.1+2" 36 | code_transformers: 37 | description: code_transformers 38 | source: hosted 39 | version: "0.4.0" 40 | collection: 41 | description: collection 42 | source: hosted 43 | version: "1.4.0" 44 | crypto: 45 | description: crypto 46 | source: hosted 47 | version: "0.9.1" 48 | csslib: 49 | description: csslib 50 | source: hosted 51 | version: "0.12.2" 52 | dart_style: 53 | description: dart_style 54 | source: hosted 55 | version: "0.2.4" 56 | glob: 57 | description: glob 58 | source: hosted 59 | version: "1.1.0" 60 | html: 61 | description: html 62 | source: hosted 63 | version: "0.12.2+1" 64 | http_multi_server: 65 | description: http_multi_server 66 | source: hosted 67 | version: "2.0.0" 68 | http_parser: 69 | description: http_parser 70 | source: hosted 71 | version: "2.1.0" 72 | initialize: 73 | description: initialize 74 | source: hosted 75 | version: "0.6.2+1" 76 | logging: 77 | description: logging 78 | source: hosted 79 | version: "0.11.2" 80 | matcher: 81 | description: matcher 82 | source: hosted 83 | version: "0.12.0+1" 84 | mime: 85 | description: mime 86 | source: hosted 87 | version: "0.9.3" 88 | package_config: 89 | description: package_config 90 | source: hosted 91 | version: "0.1.3" 92 | path: 93 | description: path 94 | source: hosted 95 | version: "1.3.9" 96 | plugin: 97 | description: plugin 98 | source: hosted 99 | version: "0.1.0" 100 | polymer: 101 | description: polymer 102 | source: hosted 103 | version: "1.0.0-rc.15" 104 | polymer_elements: 105 | description: polymer_elements 106 | source: hosted 107 | version: "1.0.0-rc.8" 108 | polymer_interop: 109 | description: polymer_interop 110 | source: hosted 111 | version: "1.0.0-rc.8" 112 | pool: 113 | description: pool 114 | source: hosted 115 | version: "1.2.1" 116 | pub_semver: 117 | description: pub_semver 118 | source: hosted 119 | version: "1.2.3" 120 | reflectable: 121 | description: reflectable 122 | source: hosted 123 | version: "0.5.2" 124 | shelf: 125 | description: shelf 126 | source: hosted 127 | version: "0.6.5" 128 | shelf_static: 129 | description: shelf_static 130 | source: hosted 131 | version: "0.2.3+3" 132 | shelf_web_socket: 133 | description: shelf_web_socket 134 | source: hosted 135 | version: "0.1.0" 136 | source_map_stack_trace: 137 | description: source_map_stack_trace 138 | source: hosted 139 | version: "1.0.4" 140 | source_maps: 141 | description: source_maps 142 | source: hosted 143 | version: "0.10.1" 144 | source_span: 145 | description: source_span 146 | source: hosted 147 | version: "1.2.1" 148 | stack_trace: 149 | description: stack_trace 150 | source: hosted 151 | version: "1.6.0" 152 | stream_channel: 153 | description: stream_channel 154 | source: hosted 155 | version: "1.3.1" 156 | string_scanner: 157 | description: string_scanner 158 | source: hosted 159 | version: "0.1.4+1" 160 | test: 161 | description: test 162 | source: hosted 163 | version: "0.12.11" 164 | utf: 165 | description: utf 166 | source: hosted 167 | version: "0.9.0+3" 168 | watcher: 169 | description: watcher 170 | source: hosted 171 | version: "0.9.7" 172 | web_components: 173 | description: web_components 174 | source: hosted 175 | version: "0.12.2+2" 176 | when: 177 | description: when 178 | source: hosted 179 | version: "0.2.0" 180 | which: 181 | description: which 182 | source: hosted 183 | version: "0.1.3" 184 | yaml: 185 | description: yaml 186 | source: hosted 187 | version: "2.1.8" 188 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: polymer_dart_samples 2 | description: Port of https://github.com/PolymerLabs/polymer-snippets 3 | environment: 4 | sdk: '>=1.8.2 <2.0.0' 5 | dependencies: 6 | browser: ^0.10.0+2 7 | polymer: ^1.0.0-rc.12 8 | polymer_elements: ^1.0.0-rc.5 9 | web_components: ^0.12.2 10 | transformers: 11 | - polymer: 12 | entry_points: 13 | - web/basics/binding_to_a_field/index.html 14 | - web/basics/binding_to_a_complex_object/index.html 15 | - web/basics/binding_to_a_map/index.html 16 | - web/basics/binding_to_a_native_html_element/index.html 17 | - web/basics/binding_to_a_style/index.html 18 | - web/basics/finding_shadow_dom_elements/index.html 19 | - web/basics/creating_a_read_only_property/index.html 20 | - web/basics/dynamically_adding_a_polymer_element_to_the_dom/index.html 21 | - web/basics/using_a_computed_property/index.html 22 | 23 | - web/control_flow/conditionally_hiding_an_element/index.html 24 | - web/control_flow/getting_the_iteration_index_when_looping_over_a_collection/index.html 25 | - web/control_flow/looping_over_a_collection_using_iterative_templates/index.html 26 | - web/control_flow/using_conditional_templates/index.html 27 | - web/control_flow/using_template_repeat_with_a_table_row/index.html 28 | 29 | - web/insertion_points/creating_an_insertion_point_using_the_content_tag/index.html 30 | - web/insertion_points/creating_insertion_points_using_the_select_attribute/index.html 31 | - web/insertion_points/accessing_the_dom_inside_a_content_tag/index.html 32 | - web/insertion_points/retrieving_the_insertion_points_for_distributed_nodes/index.html 33 | 34 | - web/observing_changes/observing_changes_to_element_fields/index.html 35 | - web/observing_changes/observing_changes_to_light_dom_children/index.html 36 | - web/observing_changes/watching_for_changes_to_a_nested_object/index.html 37 | 38 | - web/forms/binding_a_boolean_field_to_a_checkbox/index.html 39 | - web/forms/binding_to_a_text_input/index.html 40 | - web/forms/binding_to_a_textarea/index.html 41 | - web/forms/implementing_simple_autocompletion/index.html 42 | - web/forms/implementing_simple_validation/index.html 43 | - web/forms/selecting_one_item_using_radio_buttons/index.html 44 | - web/forms/selecting_many_items_using_checkboxes/index.html 45 | 46 | - web/events/using_custom_events/index.html 47 | 48 | - web/styling_elements/applying_styles_by_piercing_shadow_dom_boundaries/index.html 49 | - web/styling_elements/defining_styles_inside_a_polymer_element/index.html 50 | - web/styling_elements/programmatically_changing_the_styles_of_an_element/index.html 51 | - web/styling_elements/styling_distributed_nodes/index.html 52 | - web/styling_elements/using_host_context_to_theme_an_element/index.html 53 | - web/styling_elements/using_host_with_a_css_selector/index.html 54 | - web/styling_elements/using_host_with_pseudo_classes/index.html 55 | 56 | - web/layout_attributes/nesting_flex_layouts/index.html 57 | - web/layout_attributes/using_flex/index.html 58 | - web/layout_attributes/using_layout_classes/index.html 59 | 60 | - web/polymer_elements/paper_toolbar/adding_a_menu_button/index.html 61 | - web/polymer_elements/paper_toolbar/adding_button_rows/index.html 62 | - web/polymer_elements/paper_toolbar/changing_the_toolbar_size/index.html 63 | - web/polymer_elements/paper_toolbar/using_paper_toolbar/index.html 64 | 65 | - $dart2js: 66 | $include: '**/*.bootstrap.initialize.dart' 67 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_complex_object/README.md: -------------------------------------------------------------------------------- 1 | # Binding to a Complex Object 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/bcd7951a63bb178e8752da2939a37dc955c42b1a/snippets/basics/binding-to-a-complex-object.html 4 | 5 | Shows data binding to a complex property. 6 | Use an element property in a template using **double mustaches** (`{{}}` or 7 | `[[]]`), and use the **dot** operator ('.') to access child properties: 8 | 9 | 15 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_complex_object/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_complex_object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_complex_object/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | class Name extends JsProxy { 8 | @reflectable String first; 9 | @reflectable String last; 10 | Name(this.first, this.last); 11 | } 12 | 13 | class Company extends JsProxy { 14 | @reflectable String name; 15 | Company(this.name); 16 | } 17 | 18 | class Person extends JsProxy { 19 | @reflectable Name name; 20 | @reflectable String title; 21 | @reflectable Company company; 22 | Person(this.name, this.title, this.company); 23 | } 24 | 25 | @PolymerRegister('my-element') 26 | class MyElement extends PolymerElement { 27 | @property Person person; 28 | 29 | MyElement.created() : super.created(); 30 | 31 | ready() { 32 | set( 33 | 'person', 34 | new Person(new Name('Kathy', 'Walrath'), 'Writer Extraordinaire', 35 | new Company('Google'))); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_complex_object/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_field/README.md: -------------------------------------------------------------------------------- 1 | # Binding to a Field 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/f5651613ea5db9c2e50a2f4df8f27c64c07755db/snippets/basics/binding-to-a-property.html 4 | 5 | Shows simple use of **data binding** in a Polymer element. 6 | 7 | For Polymer elements, the model is the element itself, and any 8 | @property field is available in the template within **double mustaches** 9 | (`{{}}` or `[[]]`). 10 | 11 | See 12 | [binding-to-a-text-input.html](../forms/binding-to-a-text-input.html) 13 | for a version of this snippet where the `color` property can be modified 14 | using a text ``, resulting in **two-way data binding**. 15 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_field/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_field/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_field/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | @property String color = 'red'; 10 | 11 | MyElement.created() : super.created(); 12 | } 13 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_field/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_map/README.md: -------------------------------------------------------------------------------- 1 | # Binding to a Map 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/bcd7951a63bb178e8752da2939a37dc955c42b1a/snippets/basics/binding-to-a-complex-object.html 4 | using a Dart map. 5 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_map/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_map/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | @property Map person = { 10 | 'name': {'first': 'Kathy', 'last': 'Walrath'}, 11 | 'title': 'Writer Extraordinaire', 12 | 'company': {'name': 'Google'} 13 | }; 14 | 15 | MyElement.created() : super.created(); 16 | } 17 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_map/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_native_html_element/README.md: -------------------------------------------------------------------------------- 1 | # Binding to a Native HTML Element 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/bcd7951a63bb178e8752da2939a37dc955c42b1a/snippets/basics/binding-to-a-native-html-element.html 4 | 5 | Shows how to bind the value of a Polymer element property to the value 6 | of a native HTML element attribute. -------------------------------------------------------------------------------- /web/basics/binding_to_a_native_html_element/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_native_html_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_native_html_element/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | @property var val1 = 10; 10 | @property var val2 = 10; 11 | 12 | MyElement.created() : super.created(); 13 | } 14 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_native_html_element/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_style/README.md: -------------------------------------------------------------------------------- 1 | # Binding to a Style 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/bcd7951a63bb178e8752da2939a37dc955c42b1a/snippets/basics/binding-to-a-style.html 4 | 5 | Shows use of data binding to set an element's inline style. 6 | In this example, as the value of `color` changes, 7 | the value of `

`'s 'color' inline style updates. 8 | Read 9 | [A Guide to Styling Elements](http://www.polymer-project.org/articles/styling-elements.html). 10 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_style/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_style/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_style/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | @property String color = 'red'; 10 | 11 | @reflectable 12 | String colorStyle(String color) => 'color: $color;'; 13 | 14 | MyElement.created() : super.created(); 15 | 16 | @reflectable 17 | void toggleColor([_, __]) { 18 | set('color', color == 'red' ? 'green' : 'red'); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /web/basics/binding_to_a_style/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /web/basics/creating_a_read_only_property/README.md: -------------------------------------------------------------------------------- 1 | # Creating a One Time Binding 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/f5651613ea5db9c2e50a2f4df8f27c64c07755db/snippets/basics/creating-a-one-time-binding.html 4 | 5 | Shows simple use of **read-only property** in a Polymer element. 6 | Use a [readonly property](https://github.com/dart-lang/polymer-dart/wiki/properties#read-only-properties) 7 | to set up a one-way binding. 8 | Read the 9 | [official documentation for read-only property](https://www.polymer-project.org/1.0/docs/devguide/properties.html#read-only). 10 | -------------------------------------------------------------------------------- /web/basics/creating_a_read_only_property/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/basics/creating_a_read_only_property/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/basics/creating_a_read_only_property/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | String _readonlyColor; 10 | @property String get readonlyColor => _readonlyColor ??= color; 11 | @property String color = 'red'; 12 | 13 | MyElement.created() : super.created(); 14 | } 15 | -------------------------------------------------------------------------------- /web/basics/creating_a_read_only_property/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/basics/dynamically_adding_a_polymer_element_to_the_dom/README.md: -------------------------------------------------------------------------------- 1 | # Dynamically adding a Polymer element to the DOM 2 | 3 | Ports https://github.com/PolymerLabs/polymer-patterns/blob/1036c6aa6296982e2a638ef4cdecd9f3d9cae1cf/snippets/basics/dynamically-adding-a-custom-element-to-the-dom.html -------------------------------------------------------------------------------- /web/basics/dynamically_adding_a_polymer_element_to_the_dom/index.dart: -------------------------------------------------------------------------------- 1 | import 'dart:html'; 2 | import 'package:polymer/polymer.dart'; 3 | import 'my_element.dart'; 4 | 5 | main() async { 6 | await initPolymer(); 7 | document.body.children.add(new MyElement() 8 | ..id = 'my-element-id' 9 | ..greeting = 'Hello, good morning'); 10 | } 11 | -------------------------------------------------------------------------------- /web/basics/dynamically_adding_a_polymer_element_to_the_dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/basics/dynamically_adding_a_polymer_element_to_the_dom/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'dart:html' show Element; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | import 'package:polymer/polymer.dart'; 7 | 8 | @PolymerRegister('my-element') 9 | class MyElement extends PolymerElement { 10 | String _greeting; 11 | @property String get greeting => _greeting; 12 | // TODO(zoechi) remove `@reflectable` when the fix is available dart-lang/reflectable#42 13 | @reflectable set greeting(String value) => set('greeting', value); 14 | 15 | MyElement.created() : super.created(); 16 | 17 | factory MyElement() => new Element.tag('my-element') as MyElement; 18 | } 19 | -------------------------------------------------------------------------------- /web/basics/dynamically_adding_a_polymer_element_to_the_dom/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /web/basics/finding_shadow_dom_elements/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Finding shadow DOM elements 3 | 4 | Shows how to find elements inside the shadow DOM. 5 | 6 | ## The code 7 | 8 | * [my_element.dart](https://github.com/dart-lang/polymer-dart-snippets/blob/computed-property-readme/web/basics/finding_shadow_dom_elements/my_element.dart): 9 | The Dart code for `` 10 | * [my_element.html](https://github.com/dart-lang/polymer-dart-snippets/blob/computed-property-readme/web/basics/finding_shadow_dom_elements/my_element.html): 11 | The HTML code for `` 12 | * [index.html](https://github.com/dart-lang/polymer-dart-snippets/blob/computed-property-readme/web/basics/finding_shadow_dom_elements/index.html): 13 | An HTML file that uses `` 14 | 15 | ## How it works 16 | 17 | The [Shadow DOM](http://robdodson.me/blog/2013/08/26/shadow-dom-introduction/) 18 | allows web designers to create UI widgets where the implementation details 19 | are encapsulated—they are not stored in the main document DOM. 20 | 21 | Like the DOM, the shadow DOM is organized as a tree of nodes. 22 | If a node has been tagged with an `id` attribute, you can find 23 | it using the `$['myDiv']` syntax. This Polymer feature, called 24 | _automatic node finding_, returns a reference to the named element. 25 | 26 | The MyElement class (`my_element.dart`) defines the `findNodes` method. 27 | 28 | void findNodes() { 29 | $['myDiv'].querySelector('p').text = 'New content'; 30 | } 31 | 32 | This method finds the node tagged with `myDiv` and replaces the 33 | content of its paragraph (`

`) with the text, `New content`. 34 | 35 | In the template code (`my_element.html`), the `myDiv` element 36 | includes a button. 37 | 38 |

39 |

Old content

40 | 41 |
42 | 43 | When the button is tapped, the `findNode` method runs, 44 | and the paragraph updates. 45 | 46 | ## More information 47 | 48 | * [finding-shadow-dom-elements.html](https://github.com/PolymerLabs/polymer-snippets/blob/f5651613ea5db9c2e50a2f4df8f27c64c07755db/snippets/basics/finding-shadow-dom-elements.html): 49 | The JavaScript version of this example 50 | 51 | -------------------------------------------------------------------------------- /web/basics/finding_shadow_dom_elements/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/basics/finding_shadow_dom_elements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/basics/finding_shadow_dom_elements/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | 11 | @reflectable 12 | void findNodes([_, __]) { 13 | $$('#myDiv > p').text = 'New content'; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /web/basics/finding_shadow_dom_elements/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /web/basics/using_a_computed_property/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Using a computed property 3 | 4 | Shows how to to bind to a property that is computed based on other 5 | property values. 6 | 7 | ## The code 8 | 9 | * [my_element.dart](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/basics/using_a_computed_property/my_element.dart): 10 | The Dart code for `` 11 | * [my_element.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/basics/using_a_computed_property/my_element.html): 12 | The HTML code for `` 13 | * [index.html](https://github.com/dart-lang/polymer-dart-snippets/blob/computed-property-readme/web/basics/using_a_computed_property/index.html): 14 | An HTML file that uses `` 15 | 16 | ## How it works 17 | 18 | The MyElement class (`my_element.dart`) defines three properties: 19 | 20 | * `firstName` 21 | * `lastName` 22 | * `fullName` 23 | 24 | The `fullName` property is _computed_ from `firstName` and `lastName`, 25 | which must be defined using the `@property` annotation. A computed property, 26 | defined using the `@Property(computed: 'computation(args)')` annotation, has the 27 | form: 28 | 29 | @Property(computed: 'computeFullName(firstName,lastName') 30 | String fullName; 31 | 32 | The function is used to compute the value of the property. For example: 33 | 34 | @reflectable 35 | String computeFullName(String firstName, String lastName) => 36 | '$firstName $lastName'; 37 | 38 | The template code (`my_element.html`) uses _binding_ notation 39 | (`{{fullName}}`) to dynamically bind the named HTML object to the Dart 40 | variable of the same name. When either value changes, both values update. 41 | 42 | ## More information 43 | 44 | * [Computed properties](https://github.com/dart-lang/polymer-dart/wiki/properties#computed-properties): 45 | The JavaScript version of this example 46 | 47 | -------------------------------------------------------------------------------- /web/basics/using_a_computed_property/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/basics/using_a_computed_property/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/basics/using_a_computed_property/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | @property String firstName = 'Seth'; 11 | @property String lastName = 'Ladd'; 12 | 13 | @Property(computed: 'computeFullName(firstName,lastName)') 14 | String fullName = ''; 15 | 16 | @reflectable 17 | String computeFullName(String firstName, String lastName) => 18 | '$firstName $lastName'; 19 | } 20 | -------------------------------------------------------------------------------- /web/basics/using_a_computed_property/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/control_flow/conditionally_hiding_an_element/README.md: -------------------------------------------------------------------------------- 1 | # Conditionally hiding an element 2 | 3 | Shows **conditional boolean attributes** using the **?=** syntax. 4 | 5 | ## The code 6 | 7 | * [my_element.dart](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/control_flow/conditionally_hiding_an_element/my_element.dart): 8 | The Dart code for `` 9 | * [my_element.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/control_flow/conditionally_hiding_an_element/my_element.html): 10 | The HTML code for `` 11 | * [index.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/control_flow/conditionally_hiding_an_element/index.html): 12 | An HTML file that uses `` 13 | 14 | ## How it works 15 | 16 | You can set an element's `hidden` property using `hidden$=`. For example: 17 | 18 |

19 | ... 20 |

21 | 22 | If `shortView` is true the paragraph is displayed, otherwise the paragraph 23 | is hidden. 24 | 25 | The MyElement class (`my_element.dart`) defines the `toggleView` method 26 | which toggles the boolean variable, `shortView`. This variable must 27 | be defined as observable. 28 | 29 | @property bool shortView = true; 30 | 31 | @reflectable 32 | void toggleView([_, __]) { 33 | set('shortView', !this.shortView); 34 | } 35 | 36 | The template code (`my_element.html`) defines a paragraph where the 37 | `hidden` tag is bound to the value of `shortView`. 38 | 39 |
The Big Lebowski
40 |

41 | 'Dude' Lebowski, mistaken for a millionaire Lebowski, seeks restitution 42 | for his ruined rug and enlists his bowling buddies to help get it. 43 |

44 | 45 | 46 | Tapping the provided button calls the `toggleView` method, which toggles the 47 | display of the paragraph. 48 | 49 | ## More information 50 | 51 | * [conditionally-hiding-an-element.html](https://github.com/PolymerLabs/polymer-snippets/blob/35a0312c5645f2538ccd3fc20ef3d569c2d99d47/snippets/control-flow/conditionally-hiding-an-element.html): 52 | The JavaScript version of this example 53 | 54 | -------------------------------------------------------------------------------- /web/control_flow/conditionally_hiding_an_element/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/control_flow/conditionally_hiding_an_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/control_flow/conditionally_hiding_an_element/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | @property bool shortView = true; 10 | 11 | MyElement.created() : super.created(); 12 | 13 | @reflectable 14 | void toggleView([_, __]) { 15 | set('shortView', !this.shortView); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /web/control_flow/conditionally_hiding_an_element/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /web/control_flow/getting_the_iteration_index_when_looping_over_a_collection/README.md: -------------------------------------------------------------------------------- 1 | # Getting the iteration index when looping over a collection 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/e2961966bf294374d99df4ddaba296f45af7bd38/snippets/control-flow/getting-the-iteration-index-when-looping-over-a-collection.html -------------------------------------------------------------------------------- /web/control_flow/getting_the_iteration_index_when_looping_over_a_collection/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/control_flow/getting_the_iteration_index_when_looping_over_a_collection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/control_flow/getting_the_iteration_index_when_looping_over_a_collection/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'dart:html' as dom; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | import 'package:polymer/polymer.dart'; 7 | 8 | @PolymerRegister('my-element') 9 | class MyElement extends PolymerElement { 10 | @property final List fruits = [ 11 | 'apple', 12 | 'banana', 13 | 'fig', 14 | 'kiwi', 15 | 'guava' 16 | ]; 17 | MyElement.created() : super.created(); 18 | 19 | @property int selectedIndex; 20 | 21 | @reflectable 22 | int addOne(int value) => value + 1; 23 | 24 | @reflectable 25 | void clickHandler(dom.Event event, [_]) { 26 | set('selectedIndex', new DomRepeatModel.fromEvent(event).index + 1); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /web/control_flow/getting_the_iteration_index_when_looping_over_a_collection/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /web/control_flow/looping_over_a_collection_using_iterative_templates/README.md: -------------------------------------------------------------------------------- 1 | # Looping over a collection using iterative templates 2 | 3 | Shows iterating over a list of items using **template repeat**. 4 | 5 | ## The code 6 | 7 | * [my_element.dart](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/control_flow/looping_over_a_collection_using_iterative_templates/my_element.dart): 8 | The Dart code for `` 9 | * [my_element.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/control_flow/looping_over_a_collection_using_iterative_templates/my_element.html): 10 | The HTML code for `` 11 | * [index.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/control_flow/looping_over_a_collection_using_iterative_templates/index.html): 12 | An HTML file that uses `` 13 | 14 | ## How it works 15 | 16 | The MyElement class (`my_element.dart`) defines a list of fruits: 17 | 18 | @property final List fruits = 19 | ['apple', 'banana', 'fig', 'kiwi', 'guava']; 20 | 21 | In the template code (`my_element.html`), `template repeat` iterates 22 | over the list of fruit, rendering each with a template: 23 | 24 | 27 | 28 | or 29 | 30 | 33 | 34 | ## More information 35 | 36 | * [looping_over_a_collection_using_iterative_templates](https://github.com/PolymerLabs/polymer-snippets/blob/e2961966bf294374d99df4ddaba296f45af7bd38/snippets/control-flow/looping-over-a-collection-using-iterative-templates.html): 37 | The JavaScript version of this example 38 | 39 | -------------------------------------------------------------------------------- /web/control_flow/looping_over_a_collection_using_iterative_templates/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/control_flow/looping_over_a_collection_using_iterative_templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/control_flow/looping_over_a_collection_using_iterative_templates/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:polymer/polymer.dart'; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | @property final List fruits = [ 10 | 'apple', 11 | 'banana', 12 | 'fig', 13 | 'kiwi', 14 | 'guava' 15 | ]; 16 | 17 | MyElement.created() : super.created(); 18 | } 19 | -------------------------------------------------------------------------------- /web/control_flow/looping_over_a_collection_using_iterative_templates/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/control_flow/using_conditional_templates/README.md: -------------------------------------------------------------------------------- 1 | # Using conditional templates 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/35a0312c5645f2538ccd3fc20ef3d569c2d99d47/snippets/control-flow/using-conditional-templates.html -------------------------------------------------------------------------------- /web/control_flow/using_conditional_templates/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/control_flow/using_conditional_templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/control_flow/using_conditional_templates/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | @property bool showAnswer = false; 10 | 11 | MyElement.created() : super.created(); 12 | 13 | @reflectable 14 | void toggleView([_, __]) { 15 | set('showAnswer', !showAnswer); 16 | } 17 | 18 | @reflectable 19 | String buttonText(_) => 'Show ${showAnswer ? 'question' : 'answer'}'; 20 | } 21 | -------------------------------------------------------------------------------- /web/control_flow/using_conditional_templates/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | -------------------------------------------------------------------------------- /web/control_flow/using_template_repeat_with_a_table_row/README.md: -------------------------------------------------------------------------------- 1 | # Using template repeat with a table 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/e2961966bf294374d99df4ddaba296f45af7bd38/snippets/control-flow/using-template-repeat-with-a-tr-or-an-option.html 4 | -------------------------------------------------------------------------------- /web/control_flow/using_template_repeat_with_a_table_row/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/control_flow/using_template_repeat_with_a_table_row/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/control_flow/using_template_repeat_with_a_table_row/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | @property final List fruits = ['orange', 'strawberry', 'banana']; 10 | 11 | MyElement.created() : super.created(); 12 | } 13 | -------------------------------------------------------------------------------- /web/control_flow/using_template_repeat_with_a_table_row/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 22 | 23 | -------------------------------------------------------------------------------- /web/events/using_custom_events/README.md: -------------------------------------------------------------------------------- 1 | # Using custom events 2 | 3 | Ports https://github.com/PolymerLabs/polymer-patterns/blob/e43f8b037203f5ea0d848ad64ee2f25d422e0093/snippets/events/using-custom-events.html -------------------------------------------------------------------------------- /web/events/using_custom_events/child_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('child_element.html') 2 | library child_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('child-element') 8 | class ChildElement extends PolymerElement { 9 | ChildElement.created() : super.created(); 10 | 11 | @reflectable 12 | void fireEvent([_, __]) { 13 | fire('spoken', detail: {'message': this.$['myInput'].value}); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /web/events/using_custom_events/child_element.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /web/events/using_custom_events/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'parent_element.dart'; 3 | 4 | /// Silence analyzer [ParentElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/events/using_custom_events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/events/using_custom_events/parent_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('parent_element.html') 2 | library parent_element; 3 | 4 | import 'dart:html' show Event, Node; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | import 'package:polymer/polymer.dart'; 7 | import 'child_element.dart'; 8 | 9 | /// Silence analyzer [ChildElement] 10 | @PolymerRegister('parent-element') 11 | class ParentElement extends PolymerElement { 12 | @property String message = ''; 13 | 14 | ParentElement.created() : super.created(); 15 | 16 | @reflectable 17 | void heard(Event e, var detail) { 18 | set('message', 'heard: ' + detail['message']); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /web/events/using_custom_events/parent_element.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /web/forms/binding_a_boolean_field_to_a_checkbox/README.md: -------------------------------------------------------------------------------- 1 | # Binding a boolean property to a checkbox 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/ca250355c6d4076f16353fb386c07ca106d6fc4e/snippets/forms/binding-a-boolean-property-to-a-checkbox.html 4 | -------------------------------------------------------------------------------- /web/forms/binding_a_boolean_field_to_a_checkbox/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/forms/binding_a_boolean_field_to_a_checkbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/forms/binding_a_boolean_field_to_a_checkbox/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | @property bool checked = false; 11 | 12 | @reflectable 13 | String checkboxLabel(bool checked) => checked ? 'Uncheck' : 'Check'; 14 | } 15 | -------------------------------------------------------------------------------- /web/forms/binding_a_boolean_field_to_a_checkbox/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_text_input/README.md: -------------------------------------------------------------------------------- 1 | # Binding to a Text Input 2 | 3 | Shows how to bind Dart data with a HTML text field 4 | so that modifying one changes the other. 5 | 6 | ## The code 7 | 8 | * [my_element.dart](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/forms/binding_to_a_text_input/my_element.dart): 9 | The Dart code for `` 10 | * [my_element.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/forms/binding_to_a_text_input/my_element.html): 11 | The HTML code for `` 12 | * [index.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/forms/binding_to_a_text_input/index.html): 13 | An HTML file that uses `` 14 | 15 | ## How it works 16 | 17 | The MyElement class (`my_element.dart`) defines a String object 18 | annotated with `@property`: 19 | 20 | @property String message = ''; 21 | 22 | The HTML code (`my_element.html`) binds this string 23 | to the `value` attribute of a text field 24 | using the _binding_ notation (`{{message::input}}`): 25 | 26 | 27 | 28 | `::input` ensures that `message` is updated when the `` element fires the 29 | `input` event. For more details about binding to native elements see 30 | https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#two-way-native 31 | Alternatively you can use `::change` to update the binding when the input 32 | element loses the focus. 33 | 34 | The HTML code embeds the value of the String in an element on the page 35 | (in this example a `div`). 36 | When a user changes the value of the text field, the String in 37 | the Dart object changes, as does the value in the `div`. 38 | 39 |
{{message}}
40 | 41 | ## More information 42 | 43 | * [binding-to-a-text-input.html](https://github.com/PolymerLabs/polymer-snippets/blob/f5651613ea5db9c2e50a2f4df8f27c64c07755db/snippets/forms/binding-to-a-text-input.html): 44 | The JavaScript version of this example 45 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_text_input/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_text_input/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_text_input/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | @property String message = ''; 11 | } 12 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_text_input/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_textarea/README.md: -------------------------------------------------------------------------------- 1 | # Binding to a Textarea 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/ca250355c6d4076f16353fb386c07ca106d6fc4e/snippets/forms/binding-to-a-textarea.html 4 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_textarea/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_textarea/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_textarea/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | @property String message = ''; 10 | MyElement.created() : super.created(); 11 | } 12 | -------------------------------------------------------------------------------- /web/forms/binding_to_a_textarea/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_autocompletion/README.md: -------------------------------------------------------------------------------- 1 | # Implementing simple auto-completion 2 | 3 | Shows how an input element is wrapped into an auto-completing widget. 4 | After every key press, we query the backend, and display results in a list. 5 | When candidates are visible, it is possible to select using arrow keys. -------------------------------------------------------------------------------- /web/forms/implementing_simple_autocompletion/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_autocompletion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_autocompletion/match_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('match_element.html') 2 | library match_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('match-element') 8 | class MatchElement extends PolymerElement { 9 | /// Candidate string. 10 | /// The matching string which we want to display highlighted. 11 | @property String value; 12 | 13 | /// Input query. 14 | /// The query whose first match in `value` we want to display highlighted. 15 | @property String inputQuery = ''; 16 | 17 | MatchElement.created() : super.created(); 18 | 19 | @Observe('value, inputQuery') 20 | valueChanged(_, __) => new PolymerDom(root).innerHtml = highlightedValue; 21 | 22 | /// Highlight the match of `inputQuery` in value. 23 | String get highlightedValue { 24 | if (inputQuery.isEmpty) { 25 | return value; 26 | } 27 | String query = inputQuery.toLowerCase(); 28 | String text = value.toLowerCase(); 29 | int idx = text.indexOf(query); 30 | if (idx == -1) { 31 | return value; // This cannot happen. 32 | } 33 | String prefix = value.substring(0, idx); 34 | String matched = value.substring(idx, idx + query.length); 35 | String postfix = value.substring(idx + query.length); 36 | return "$prefix$matched$postfix"; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_autocompletion/match_element.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_autocompletion/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'dart:async'; 5 | import 'dart:html' 6 | show Event, InputElement, KeyboardEvent, KeyCode, Node, window; 7 | import 'package:web_components/web_components.dart' show HtmlImport; 8 | import 'package:polymer/polymer.dart'; 9 | import 'package:polymer_elements/paper_input.dart'; 10 | import 'match_element.dart'; 11 | 12 | /// Silence analyzer [MatchElement], [PaperInput] 13 | @PolymerRegister('my-element') 14 | class MyElement extends PolymerElement { 15 | /// In a real project, the following would live elsewhere, e.g. a backend. 16 | static const List _hardCodedListOfWords = const [ 17 | "apple", 18 | "ananas", 19 | "banana", 20 | "beetroot", 21 | "cassava", 22 | "cherry", 23 | "cucumber", 24 | "eggplant", 25 | "grapes", 26 | "tomato", 27 | "pear", 28 | "pomegranate", 29 | "potato", 30 | "lettuce", 31 | "strawberry" 32 | ]; 33 | 34 | int _selectedItemIndex = -1; 35 | @property String inputQuery; 36 | @property final List matchingCandidates = []; 37 | @property String selectedCandidate; 38 | 39 | MyElement.created() : super.created(); 40 | 41 | @reflectable 42 | void keyDown(Event event, [_]) { 43 | if (!(event is KeyboardEvent)) { 44 | return; 45 | } 46 | switch ((event as KeyboardEvent).keyCode) { 47 | case KeyCode.DOWN: 48 | _moveSelection(1); 49 | event.preventDefault(); 50 | break; 51 | case KeyCode.UP: 52 | _moveSelection(-1); 53 | event.preventDefault(); 54 | break; 55 | case KeyCode.ENTER: 56 | if (_selectedItemIndex != -1) { 57 | window.alert("You picked $selectedCandidate from the list."); 58 | } else { 59 | window.alert( 60 | "You hit enter on $inputQuery without selecting it from the list."); 61 | } 62 | event.preventDefault(); 63 | break; 64 | } 65 | } 66 | 67 | void _moveSelection(int delta) { 68 | _selectedItemIndex = _selectedItemIndex + delta; 69 | if (_selectedItemIndex < 0) { 70 | _selectedItemIndex = 0; 71 | } 72 | if (_selectedItemIndex >= matchingCandidates.length) { 73 | _selectedItemIndex = matchingCandidates.length - 1; 74 | } 75 | if (0 <= _selectedItemIndex && 76 | _selectedItemIndex < matchingCandidates.length) { 77 | set('selectedCandidate', matchingCandidates[_selectedItemIndex]); 78 | } else { 79 | set('selectedCandidate', ''); 80 | } 81 | } 82 | 83 | @reflectable 84 | String selectedClass(String candidate, selectedCandidate) => 85 | candidate == selectedCandidate ? 'selected' : ''; 86 | 87 | @reflectable 88 | void findCandidates(Event event, _) { 89 | clear('matchingCandidates'); 90 | set('inputQuery', (event.target as InputElement).value); 91 | if (inputQuery.length < 1) { 92 | return; 93 | } 94 | _queryCandidates().then((List candidates) { 95 | // Note that we may well end up with multiple requests being in flight at 96 | // the same time. We deal with this rather simply by clearing our 97 | // candidate list once more. Another solution would be to cancel the 98 | // previous in-flight request before making a new one. 99 | 100 | clear('matchingCandidates'); 101 | addAll('matchingCandidates', candidates); 102 | if (!candidates.contains(selectedCandidate)) { 103 | _selectedItemIndex = -1; 104 | set('selectedCandidate', ''); 105 | } 106 | }); 107 | } 108 | 109 | /// In a real project, this would query the backend. 110 | Future> _queryCandidates() { 111 | var completer = new Completer>(); 112 | if (inputQuery.isEmpty) { 113 | completer.complete(_hardCodedListOfWords); 114 | } else { 115 | List matchingCandidates = _hardCodedListOfWords 116 | .where((String s) => s.contains(inputQuery)) 117 | .toList(); 118 | completer.complete(matchingCandidates); 119 | } 120 | return completer.future; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_autocompletion/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 28 | 29 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_validation/README.md: -------------------------------------------------------------------------------- 1 | # Implementing Simple Validation 2 | 3 | Ports https://github.com/PolymerLabs/polymer-patterns/blob/ca250355c6d4076f16353fb386c07ca106d6fc4e/snippets/forms/implementing-simple-validation.html 4 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_validation/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_validation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_validation/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | static const int _minLength = 5; 10 | static const int _maxLength = 50; 11 | @Property(observer: 'messageChanged') String message = ''; 12 | @property String messageValidationError = ''; 13 | 14 | MyElement.created() : super.created(); 15 | 16 | @reflectable 17 | void messageChanged([_, __]) { 18 | var trimmedMessage = message.trim(); 19 | if (trimmedMessage.length < _minLength || 20 | trimmedMessage.length > _maxLength) { 21 | set('messageValidationError', 22 | 'Must be between $_minLength and $_maxLength characters.'); 23 | } else { 24 | set('messageValidationError', ''); 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /web/forms/implementing_simple_validation/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/forms/selecting_many_items_using_checkboxes/README.md: -------------------------------------------------------------------------------- 1 | # Selecting many items using checkboxes 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/9d34c80184bc72e3fb0cc0131903da9dec722f86/snippets/forms/selecting-many-items-using-checkboxes.html -------------------------------------------------------------------------------- /web/forms/selecting_many_items_using_checkboxes/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/forms/selecting_many_items_using_checkboxes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/forms/selecting_many_items_using_checkboxes/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | class Item extends JsProxy { 8 | @reflectable String color; 9 | @reflectable bool checked; 10 | Item(this.color, this.checked); 11 | } 12 | 13 | @PolymerRegister('my-element') 14 | class MyElement extends PolymerElement { 15 | MyElement.created() : super.created(); 16 | 17 | @property final List items = [ 18 | new Item('red', false), 19 | new Item('green', true), 20 | new Item('blue', false) 21 | ]; 22 | 23 | @reflectable 24 | bool filterSelected(Item item) => item.checked; 25 | } 26 | -------------------------------------------------------------------------------- /web/forms/selecting_many_items_using_checkboxes/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | -------------------------------------------------------------------------------- /web/forms/selecting_one_item_using_radio_buttons/README.md: -------------------------------------------------------------------------------- 1 | # Selecting one item using radio buttons 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/49f82644b6bdc675d7b6598eeafd6b2ce3d2397e/snippets/forms/selecting-one-item-using-radio-buttons.html 4 | -------------------------------------------------------------------------------- /web/forms/selecting_one_item_using_radio_buttons/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/forms/selecting_one_item_using_radio_buttons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/forms/selecting_one_item_using_radio_buttons/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'dart:html' show Event, InputElement, Node; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | import 'package:polymer/polymer.dart'; 7 | 8 | @PolymerRegister('my-element') 9 | class MyElement extends PolymerElement { 10 | @property final List colors = ['red', 'green', 'blue']; 11 | @property String selectedColor = ''; 12 | 13 | MyElement.created() : super.created(); 14 | 15 | @reflectable 16 | void updateSelectedColor([Event e, _]) { 17 | set('selectedColor', (e.target as InputElement).value); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /web/forms/selecting_one_item_using_radio_buttons/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Polymer Dart Patterns 5 | 6 | 7 |

Polymer Dart Patterns

8 | 9 |

Basics

10 | 21 |

Control flow

22 | 29 |

Insertion points

30 | 36 |

Observing changes

37 | 41 |

Forms

42 | 51 |

Events

52 | 55 |

Styling elements

56 | 65 |

Layout attributes

66 | 71 |

Polymer elements

72 |

Samples using Polymer elements.

73 |

Paper toolbar

74 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /web/insertion_points/accessing_the_dom_inside_a_content_tag/README.md: -------------------------------------------------------------------------------- 1 | # Accessing the DOM inside a content tag 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/d61f5231a7bee1d040dd11a3ae1dd2d10712552e/snippets/insertion-points/accessing-the-dom-inside-a-content-tag.html -------------------------------------------------------------------------------- /web/insertion_points/accessing_the_dom_inside_a_content_tag/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/insertion_points/accessing_the_dom_inside_a_content_tag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

A para

11 |

Crucial distributed para

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /web/insertion_points/accessing_the_dom_inside_a_content_tag/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'dart:html' as dom; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | import 'package:polymer/polymer.dart'; 7 | 8 | @PolymerRegister('my-element') 9 | class MyElement extends PolymerElement { 10 | @property /*final*/ List theNodes = []; 11 | 12 | MyElement.created() : super.created(); 13 | 14 | @reflectable 15 | void showDistributedNodes([_, __]) { 16 | _getNodes(new PolymerDom($['crucial']).getDistributedNodes()); 17 | } 18 | 19 | @reflectable 20 | void showChildren([_, __]) { 21 | _getNodes(new PolymerDom(this).children); 22 | } 23 | 24 | void _getNodes(List _nodes) { 25 | clear('theNodes'); 26 | for (int i = 0; i < _nodes.length; i++) { 27 | String html = (_nodes[i] as dom.Element).outerHtml; 28 | if (html != null && html.trim().isNotEmpty) { 29 | add('theNodes', html); 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /web/insertion_points/accessing_the_dom_inside_a_content_tag/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /web/insertion_points/creating_an_insertion_point_using_the_content_tag/README.md: -------------------------------------------------------------------------------- 1 | # Creating insertion points using the content tag 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/1421133cd113a8d16bdf5d1c73c105e90e414552/snippets/insertion-points/creating-an-insertion-point-using-the-content-tag.html -------------------------------------------------------------------------------- /web/insertion_points/creating_an_insertion_point_using_the_content_tag/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/insertion_points/creating_an_insertion_point_using_the_content_tag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Distributed node 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/insertion_points/creating_an_insertion_point_using_the_content_tag/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | } 11 | -------------------------------------------------------------------------------- /web/insertion_points/creating_an_insertion_point_using_the_content_tag/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/insertion_points/creating_insertion_points_using_the_select_attribute/README.md: -------------------------------------------------------------------------------- 1 | # Creating insertion points using the select attribute 2 | 3 | Shows how to use the `select` attribute with a CSS selector to choose which 4 | nodes get distributed at an insertion point. 5 | 6 | 7 | ## The code 8 | 9 | * [my_element.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/insertion_points/creating_insertion_points_using_the_select_attribute/my_element.html): 10 | The HTML for `` 11 | * [index.html](https://github.com/dart-lang/polymer-dart-snippets/blob/master/web/insertion_points/creating_insertion_points_using_the_select_attribute/index.html): 12 | An HTML file that uses `` 13 | 14 | 15 | ## How it works 16 | 17 | A `` tag with no `select` attribute permits the insertion of any type 18 | of distributed node. Use the `select` attribute to allow the insertion of only 19 | the nodes that match a CSS selector. 20 | 21 | Consider the following use of `` tags in ``: 22 | 23 | 29 | 30 | The first `` allows insertion of only `

` elements. The second 31 | `` allows insertion of any element that has the class "crucial". 32 | The third `` allows insertion of another Polymer element, 33 | ``. The `` tag without a `select` inserts any remaining 34 | nodes. 35 | 36 | The `index.html` file uses `` like this: 37 | 38 | 39 |

A distributed node

40 |

An important para

41 |

A headline

42 | 43 | 44 | 45 | That code generates the following composed tree: 46 | 47 |

A headline

48 |

An important para

49 | 50 |

A distributed node

51 | 52 | Note that the order of the rendered nodes in the composed tree is determined 53 | by the order of the `` tags in the _element definition_, not by the 54 | order in which the child nodes are passed to the element. 55 | 56 | ## More information 57 | 58 | * [creating-insertion-points-using-the-select-attribute.html](https://github.com/PolymerLabs/polymer-snippets/blob/ddc5b8bbe217cf1d8e567c41e33f017ad5350fd0/snippets/insertion-points/creating-insertion-points-using-the-select-attribute.html): 59 | The JavaScript version of this sample 60 | * [Satisfying Matching Criteria](http://w3c.github.io/webcomponents/spec/shadow/#satisfying-matching-criteria) (in the Shadow DOM specification): 61 | CSS selectors that you can use with the `select` tag 62 | -------------------------------------------------------------------------------- /web/insertion_points/creating_insertion_points_using_the_select_attribute/child_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('child_element.html') 2 | library child_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('child-element') 8 | class ChildElement extends PolymerElement { 9 | ChildElement.created() : super.created(); 10 | } 11 | -------------------------------------------------------------------------------- /web/insertion_points/creating_insertion_points_using_the_select_attribute/child_element.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /web/insertion_points/creating_insertion_points_using_the_select_attribute/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/insertion_points/creating_insertion_points_using_the_select_attribute/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

A distributed node

11 |

An important para

12 |

A headline

13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /web/insertion_points/creating_insertion_points_using_the_select_attribute/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | import 'child_element.dart'; 7 | 8 | // Silence analyzer [ChildElement] 9 | @PolymerRegister('my-element') 10 | class MyElement extends PolymerElement { 11 | MyElement.created() : super.created(); 12 | } 13 | -------------------------------------------------------------------------------- /web/insertion_points/creating_insertion_points_using_the_select_attribute/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /web/insertion_points/retrieving_the_insertion_points_for_distributed_nodes/README.md: -------------------------------------------------------------------------------- 1 | # Retrieving the insertion points for distributed nodes 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/7f0abbf1e37e22f6ca850821d9409c8c70af335c/snippets/insertion-points/retrieving-the-insertion-points-for-distributed-nodes.html -------------------------------------------------------------------------------- /web/insertion_points/retrieving_the_insertion_points_for_distributed_nodes/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/insertion_points/retrieving_the_insertion_points_for_distributed_nodes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ordinary
11 |
crucial
12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /web/insertion_points/retrieving_the_insertion_points_for_distributed_nodes/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'dart:html' show Element; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | import 'package:polymer/polymer.dart'; 7 | 8 | @PolymerRegister('my-element') 9 | class MyElement extends PolymerElement { 10 | @property final List nodesAndEntryPoints = []; 11 | 12 | MyElement.created() : super.created(); 13 | 14 | @reflectable 15 | void showNodesAndEntryPoints([_, __]) { 16 | clear('nodesAndEntryPoints'); 17 | addAll( 18 | 'nodesAndEntryPoints', 19 | new PolymerDom( 20 | this).children.map((child) => '${child.outerHtml} ------> ' 21 | '${(new PolymerDom(child).getDestinationInsertionPoints()[0] as Element).outerHtml}')); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /web/insertion_points/retrieving_the_insertion_points_for_distributed_nodes/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | -------------------------------------------------------------------------------- /web/layout_attributes/nesting_flex_layouts/README.md: -------------------------------------------------------------------------------- 1 | # Nesting flex layouts 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/8b7f516f1c592158334f948ab2653faacec4de88/snippets/layout-attributes/nesting-flex-layouts.html -------------------------------------------------------------------------------- /web/layout_attributes/nesting_flex_layouts/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silent analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/layout_attributes/nesting_flex_layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /web/layout_attributes/nesting_flex_layouts/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | import 'package:polymer_elements/iron_flex_layout.dart'; 7 | 8 | @PolymerRegister('my-element') 9 | class MyElement extends PolymerElement { 10 | MyElement.created() : super.created(); 11 | } 12 | -------------------------------------------------------------------------------- /web/layout_attributes/nesting_flex_layouts/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 45 | 46 | -------------------------------------------------------------------------------- /web/layout_attributes/using_flex/README.md: -------------------------------------------------------------------------------- 1 | # Using flex 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/8b7f516f1c592158334f948ab2653faacec4de88/snippets/layout-attributes/using-flex.html -------------------------------------------------------------------------------- /web/layout_attributes/using_flex/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/layout_attributes/using_flex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/layout_attributes/using_flex/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | import 'package:polymer_elements/iron_flex_layout.dart'; 7 | 8 | @PolymerRegister('my-element') 9 | class MyElement extends PolymerElement { 10 | MyElement.created() : super.created(); 11 | } 12 | -------------------------------------------------------------------------------- /web/layout_attributes/using_flex/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | -------------------------------------------------------------------------------- /web/layout_attributes/using_layout_classes/README.md: -------------------------------------------------------------------------------- 1 | # Using layout attributes 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/8b7f516f1c592158334f948ab2653faacec4de88/snippets/layout-attributes/using-layout-attributes.html -------------------------------------------------------------------------------- /web/layout_attributes/using_layout_classes/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_horizontal_element.dart'; 3 | import 'my_vertical_element.dart'; 4 | 5 | /// Silence analyzer [MyHorizontalElement], [MyVerticalElement] 6 | main() async { 7 | await initPolymer(); 8 | } 9 | -------------------------------------------------------------------------------- /web/layout_attributes/using_layout_classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /web/layout_attributes/using_layout_classes/my_horizontal_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_horizontal_element.html') 2 | library my_horizontal_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | import 'package:polymer_elements/iron_flex_layout/classes/iron_flex_layout.dart'; 7 | 8 | @PolymerRegister('my-horizontal-element') 9 | class MyHorizontalElement extends PolymerElement { 10 | MyHorizontalElement.created() : super.created(); 11 | } 12 | -------------------------------------------------------------------------------- /web/layout_attributes/using_layout_classes/my_horizontal_element.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /web/layout_attributes/using_layout_classes/my_vertical_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_vertical_element.html') 2 | library my_vertical_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | import 'package:polymer_elements/iron_flex_layout/classes/iron_flex_layout.dart'; 7 | 8 | @PolymerRegister('my-vertical-element') 9 | class MyVerticalElement extends PolymerElement { 10 | MyVerticalElement.created() : super.created(); 11 | } 12 | -------------------------------------------------------------------------------- /web/layout_attributes/using_layout_classes/my_vertical_element.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_element_fields/README.md: -------------------------------------------------------------------------------- 1 | # Observing changes to element fields 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/afeaf51dd1e807f329e0a5769f7c540fd6e40854/snippets/observing-changes/observing-property-changes.html -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_element_fields/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_element_fields/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_element_fields/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'dart:html' show Event, Node; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | import 'package:polymer/polymer.dart'; 7 | 8 | @PolymerRegister('my-element') 9 | class MyElement extends PolymerElement { 10 | @property String message = ''; 11 | @Property(observer: 'colorChanged') String color = 'red'; 12 | 13 | MyElement.created() : super.created(); 14 | 15 | @reflectable 16 | void colorChanged(String newValue, String oldValue) { 17 | set('message', 'Color changed from $oldValue to $newValue'); 18 | } 19 | 20 | @reflectable 21 | void toggleColor(Event e, Object detail) { 22 | set('color', color == 'red' ? 'green' : 'red'); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_element_fields/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_light_dom_children/README.md: -------------------------------------------------------------------------------- 1 | # Observing changes to light DOM children 2 | 3 | Ports https://github.com/PolymerLabs/polymer-patterns/blob/afeaf51dd1e807f329e0a5769f7c540fd6e40854/snippets/observing-changes/observing-changes-to-light-dom-children.html 4 | -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_light_dom_children/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_light_dom_children/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_light_dom_children/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'dart:html'; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | import 'package:polymer/polymer.dart'; 7 | 8 | @PolymerRegister('my-element') 9 | class MyElement extends PolymerElement { 10 | int _counter = 1; 11 | 12 | @property String message = ''; 13 | 14 | Object _observeHandle; 15 | 16 | MyElement.created() : super.created(); 17 | 18 | void attached() { 19 | _observeHandle = new PolymerDom($['content']).observeNodes(_childrenUpdated); 20 | } 21 | 22 | void detached() { 23 | new PolymerDom($['content']).unobserveNodes(_observeHandle); 24 | } 25 | 26 | void _childrenUpdated(PolymerDomMutation mutations) { 27 | set( 28 | 'message', 29 | "New
with text '${mutations.addedNodes[0].text}'" 30 | " added to light DOM."); 31 | } 32 | 33 | @reflectable 34 | void addDivToLightDom([Event e, _]) { 35 | new PolymerDom(this) 36 | .append(new DivElement()..text = "I am new (${_counter++})"); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /web/observing_changes/observing_changes_to_light_dom_children/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/observing_changes/watching_for_changes_to_a_nested_object/README.md: -------------------------------------------------------------------------------- 1 | # Watching for changes to a nested object 2 | 3 | Ports https://github.com/PolymerLabs/polymer-patterns/blob/afeaf51dd1e807f329e0a5769f7c540fd6e40854/snippets/observing-changes/watching-for-changes-to-a-nested-object.html -------------------------------------------------------------------------------- /web/observing_changes/watching_for_changes_to_a_nested_object/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/observing_changes/watching_for_changes_to_a_nested_object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/observing_changes/watching_for_changes_to_a_nested_object/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'dart:html'; 5 | import 'package:web_components/web_components.dart' show HtmlImport; 6 | import 'package:polymer/polymer.dart'; 7 | 8 | class Thing extends JsProxy { 9 | @reflectable String color; 10 | Thing(this.color); 11 | } 12 | 13 | @PolymerRegister('my-element') 14 | class MyElement extends PolymerElement { 15 | @property String message = ''; 16 | @property Thing thing = new Thing('red'); 17 | 18 | MyElement.created() : super.created(); 19 | 20 | String _oldColor; 21 | 22 | @Observe('thing.color') 23 | void colorObserver(String newValue) { 24 | set('message', 'Color changed from $_oldColor to $newValue'); 25 | _oldColor = newValue; 26 | } 27 | 28 | @reflectable 29 | void changeColor(Event e, [_]) { 30 | set('thing.color', thing.color == 'red' ? 'green' : 'red'); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /web/observing_changes/watching_for_changes_to_a_nested_object/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /web/polymer_elements/paper_toolbar/adding_a_menu_button/README.md: -------------------------------------------------------------------------------- 1 | # Adding a menu button 2 | 3 | Ports https://github.com/PolymerLabs/polymer-patterns/blob/e9722e8ad9906e91b57a25414d1544cfda15d8bb/snippets/core-elements/core-toolbar/adding-a-menu-button.html -------------------------------------------------------------------------------- /web/polymer_elements/paper_toolbar/adding_a_menu_button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
Hello World
15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /web/polymer_elements/paper_toolbar/adding_button_rows/README.md: -------------------------------------------------------------------------------- 1 | # Adding button rows 2 | 3 | Ports https://github.com/PolymerLabs/polymer-patterns/blob/e9722e8ad9906e91b57a25414d1544cfda15d8bb/snippets/core-elements/core-toolbar/adding-button-rows.html -------------------------------------------------------------------------------- /web/polymer_elements/paper_toolbar/adding_button_rows/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
My App
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /web/polymer_elements/paper_toolbar/changing_the_toolbar_size/README.md: -------------------------------------------------------------------------------- 1 | # Changing the toolbar size 2 | 3 | Ports https://github.com/PolymerLabs/polymer-patterns/blob/e9722e8ad9906e91b57a25414d1544cfda15d8bb/snippets/core-elements/core-toolbar/changing-toolbar-size.html -------------------------------------------------------------------------------- /web/polymer_elements/paper_toolbar/changing_the_toolbar_size/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
My App
15 | 16 |
17 | 18 | 19 |
My Medium App
20 | 21 |
22 | 23 | 24 |
My Tall App
25 |
Even more of my app
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /web/polymer_elements/paper_toolbar/using_paper_toolbar/README.md: -------------------------------------------------------------------------------- 1 | # Using core-toolbar 2 | 3 | Ports https://github.com/PolymerLabs/polymer-patterns/blob/e9722e8ad9906e91b57a25414d1544cfda15d8bb/snippets/core-elements/core-toolbar/using-core-toolbar.html -------------------------------------------------------------------------------- /web/polymer_elements/paper_toolbar/using_paper_toolbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
My App
12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /web/styling_elements/applying_styles_by_piercing_shadow_dom_boundaries/README.md: -------------------------------------------------------------------------------- 1 | # Applying styles by piercing Shadow DOM boundaries 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/611a9e571adf568c6e48a0cfc84ce04dd0f249f0/snippets/styling-elements/applying-styles-by-piercing-shadow-dom-boundaries.html -------------------------------------------------------------------------------- /web/styling_elements/applying_styles_by_piercing_shadow_dom_boundaries/child_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('child_element.html') 2 | library child_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('child-element') 8 | class ChildElement extends PolymerElement { 9 | ChildElement.created() : super.created(); 10 | } 11 | -------------------------------------------------------------------------------- /web/styling_elements/applying_styles_by_piercing_shadow_dom_boundaries/child_element.html: -------------------------------------------------------------------------------- 1 | 2 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /web/styling_elements/applying_styles_by_piercing_shadow_dom_boundaries/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/styling_elements/applying_styles_by_piercing_shadow_dom_boundaries/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | 17 | 18 | 19 |

Heading outside my-element

20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /web/styling_elements/applying_styles_by_piercing_shadow_dom_boundaries/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | import 'child_element.dart'; 7 | 8 | /// Silence analyzer [ChildElement] 9 | @PolymerRegister('my-element') 10 | class MyElement extends PolymerElement { 11 | MyElement.created() : super.created(); 12 | } 13 | -------------------------------------------------------------------------------- /web/styling_elements/applying_styles_by_piercing_shadow_dom_boundaries/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 19 | 20 | -------------------------------------------------------------------------------- /web/styling_elements/defining_styles_inside_a_polymer_element/README.md: -------------------------------------------------------------------------------- 1 | # Defining styles inside a Polymer element 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/611a9e571adf568c6e48a0cfc84ce04dd0f249f0/snippets/styling-elements/defining-styles-inside-a-polymer-element.html -------------------------------------------------------------------------------- /web/styling_elements/defining_styles_inside_a_polymer_element/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/styling_elements/defining_styles_inside_a_polymer_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

Distributed para

11 | 12 |

Para outside the element

13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /web/styling_elements/defining_styles_inside_a_polymer_element/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | } 11 | -------------------------------------------------------------------------------- /web/styling_elements/defining_styles_inside_a_polymer_element/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | -------------------------------------------------------------------------------- /web/styling_elements/programmatically_changing_the_styles_of_an_element/README.md: -------------------------------------------------------------------------------- 1 | # Programmatically changing the styles of an element 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/df0e72a3ac9dfec3d90a25936e503499976b6925/snippets/styling-elements/programmatically-changing-the-styles-of-an-element.html -------------------------------------------------------------------------------- /web/styling_elements/programmatically_changing_the_styles_of_an_element/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/styling_elements/programmatically_changing_the_styles_of_an_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/styling_elements/programmatically_changing_the_styles_of_an_element/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | final List colors = ['red', 'green', 'blue']; 10 | int _index = 0; 11 | 12 | MyElement.created() : super.created(); 13 | 14 | @reflectable 15 | void changeColor([_, __]) { 16 | // Cycle through this.colors. 17 | this.style.color = this.colors[_index++ % colors.length]; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /web/styling_elements/programmatically_changing_the_styles_of_an_element/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /web/styling_elements/styling_distributed_nodes/README.md: -------------------------------------------------------------------------------- 1 | # Styling distributed nodes 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/df0e72a3ac9dfec3d90a25936e503499976b6925/snippets/styling-elements/styling-distributed-nodes.html -------------------------------------------------------------------------------- /web/styling_elements/styling_distributed_nodes/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/styling_elements/styling_distributed_nodes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

Blue distributed node

11 |

Red distributed node

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /web/styling_elements/styling_distributed_nodes/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | } 11 | -------------------------------------------------------------------------------- /web/styling_elements/styling_distributed_nodes/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 20 | 21 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_context_to_theme_an_element/README.md: -------------------------------------------------------------------------------- 1 | # Using `host-context` to theme an element 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/611a9e571adf568c6e48a0cfc84ce04dd0f249f0/snippets/styling-elements/using-host-context-to-theme-an-element.html -------------------------------------------------------------------------------- /web/styling_elements/using_host_context_to_theme_an_element/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_context_to_theme_an_element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 |
14 | 15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_context_to_theme_an_element/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | } 11 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_context_to_theme_an_element/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 13 | 14 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_a_css_selector/README.md: -------------------------------------------------------------------------------- 1 | # Using `:host` with a CSS selector 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/df0e72a3ac9dfec3d90a25936e503499976b6925/snippets/styling-elements/using-host-with-a-css-selector.html -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_a_css_selector/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_a_css_selector/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_a_css_selector/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | } 11 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_a_css_selector/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 16 | 17 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_pseudo_classes/README.md: -------------------------------------------------------------------------------- 1 | # Using `:host` with pseudo classes 2 | 3 | Ports https://github.com/PolymerLabs/polymer-snippets/blob/611a9e571adf568c6e48a0cfc84ce04dd0f249f0/snippets/styling-elements/using-host-with-pseudo-classes.html -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_pseudo_classes/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:polymer/polymer.dart'; 2 | import 'my_element.dart'; 3 | 4 | /// Silence analyzer [MyElement] 5 | main() async { 6 | await initPolymer(); 7 | } 8 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_pseudo_classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_pseudo_classes/my_element.dart: -------------------------------------------------------------------------------- 1 | @HtmlImport('my_element.html') 2 | library my_element; 3 | 4 | import 'package:web_components/web_components.dart' show HtmlImport; 5 | import 'package:polymer/polymer.dart'; 6 | 7 | @PolymerRegister('my-element') 8 | class MyElement extends PolymerElement { 9 | MyElement.created() : super.created(); 10 | } 11 | -------------------------------------------------------------------------------- /web/styling_elements/using_host_with_pseudo_classes/my_element.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | --------------------------------------------------------------------------------