Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/convoo/reverse-element
An element that reverses children order based on a property
https://github.com/convoo/reverse-element
accessibility polymer reverse webcomponents
Last synced: 8 days ago
JSON representation
An element that reverses children order based on a property
- Host: GitHub
- URL: https://github.com/convoo/reverse-element
- Owner: convoo
- License: mit
- Created: 2017-03-09T16:29:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-06-29T08:58:00.000Z (over 7 years ago)
- Last Synced: 2023-08-04T21:12:35.689Z (over 1 year ago)
- Topics: accessibility, polymer, reverse, webcomponents
- Language: HTML
- Homepage: https://www.webcomponents.org/element/convoo/reverse-element
- Size: 13.7 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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.