Directory

← Back

reverse-element

An element that reverses children order based on a property

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/convoo/reverse-element on 2019-05-22 ]

Reverse-Element

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.

Compatibility

(Loading compatibility data...)

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 reverse-element - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/convoo/reverse-element](https://github.com//convoo/reverse-element/blob/0.0.6/README.md) on 2019-05-22 ]** # Reverse-Element

reverse-element

Reverses children elements based on property - helpful for accessibility

--- ## Install ``` 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. ```html ``` ### Toggleable Reverse Element ```html Toggle Reverse

First

Second

Third

``` ### Reversed ```html

First

Second

Third

Fourth

``` ## Contributing ### Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/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](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
Documentation
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

Online