...
 
Commits (1)
## Synopsis
# sib-router
This is a series of web component respecting both the web components standards and the Linked Data Platform convention.
They are aimed at enabling anyone with little development skills to create their own web application by placing these components in an HTML file.
## Code Example
An full app example can be found in index.html:
## Initialization
......@@ -18,9 +16,7 @@ You first need to load the webcomponents polyfill for the browsers that have not
Then you can use the new tags in your markup, for instance : `<sib-router>`.
More details on each component in the following section.
## Components documentation
### sib-router &amp; sib-route
## Usage
Displays a menu and handle the navigation for you.
......@@ -37,18 +33,21 @@ Displays a menu and handle the navigation for you.
```
`<sib-router>` accepts the following attributes:
### `<sib-router>` attributes:
- **default-route**: The `name` attribute of the default `<sib-route>` displayed.
- **route-prefix**: If you app is not run from the root of your domain name, for instance `www.your-domain.com/some-uri`, you should set `route-prefix` to `"some-uri"`.
- **use-hash**: If you can't rewrite the URLs on your server, you might want to set this attribute to use `location.hash` instead of `location.pathname` as URLs.
`<sib-route>` accepts the following attributes:
### `<sib-route>` attributes:
- **name**: The name of the route. Must match the id of the view that is to be displayed. The same name is used as a url identifier as well.
- **rdf-type**: Can be used as an alternative of `name`. The route will be activated if a resource with the given type is passed to the router.
- **active**: This attribute is present on route being displayed by `<sib-router>`. It is automatically added/removed by `<sib-router>` and should not be tinkered manually.
### sib-link
## sib-link
`<sib-link>` accepts the following attributes:
- **next**: The `name` attribute of the `<sib-route>` you want to access.
......@@ -58,6 +57,8 @@ Example :
<sib-link next="profile">See profile</sib-link>
```
## Interacting with the router
### bind-resources attribute
To associate the currently displayed resource to a component, add the `bind-resources` attribute to it.
It will set its `data-src` attribute to the currently displayed resource's URL.
......@@ -71,11 +72,19 @@ will result in :
<sib-conversation data-src="https://your-domain/your-group-uri/3" bind-resources></sib-conversation>
```
### RequestNavigation
To trigger a route change through javascript, you can trigger a RequestNavigation event anywhere on the DOM.
The detail part must have at least one of these two parameters:
- route: the name of the route to activate
- resource: a resource that will be passed to all elements with the `bind-resources` attribute. If no route name is given, the router tries to find a route that has a `rdf-type` that matches the type of the resource.
## Events
Coming soon...
### navigate
This event is triggered whenever a route is activated, after the view is displayed.
## License
......