README.md 2.57 KB
Newer Older
Sylvain Le Bon's avatar
Sylvain Le Bon committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14
## Synopsis

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

You first need to load the webcomponents polyfill for the browsers that have not implemented them yet, and import the components you want to use in your HTML file:
```html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
15
<script type="module" src="https://unpkg.com/@startinblox/router@latest"></script>
Sylvain Le Bon's avatar
Sylvain Le Bon committed
16 17
```

Alexandre's avatar
Alexandre committed
18 19
Then you can use the new tags in your markup, for instance : `<sib-router>`. 
More details on each component in the following section. 
Sylvain Le Bon's avatar
Sylvain Le Bon committed
20 21 22

## Components documentation

Clément's avatar
Clément committed
23
### sib-router &amp; sib-route
Sylvain Le Bon's avatar
Sylvain Le Bon committed
24

Alexandre's avatar
Alexandre committed
25
Displays a menu and handle the navigation for you.
Sylvain Le Bon's avatar
Sylvain Le Bon committed
26 27

```html
Alexandre's avatar
Alexandre committed
28
<sib-router 
Sylvain Le Bon's avatar
Sylvain Le Bon committed
29 30
    default-route="list"
    route-prefix="my-app"
Alexandre's avatar
Alexandre committed
31
    use-hash
Sylvain Le Bon's avatar
Sylvain Le Bon committed
32
>
Alexandre's avatar
Alexandre committed
33 34 35 36
    <sib-route name="list">List</sib-route>
    <sib-route name="form">Form</sib-route>
    <sib-route name="detail">Details</sib-route>
</sib-router>
Sylvain Le Bon's avatar
Sylvain Le Bon committed
37 38 39

```

Alexandre's avatar
Alexandre committed
40 41 42
`<sib-router>` accepts the following attributes:

 - **default-route**: The `name` attribute of the default `<sib-route>` displayed.
Clément's avatar
Clément committed
43
 - **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"`. 
Alexandre's avatar
Alexandre committed
44
 - **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. 
Alexandre's avatar
Alexandre committed
45 46 47 48 49 50
 
`<sib-route>` accepts the following attributes:

 - **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.


Alexandre's avatar
Alexandre committed
51
### sib-link
Alexandre's avatar
Alexandre committed
52
`<sib-link>` accepts the following attributes:
Alexandre's avatar
Alexandre committed
53 54 55

 - **next**: The `name` attribute of the `<sib-route>` you want to access.

Alexandre's avatar
Alexandre committed
56
Example :
Alexandre's avatar
Alexandre committed
57 58
```html
<sib-link next="profile">See profile</sib-link>
Alexandre's avatar
Alexandre committed
59
```
Alexandre's avatar
Alexandre committed
60

Alexandre's avatar
Alexandre committed
61 62
### bind-resources attribute
To associate the currently displayed resource to a component, add the `bind-resources` attribute to it.
Alexandre's avatar
Alexandre committed
63
It will set its `data-src` attribute to the currently displayed resource's URL. 
Alexandre's avatar
Alexandre committed
64 65 66 67 68 69 70 71 72 73

Example:
```html
<sib-conversation bind-resources></sib-conversation>
```
will result in :
```html
<sib-conversation data-src="https://your-domain/your-group-uri/3" bind-resources></sib-conversation>
```

Alexandre's avatar
Alexandre committed
74

Sylvain Le Bon's avatar
Sylvain Le Bon committed
75 76
## Events

Sylvain Le Bon's avatar
Sylvain Le Bon committed
77
Coming soon...
Sylvain Le Bon's avatar
Sylvain Le Bon committed
78 79 80 81


## License

Sylvain Le Bon's avatar
Sylvain Le Bon committed
82
Licence MIT
Sylvain Le Bon's avatar
Sylvain Le Bon committed
83 84 85