7 |
8 |
9 |
--------------------------------------------------------------------------------
/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/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/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/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/insertion_points/creating_insertion_points_using_the_select_attribute/my_element.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/web/basics/creating_a_read_only_property/my_element.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/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/styling_elements/using_host_context_to_theme_an_element/my_element.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/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/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 |
25 |
{{item}}
26 |
27 |
28 | or
29 |
30 |
31 |
{{fruit}}
32 |
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/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/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/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/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/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 |
24 |
25 |
26 |
27 |
28 |
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 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------