diff --git a/source/import_documentation/Use-a-component-alone-in-an-existing-application.rst b/source/import_documentation/Use-a-component-alone-in-an-existing-application.rst index 25da7c433bd0bcb1496ff2b11643c06790168a0e..2e0a513cb3cc8f4cf95c2d0091d56c81e125b26a 100644 --- a/source/import_documentation/Use-a-component-alone-in-an-existing-application.rst +++ b/source/import_documentation/Use-a-component-alone-in-an-existing-application.rst @@ -1,8 +1,13 @@ -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 -Compoponent, it’s very easy. +Startin'blox was designed to be modular. You need to add a calendar or a map to your website? +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 ---------------------------------- @@ -10,11 +15,11 @@ Compoponent, it’s very easy. To start, simply import the core in your head tag: .. 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 -------------------------------- @@ -23,47 +28,52 @@ In the documentation of the component you’ve chosen, you’ll find the script to import. .. code:: html - - <script type="module" src="https://unpkg.com/@startinblox/my-component"></script> + <!-- ... Import the core ... --> + <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 --------------------- -A component is a simple tag. Each component has its own attributes that -allow us to customize its behavior. +A component is a simple tag with attributes that 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 - <sib-display - data-src="http://api.myadress.com/users/" - fields="first_name, last_name" - ></sib-display> + <sib-component + data-src="http://api.myadress.com/sources/" + fields="attribute_X, attribute_Y" + ></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>`__ :) diff --git a/source/import_documentation/build-full-application.rst b/source/import_documentation/build-full-application.rst index 20a60ad5df2574ac2419854531af49fafed496eb..e7f939bc702b921aab44ae1b732079d5174fb0c5 100644 --- a/source/import_documentation/build-full-application.rst +++ b/source/import_documentation/build-full-application.rst @@ -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. -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 --------------- diff --git a/source/import_documentation/the-basics.rst b/source/import_documentation/the-basics.rst new file mode 100644 index 0000000000000000000000000000000000000000..76d5ba0c0112e7423a0374ab1b6901f32b69e9bf --- /dev/null +++ b/source/import_documentation/the-basics.rst @@ -0,0 +1,42 @@ +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>`__ :)