dart-archive / Polymer Dart Patterns
Labels
Polymer Snippets
Small, useful, snippets/samples that show how to do things the Polymer way.
Port of polymer.js snippets in https://github.com/PolymerLabs/polymer-snippets.
Repo structure
All snippets go in web/.
Each snippet should have its own directory. Here is a typical list of files for a snippet:
-
my_element.html: the HTML for<my_element> -
my_element.dart: the Dart code for<my_element> -
index.html: the entry point for the snippet. Imports<my-element>. -
README.md: the documentation for the snippet. This should mirror the documentation in the original as much as possible.
Unless there is a compelling reason to do so, name your element <my_element>.
Be sure to add the snippet to the entry_points list in pubspec.yaml.
Keeping track of upstream commits
When porting a polymer.js snippet, be sure to reference the original, and
include the commit ID. For example:
Ports https://github.com/PolymerLabs/polymer-snippets/blob/ca250355c6d4076f16353fb386c07ca106d6fc4e/snippets/forms/binding-to-a-text-input.html
See https://help.github.com/articles/getting-permanent-links-to-files#press-y-to-permalink-to-a-file-in-a-specific-commit for details on how to get a link to the commit ID.
Making your snippets Dart-y
All snippets should follow the Dart Style Guide.
Before creating a pull request, please run the sample in Dart Editor, ensuring that it runs in both JS and Dartium without errors or warnings.
Contents
Basics
- Binding to a field
- Binding to a complex object
- Binding to a map
- Binding to a native HTML element
- Binding to a style
- Dynamically adding a Polymer element to the DOM
- Finding Shadow DOM elements
- Using a computed property
- Creating a read-only property
Control flow
- Conditionally hiding an element
- Getting the iteration index when looping over a collection
- Looping over a collection using iterative templates
- Using conditional templates
- Using template repeat with a table row
Insertion points
- Creating an insertion point using the content tag
- Creating insertions using the select attribute
- Accessing the DOM inside a content tag
- Retrieving the insertion points for distributed nodes
Observing changes
Forms
- Binding a boolean field to a checkbox
- Binding to a text input
- Binding to a textarea
- Selecting one item using radio buttons
- Selecting many items using checkboxes
- Implementing simple validation
- Implementing simple autocompletion
Events
Styling elements
- Applying styles by piercing Shadow DOM boundaries
- Defining styles inside a Polymer element
- Programatically changing the styles of an element
- Styling distributed nodes
- Using host-context to theme an element
- Using :host with a CSS selector
- Using :host with pseudo classes
Layout attributes
Polymer elements
Samples using Polymer elements.