reverse-element
An element that reverses children order based on a property
[ This description is mirrored from README.md at github.com/convoo/reverse-element on 2019-05-22 ]
Reverse-Element
Reverses children elements based on property - helpful for accessibility
Install
bower install convoo/reverse-element --save
<reverse-element>
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">
Toggleable Reverse Element
<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>
Reversed
<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>
Contributing
Install the Polymer-CLI
First, make sure you have the Polymer CLI installed. Then run polymer serve
to serve your application locally.
Viewing Your Application
$ polymer serve
Building Your Application
$ 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
Running Tests
$ 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.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#1.9 - 2
- Released
- 2017-06-23
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 0.0.5
- Browser
- Browser Independent
reverse-element - Vaadin Add-on Directory
An element that reverses children order based on a property
Reverses children elements based on property - helpful for accessibility
--- ## Install ``` bower install convoo/reverse-element --save ``` ## \First
Second
Third
First
Second
Third
Fourth
Online Demo
GitHub Homepage
Issue tracker
View on GitHub
reverse-element version 0.0.1
### Dependencies
* polymer#Polymer/polymer#^1.4.0
reverse-element version 0.0.2
### Dependencies
* polymer#Polymer/polymer#^1.4.0
reverse-element version 0.0.3
### Dependencies
* polymer#Polymer/polymer#^1.4.0
reverse-element version 0.0.4
### Dependencies
* polymer#Polymer/polymer#^1.4.0
reverse-element version 0.0.5
### Dependencies
* polymer#Polymer/polymer#^1.4.0
reverse-element version 0.0.6
### Dependencies
* polymer#Polymer/polymer#1.9 - 2