Skip to content
Snippets Groups Projects
Commit be4f56fe authored by Alice Poggioli's avatar Alice Poggioli
Browse files

update add a component

parent a07db3cd
No related branches found
No related tags found
No related merge requests found
Initialization Add a component to a website
============== ============================
Use Startin'blox according to your needs.
If you have already an application and you want to add a Sib Startin'blox was designed to be modular. You need to add a calendar or a map to your website?
Compoponent, it’s very easy. SiB allows you to add functionality in a few minutes, with the minimum of skills.
Here, we will see how to add a Startin'blox component to an existing HTML page. You can follow the steps with your own website, or with an empty HTML page for practice.
No need for complicated tools or installations: to follow this section, you just need an internet connection and a minute of your time.
1. Import the core of Startin’blox 1. Import the core of Startin’blox
---------------------------------- ----------------------------------
...@@ -10,11 +15,11 @@ Compoponent, it’s very easy. ...@@ -10,11 +15,11 @@ Compoponent, it’s very easy.
To start, simply import the core in your head tag: To start, simply import the core in your head tag:
.. code:: html .. code:: html
<!-- ... Import the core ... -->
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
</head>
<script type="module" src="https://unpkg.com/@startinblox/core"></script> It enables you to use Startin’blox technology and all the main components from the core of the framework.
It enables you to use Startin’blox technology and all the main
components from the core of the framework.
2. Import the component you want 2. Import the component you want
-------------------------------- --------------------------------
...@@ -23,47 +28,52 @@ In the documentation of the component you’ve chosen, you’ll find the ...@@ -23,47 +28,52 @@ In the documentation of the component you’ve chosen, you’ll find the
script to import. script to import.
.. code:: html .. code:: html
<!-- ... Import the core ... -->
<script type="module" src="https://unpkg.com/@startinblox/my-component"></script> <script type="module" src="https://unpkg.com/@startinblox/core"></script>
<!-- ... Import your component ... -->
<script type="module" src="https://unpkg.com/@startinblox/my-sib-component"></script>
</head>
3. Use your component 3. Use your component
--------------------- ---------------------
A component is a simple tag. Each component has its own attributes that A component is a simple tag with attributes that allow us to customize its behavior.
allow us to customize its behavior.
The main interest of startin'blox is to be able to plug to your component the data sources of your choice. It can be public data sources or your own data sources.
Let’s see an exemple with sib-display : => `How to create your own data sources <How-to-make-components/>`__
Each component has its own documentation where you'll fine the script import and its use.
.. code:: html .. code:: html
<sib-display <sib-component
data-src="http://api.myadress.com/users/" data-src="http://api.myadress.com/sources/"
fields="first_name, last_name" fields="attribute_X, attribute_Y"
></sib-display> ></sib-component>
That's it!
Now all you have to do is stylize it :)
Are you in some kind of trouble?
--------------------------------
There are to kind of component : **the officials ones** and **the community ones**.
If the component you have a problem with is an official component, `ask the Startin'blox team for help <https://community.startinblox.com/>`__!
If it is a Community component, in the readme.md of the component should give you the address of the maintainer. You can contact them directly.
If the component does not quite meet your expectations, you can also propose your variation.
=> `See how to develop components <How-to-make-components/>`__.
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>`__.
Default component available in the core
---------------------------------------
By importing the Startin’blox core, the following main components are
available :
- `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
Imagine your components !
-------------------------
There is `a tutorial <./How%20to%20make%20components%20?>`__ to learn
how to create your own components.
If you have any difficulties, don’t hesitate to ask people on `our
chat <community.startinblox.com>`__ :)
...@@ -20,24 +20,7 @@ To start, simply import the core in your HTML file: ...@@ -20,24 +20,7 @@ To start, simply import the core in your HTML file:
Then you can use all the component included in the core. 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 :
.. code:: 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 Core Components
--------------- ---------------
......
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 :
.. code:: 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>`__.
Default component available in the core
---------------------------------------
By importing the Startin’blox core, the following main components are
available :
- `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
Imagine your components !
-------------------------
There is `a tutorial <./How%20to%20make%20components%20?>`__ to learn
how to create your own components.
If you have any difficulties, don’t hesitate to ask people on `our
chat <community.startinblox.com>`__ :)
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment