Skip to content
Snippets Groups Projects
Commit d93d6337 authored by Matthieu Fesselier's avatar Matthieu Fesselier
Browse files

update doc

parent ffa7615c
No related branches found
No related tags found
No related merge requests found
Showing
with 65 additions and 33 deletions
......@@ -7,7 +7,7 @@ Receives the URL of a resource or of a container of resources via its
.. code:: html
<solid-delete data-src="http://localhost:8000/conversations/9/"></solid-delete>
<solid-delete data-src="http://server/conversations/9/"></solid-delete>
Mixins
......
......@@ -13,11 +13,18 @@ added to interact with the list of data being displayed.
.. code:: html
<solid-display
data-src="https://api.startinblox.com/users/"
data-src="https://server/users/"
fields="first_name, last_name"
></solid-display>
To make the styling easier, if the ``solid-display`` shows a resource,
a ``solid-resource`` attribute is automatically added to the element.
If it's a container, a ``solid-container`` attribute is added.
Then, you can target your elements with the CSS rules ``solid-display[solid-resource]``
or ``solid-display[solid-container]``.
Mixins
------
......@@ -47,9 +54,9 @@ Attributes
``<solid-display>``. Make sure you don’t give your set the same name as
a field as it would result in an infinite loop.
``child-xyz``
``child-[field]``
~~~~~~~~~~~~~
add attribute ``xyz`` to all children.
add attribute ``[field]`` to all children.
Widgets
......
......@@ -14,7 +14,7 @@ This must have a ``filtered-by`` attribute set to the id of the current ``solid-
></solid-form-search>
<solid-display
data-src="http://example.com/users"
data-src="http://server/users"
fields="username, last_name, email"
filtered-by="my-filter"
></solid-display>
......@@ -36,7 +36,7 @@ Attributes
~~~~~~~~~~
List of fields used to perform the search.
``label-xyz``
``label-[field]``
~~~~~~~~~~~~~
When displaying a form, the default labels are the fields names of the model.
If you want something fancier, you can set this attribute.
......@@ -44,26 +44,30 @@ Attributes
``submit-button``
~~~~~~~~~~~~~
*Available from version 0.13*
Text of the submit button to create in the search form. If the attribute is not defined,
no button will be added and the form will trigger the search on change.
``range-xyz``
``range-[field]``
~~~~~~~~~~~~~
URL of a container which list the accepted values
for the field ``xyz``. It’s particularly useful with a dropdown
for the field ``[field]``. It’s particularly useful with a dropdown
field.
``enum-xyz``
``enum-[field]``
~~~~~~~~~~~~~
List of values of your choice for the field ``xyz``.
*Available from version 0.13*
List of values of your choice for the field ``[field]``.
They have to be filled manually and must be separated by commas.
It’s particularly useful with a dropdown or radio field.
Two formats are possible:
* ``enum-xyz="value1, value2, value3"`` : each value will be displayed
* ``enum-[field]="value1, value2, value3"`` : each value will be displayed
and loaded in value attribute
* ``enum-xyz="value1 = a, value2 = b, value3 = c"``: each value will be displayed
* ``enum-[field]="value1 = a, value2 = b, value3 = c"``: each value will be displayed
and "a", "b", "c" will be loaded in value attribute.
Widgets
......
......@@ -9,7 +9,7 @@ container.
.. code:: html
<solid-form data-src="http://localhost:8000/todos/"></solid-form>
<solid-form data-src="http://server/todos/"></solid-form>
Mixins
------
......@@ -58,6 +58,8 @@ Attributes
``enum-[field]``
~~~~~~~~~~~~~
*Available from version 0.13*
List of values of your choice for the field ``[field]``.
They have to be filled manually and must be separated by commas.
It’s particularly useful with a dropdown or radio field.
......@@ -90,16 +92,22 @@ Attributes
``pattern-[field]``
~~~~~~~~~~~~~~~
*Available from version 0.13*
Add this attribute for the field ``[field]`` to define a regular expression to check the input's value.
It works only with a ``solid-form-text`` widget.
``title-[field]``
~~~~~~~~~~~~~~
*Available from version 0.13*
Add this attribute for the field ``[field]`` to precise extra information about an element.
It works only with a ``solid-form-text`` widget.
``confirmation-message``
~~~~~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.13*
Add this attribute to create a dialog box linked with the submit button of the solid-form.
Its value matches the message displayed in the dialog box.
......
......@@ -30,8 +30,8 @@ But for now, here are some events that will be useful to you.
Examples
~~~~~~~~
Populate
^^^^^^^^
``populate``
^^^^^^^^^^^^
Use to do something if and when the element is generated.
......@@ -41,8 +41,8 @@ Use to do something if and when the element is generated.
// Do something when the element is generated.
})
Save
^^^^
``save``
^^^^^^^^
Use to do something when a form is successfully saved.
......
......@@ -26,7 +26,7 @@ Creating a component, you should import those function like this :
.. code:: js
import { Helpers } from "https://unpkg.com/@startinblox/core@0.10";
import { Helpers } from "https://unpkg.com/@startinblox/core@0.12/dist/libs/helpers.js";
You should always use ``importCSS`` and ``importJS`` to make your extra
importation. Otherwise, you’ll get this king of message :
......
......@@ -18,12 +18,12 @@ Attributes
``filtered-by``
~~~~~~~~~~~~~~~
Target a `<sib-form-search>` used to filter current list of resource.
Target a ``<solid-form-search>`` used to filter current list of resource.
example:
.. code:: html
<solid-form-search
id="my-filter"
fields="email"
......@@ -31,7 +31,7 @@ Attributes
></solid-form-search>
<solid-display
data-src="http://example.com/users"
data-src="http://server/users"
fields="username, last_name, email"
filtered-by="my-filter"
></solid-display>
......
......@@ -17,6 +17,7 @@ Attributes
``group-by``
~~~~~~~~~~~~
The resources will be grouped by the field you give as a parameter.
In this example, the mixin will render one
......@@ -33,8 +34,12 @@ Attributes
When used with the pagination, each group is paginated.
You can also use the dot syntax to group by a nested resource. For example,
set the ``group-by`` attribute to ``nested_resource.name``.
``group-widget``
~~~~~~~~~~~~~~~~~~~
*Available from version 0.13*
default: ``solid-group-default``
The name of the widget to use as a group widget.
......
......@@ -14,9 +14,11 @@ Used by:
Attributes
----------
``required-xyz``
``required-[field]``
~~~~~~~~~~~~~~~~
The attribute takes no value. ``xyz`` represents the mandatory property of resources to be displayed.
*Available from version 0.13*
The attribute takes no value. ``[field]`` represents the mandatory property of resources to be displayed.
In this example, users must have email to be dislayed.
......@@ -28,4 +30,4 @@ Attributes
required-email
></solid-display>
It is possible to combine this mixin twice, ``required-uvw`` and ``required-xyz``.
\ No newline at end of file
It is possible to combine this mixin twice, ``required-uvw`` and ``required-[field]``.
\ No newline at end of file
......@@ -77,6 +77,8 @@ Attributes
``no-render``
~~~~~~~~~~~~~
*Available from version 0.13*
While this attribute is present on a component, no data will be fetched.
This attribute is automatically removed by the router when the component
is in a view which has been activated.
......@@ -85,6 +87,8 @@ Attributes
``store://`` attribute values
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.13*
This mixin decode all attribute values starting by ``store://resource`` or
``store://user`` and replace them by the values fetched from the store.
......
......@@ -12,19 +12,21 @@ For each component, you will find:
**External components** don’t belong to the core of the framework but are often used in applications.
.. note::
Each component have its own features, and is composed of mixins which provides new ones.
Therefore, attributes and events of a component are the combination of attributes and events of
all its mixins.
In the **mixin** section, each one has:
* a description of its function,
* a list of components using it,
* a list of attributes,
* a list of events.
The **widget** section presents the API to create widgets and give examples about how to create and use them.
The **widget** section presents the API to create widgets and gives examples about how to create and use them.
The last section concerns **Javascript API** you can use with sib-core.
......@@ -3,7 +3,7 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
:caption: First Step:
:caption: First Step
import_documentation/what-is-sib
import_documentation/why-use-sib
......@@ -13,7 +13,7 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
:caption: How it works:
:caption: How it works
import_documentation/How-to-make-components
import_documentation/install-sib-server
......@@ -23,14 +23,14 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
:caption: Introduction to the core documentation:
:caption: Get started with sib-core
import_documentation/introduction-framework-documentation
import_documentation/attributes-list
.. toctree::
:maxdepth: 2
:caption: Base components:
:caption: Base components
import_documentation/Components/Solid-Display
import_documentation/Components/Solid-Form
......@@ -44,7 +44,7 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
:caption: External components:
:caption: External components
import_documentation/Components/Solid-Auth
import_documentation/Components/Solid-Router
......@@ -52,7 +52,7 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
:caption: Mixins:
:caption: Mixins
import_documentation/Mixins/store-mixin
import_documentation/Mixins/widget-mixin
......@@ -69,14 +69,14 @@ Welcome to Startinblox's documentation
.. toctree::
:maxdepth: 2
:caption: Widgets:
:caption: Widgets
import_documentation/Widgets/Reference
import_documentation/Widgets/Examples
.. toctree::
:maxdepth: 2
:caption: Javascript API:
:caption: Javascript API
import_documentation/Events
import_documentation/Helpers-functions
......
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