<x-route>

A X-Tag element for URL routing.

Maintained by Gianni Furger.

Port of Polymer <x-route> by Addy Osmani; based on <flatiron-director> by the Polymer team.

Support x-route elements on Android 4.3 - Polymer seems rather incompatible with Android versions prior 4.4/KitKat.

Demo

Check it live.

Install

Install with Bower:

$ bower install --save x-tag-route

Usage

1. Import Web Components' polyfill:

   <script src="dist/x-tags-components.js"></script>

2. Import <flatiron-director>:

   <script src="dist/director.min.js"></script>

3. Import Custom Element:

   <script src="dist/route.js"></script>

4. Start using it!

   <x-route></x-route>

Examples

HTML

<!-- Automatically navigate to a route 'home' -->
<x-route route="/home" auto>

<!-- Define paths to routes we would like to support -->
<x-route path="/favorites">
<x-route path="/about">
<x-route path="/books">
<x-route path="/books/view/:bookId">
<x-route path="/:foo/:bar/:bazz"> 

JavaScript

You can listen to a route-changed event for details about the route that was matched.

document.addEventListener('route-changed', function (route) {
    console.log(route.detail);
});

Setup

In order to run it locally you'll need a basic server setup.

1. Install Node.js

2. Install Grunt:

   $ npm install --global grunt-cli

3. Install Bower

4. Install local dependencies:

   $ npm install && bower install

5. Run a local server and open http://localhost:3001.

   $ grunt connect

Options

Attribute | Options | Default | Description --- | --- | --- | --- path | string | | A routing path `route` | *string* | | The current route auto | boolean | false | Automatically navigate to a defined route

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

History

For detailed changelog, check Releases.

License

MIT License