Basic non-visual elements for Polymer.dart

A port of polymer.js' polymer-elements to Polymer.dart. The intent of the authors is to contribute the work to the Dart project itself (https://www.dartlang.org).

Visual elements for Dart can be found in

Documentation

  • The Dart source files of an element often contain some documentation (Dartdoc) how to use the element. You can also find this documentation online at
  • DartDoc
  • Almost each element has an associated demo page which shows how to use the element. Open the 'demo' links below to take a look. The source code of these demo pages can be found in the example subdirectory of the package. The actual implementation of the demo page is often outsourced to files in the example/src/element_name subdirectory.

Usage

  • add the following to your pubspec.yaml file:
dependencies:
  polymer_elements:

For more details take a look at the demo pages.

Feedback

Your feedback is very much appreciated. We are excited to hear about your experience using polymer_elements. We need your feedback to continually improve the qualtiy.

Just Create a New Issue

General notes

  • Tested with Dart SDK version 1.3.0-dev.7.11

Status

<!-- (A few demo pages (* aren't rendered properly as GitHub Pages or because they use unfinished elements. We are working on it.) -->

<!-- * Status (ported) means it is ported but not yet usable -->

Element name | Status | Comment | Demo ------------------------------- | ---------------- | ------------ | ---- polymer-ajax | ported | | demo polymer-anchor-point | ported | | demo  polymer-collapse | ported | needs some additional stylesheet imports due to Polymer.dart limitations (see examples) | demo polymer-cookie | ported | | demo polymer-file | ported | | demo polymer-flex-layout | ported | needs some additional stylesheet imports due to Polymer.dart limitations (see examples) | demo  polymer-google-jsapi | not started | | polymer-grid-layout | ported | | demo polymer-jsonp | not started | | polymer-key-helper | not planned | | polymer-layout | ported | | demo polymer-localstorage | ported | | demo  polymer-media-query | ported | small issue in Dart but works fine in JS | demo polymer-meta | ported | doesn't work in JavaScript | polymer-mock-data | not started | | polymer-overlay | not started | | polymer-page | ported | | polymer-scrub | not started | | (no demo) polymer-selection | ported | | demo polymer-selector | ported | | demo polymer-shared-lib | not started | | polymer-signals | ported | | demo polymer‑view‑source‑link | not started | |

License

BSD 3-clause license (see LICENSE file).

Build Status

Libraries

polymer_elements

Polymer Elements

polymer_elements.polymer_ajax

Fired whenever a response or an error is received.

polymer_elements.polymer_anchor_point

polymer-anchor-point can be used to align two nodes. The node to use as the reference position is the anchor node, and the node to be positioned is the target node.

polymer_elements.polymer_animation
polymer_elements.polymer_animation_group
polymer_elements.polymer_animation_keyframe
polymer_elements.polymer_animation_prop
polymer_elements.polymer_bounce
polymer_elements.polymer_collapse

polymer-collapse is used to add collapsible behavior to the target element. It adjusts the height or width of the target element to make the element collapse and expand.

polymer_elements.polymer_collapse_toggle
polymer_elements.polymer_fadein
polymer_elements.polymer_fadeout
polymer_elements.polymer_file
polymer_elements.polymer_flex_layout
polymer_elements.polymer_flex_panel
polymer_elements.polymer_flip
polymer_elements.polymer_grid_layout
polymer_elements.polymer_layout
polymer_elements.polymer_localstorage
polymer_elements.polymer_media_query
polymer_elements.polymer_meta
polymer_elements.polymer_overlay
polymer_elements.polymer_overlay_scale
polymer_elements.polymer_overlay_slideup
polymer_elements.polymer_page
polymer_elements.polymer_scale
polymer_elements.polymer_scale
polymer_elements.polymer_selection

The polymer-selection element is used to manage selection state. It has no visual appearance and is typically used in conjunction with another element. For example, <a href="polymer-selector.html">polymer-selector</a> uses a polymer-selection to manage selection.

polymer_elements.polymer_selector

polymer-selector is used to manage a list of elements that can be selected. The attribute 'selected' indicates which item element is being selected. The attribute "multi" indicates if multiple items can be selected at once. Tapping on the item element fires 'polymeractivate' event. Use the 'polymer-select' event to listen for selection changes. The CustomEvent.detail for 'polymer-select' is a map containing 'item' and 'isSelected'.

polymer_elements.polymer_shake
polymer_elements.polymer_signals
polymer_elements.polymer_slide
polymer_elements.polymer_xhr

polymer-xhr can be used to perform XMLHttpRequests.