Reverses children elements based on property - helpful for accessibility
bower install convoo/reverse-element --save
Easily reverse the order of children elements in the dom while maintaining grandchildren order. With inputs and other elements that you use tabindex with, you need to change the dom order to reverse the tab order and not just change the visual order using CSS.
<link rel="import" href="../../reverse-element/reverse-element.html"><paper-toggle-button checked="{{reverse}}"> Toggle Reverse</paper-toggle-button>
<reverse-element reverse="{{reverse}}">
<div>
<h3>First</h3>
<paper-input label="First"></paper-input>
</div>
<div>
<h3>Second</h3>
<paper-input label="Second"></paper-input>
</div>
<div>
<h3>
Third
</h3>
<paper-input label="Third Part 1"></paper-input>
<paper-input label="Third Part 2"></paper-input>
<paper-input label="Third Part 3"></paper-input>
</div>
</reverse-element><reverse-element reverse>
<div>
<h3>First</h3>
<paper-input label="First"></paper-input>
</div>
<div>
<h3>Second</h3>
<paper-input label="Second"></paper-input>
</div>
<div>
<h3>
Third
</h3>
<paper-input label="Third Part 1"></paper-input>
<paper-input label="Third Part 2"></paper-input>
<paper-input label="Third Part 3"></paper-input>
</div>
<div>
<h3>Fourth</h3>
<paper-input label="Fourth"></paper-input>
</div>
</reverse-element>First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.
$ polymer serve
$ polymer build
This will create a build/ folder with bundled/ and unbundled/ sub-folders
containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
CSS, and JS optimizers.
You can serve the built versions by giving polymer serve a folder to serve
from:
$ polymer serve build/bundled
$ polymer test
Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.