Directory

ld-navigation - Vaadin Add-on Directory

Routing-like element for the modern Web ld-navigation - Vaadin Add-on Directory
# ld-navigation [![Build Status](https://travis-ci.org/tpluscode/ld-navigation.svg?branch=master)](https://travis-ci.org/tpluscode/ld-navigation) [![codecov](https://codecov.io/gh/tpluscode/ld-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/tpluscode/ld-navigation) A set of Web Components for data-driven Linked Data REST client in the browser. With ld-navigation you let actual Linked Data be the router of your application. You then simply GET and decide what to display based on the data returned. **No more client-side routing**. ### <ld-navigator> > Control current resource in relation to document path > Maintain browser history with HTML history API > Set up base resource URL and base client path to tweak routing ### <ld-link> > Initiate transition between application states ## Demos [Demos and sort-of documentation](https://routing.hypermedia.app/demo/). [`ld-navigation` also plays nice with location.hash history](https://routing.hypermedia.app/demo/#use-hash). ## Installation Run `yarn add ld-navigation` In your code ```js // main element, required import 'ld-navigation/ld-navigator' // optionally, to wrap links import 'ld-navigation/ld-link' // optionally, to initiate navigation manually import fireNavigation from 'ld-navigation/fireNavigation' ``` **No external dependencies** ## Usage Let's assume that: * Your website is at `http://www.my.app/`. * Your Linked Data API is at `http://api.my.app/`. ``` html get people get projects ``` With the above code, when you click the first link, the browser moves to `http://www.my.app/http://api.my.app/people` and the `resource-url-changed` event is fired. ### Base URL Obviously an URL like `http://www.my.app/http://api.my.app/people` is ugly (and, well, invalid). It is possible to get rid of the API domain by adding an attribute to the `` tag: ``` html ``` This way the API domain is stripped out from the browser address bar and `http://www.my.app/people` remains. This is where client-side routing becomes virtually obsolete. ### Polymer `ld-navigation` will also play nice with [Polymer](/Polymer/polymer/) - see the [demos](#demo) above. ## Tests Tests are written with [@open-wc/testing](http://open-wc.org). ``` bash yarn install yarn test:local ```
View on NPM
View on GitHub

ld-navigation version 0.1.0
### Dependencies

ld-navigation version 0.2.0
### Dependencies

ld-navigation version 0.2.1
### Dependencies

ld-navigation version 0.2.2
### Dependencies

ld-navigation version 0.2.3
### Dependencies

ld-navigation version 0.3.0-a1
### Dependencies

ld-navigation version 0.3.0-a2
### Dependencies

ld-navigation version 0.3.0-a3
### Dependencies

ld-navigation version 0.4-a1
### Dependencies

ld-navigation version 0.4.0-a2
### Dependencies

ld-navigation version 0.4.0-a3
### Dependencies

ld-navigation version 0.5.0-a1
### Dependencies * lit-html#0.14

ld-navigation version 0.5.0
### Dependencies

ld-navigation version 0.5.1
### Dependencies

ld-navigation version 0.5.2
### Dependencies