|
|
# Initialization
|
|
|
|
|
|
**If you use Edge**, you should first to load the webcomponents polyfill for your browser.
|
|
|
You can check if that's no longer the case, on the [official Web Component website](https://www.webcomponents.org/).
|
|
|
|
|
|
```html
|
|
|
<script
|
|
|
type="text/javascript"
|
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"
|
|
|
></script>
|
|
|
```
|
|
|
|
|
|
To start, simply import the core in your HTML file:
|
|
|
|
|
|
```html
|
|
|
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
|
|
|
```
|
|
|
|
|
|
Then you can use all the component included in the core.
|
|
|
|
|
|
## How works a Component ?
|
|
|
|
|
|
A component is a simple tag. Each component has its own attributes that allow us to customize its behavior.
|
|
|
|
|
|
Let's see an exemple with sib-display :
|
|
|
|
|
|
```html
|
|
|
<sib-display
|
|
|
data-src="http://api.myadress.com/users/"
|
|
|
fields="first_name, last_name"
|
|
|
></sib-display>
|
|
|
```
|
|
|
|
|
|
This code will retrieve the data from the uri assigned to the data-src attribute and display all fields present in the field attribute.
|
|
|
See the full explanation on [the doc of SiB Display](Components/SiB-Display).
|
|
|
|
|
|
## Core Components
|
|
|
|
|
|
Here you'll find the documentation for each component of the core :
|
|
|
|
|
|
* [SiB Display](Components/SiB-Display) - To display datas
|
|
|
* [SiB Form](Components/SiB-Form) - To display a form
|
|
|
* [SiB Delete](Components/SiB-Delete) - To delete datas
|
|
|
* [SiB Ac Checker](Components/SiB-Ac-Checker) - To manage permission
|
|
|
* [Sib Widget](Components/SiB-Widget) - To custom your rendering
|
|
|
* [SiB Calendar](Components/SiB-Calendar) - To display a calendar
|
|
|
* [SiB Map](Components/SiB-Map) - To display a map
|
|
|
|
|
|
|
|
|
## Framework Component
|
|
|
|
|
|
Some very useful components aren't in the core as you can just import what you need.
|
|
|
You'll see how to do that in their own documentation.
|
|
|
**Those components need the core to work.**
|
|
|
|
|
|
* [SiB Router](https://git.happy-dev.fr/startinblox/framework/sib-router/wikis/SiB-Router) - Displays a menu and handle the navigation for you.
|
|
|
* [SiB OIDC](https://git.happy-dev.fr/startinblox/framework/sib-oidc/wikis/Sib-OIDC) - To login with an OIDC provider.
|
|
|
* [SiB Generator](https://git.happy-dev.fr/startinblox/framework/sib-generator/wikis/SiB-Generator) - Convert content to pdf and initiate a download of the pdf file in the browser.
|
|
|
* [SiB Notification](https://git.happy-dev.fr/startinblox/framework/sib-notifications/wikis/SiB-Notification) - To get notifications, which include [SiB Badge](https://git.happy-dev.fr/startinblox/framework/sib-notifications/wikis/SiB-Badge) to see the number of unread inbox.
|
|
|
|
|
|
## Other Components
|
|
|
As use cases arise, new components are developed. **Those components do not need the core to work.**
|
|
|
Here is a list of those that have been developed by Startin' Blox so far:
|
|
|
|
|
|
* [SiB Conversation](https://git.happy-dev.fr/startinblox/components/sib-conversation/wikis/SIB-Conversation) - To make a "facebook-like" conversation.
|
|
|
|
|
|
#### Imagine your components !
|
|
|
There is [a tutorial](./How to make components ?) to learn how to create your own components. |
|
|
\ No newline at end of file |