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

update: new widget doc

parent 4de07dff
No related branches found
No related tags found
2 merge requests!19Enum dropdown radio solid-form-search,!8Core 0.11
Display widgets
===============
Startin'blox provides a list of default widgets to display content:
``solid-display-value``
~~~~~~~~~~~~~~~~~~~~~~~
Displays the value.
``solid-display-div``
~~~~~~~~~~~~~~~~~~~~~
Displays the ``value`` inside a ``<div>`` HTML tag.
``solid-display-labelled-div``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Displays the ``value`` inside a ``<div>`` HTML tag, after the ``label`` contained in a ``<label>`` HTML tag.
``solid-display-multiline``
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Displays the ``value`` inside a ``<div>``, ``\n`` are replaced by ``<br>``.
``solid-display-labelled-boolean``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Displays the ``label`` inside a ``<label>`` HTML tag if the ``value`` is true.
``solid-display-img``
~~~~~~~~~~~~~~~~~~~~~
Inserts the ``value`` as the src attribute value of an ``<img>`` HTML tag.
``solid-display-mailto``
~~~~~~~~~~~~~~~~~~~~~~~~~
Displays a link inside a ``<a>`` HTML tag with a ``mailto:value`` as path. If a label is defined for this field, it’s displayed as the content of the link.
``solid-display-tel``
~~~~~~~~~~~~~~~~~~~~~
Displays a link inside a ``<a>`` HTML tag with a ``tel:value`` as path.
``solid-display-link``
~~~~~~~~~~~~~~~~~~~~~~
Displays a link inside a ``<a>`` HTML tag with the value as path, and the label as text content.
``solid-display-date``
~~~~~~~~~~~~~~~~~~~~~~
Displays a date in the browser’s default locale format.
``solid-display-date-time``
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Displays a date and a time in the browser’s default locale format.
Form widgets
===============
Startin'blox provides a list of default widgets to use in a form:
``solid-form-label-text``
~~~~~~~~~~~~~~~~~~~~~~~~~
Inserts an ``<input/>`` HTML tag of type “text”, in a ``<label>`` HTML tag.
``solid-form-checkbox``
~~~~~~~~~~~~~~~~~~~~~~~
Inserts an ``<input/>`` HTML tag of type “checkbox”, in a ``<label>`` HTML tag.
``solid-form-date``
~~~~~~~~~~~~~~~~~~~
Inserts an ``<input/>`` HTML tag of type “date”, in a ``<label>`` HTML tag.
``solid-form-range-date``
~~~~~~~~~~~~~~~~~~~~~~~~~
``solid-form-json``
~~~~~~~~~~~~~~~~~~~
Inserts an ``<input/>`` HTML tag of type “text”, in a ``<label>`` HTML tag, and with its ``value`` converted from JSON to string
``solid-form-placeholder-text``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Inserts an ``<input/>`` HTML tag of type “text”, with the ``label`` as placeholder.
``solid-form-textarea``
~~~~~~~~~~~~~~~~~~~~~~~
Inserts an ``<textarea>`` HTML tag in a ``<label>`` HTML tag.
``solid-form-dropdown``
~~~~~~~~~~~~~~~~~~~~~~~
Inserts a ``<select>`` HTML tag to select a unique value from a list.
The list is provided via the ``range-xyz``, which expects a container’s URL.
**xyz** is the name of the field using the ``solid-form-dropdown`` widget.
``solid-form-placeholder-dropdown``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Inserts a ``<select>`` HTML tag to select a unique value from a list.
It has no label but a default disabled value as a label
``solid-form-auto-completion``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Inserts a ``<input />`` HTML tag and load an autocomplete plugin.
The list is provided via the ``range-xyz``, which expects a container’s URL.
**xyz** is the name of the field using the ``solid-form-auto-completion`` widget.
``solid-form-number``
~~~~~~~~~~~~~~~~~~~~~
Inserts an ``<input/>`` HTML tag of type “number”, in a ``<label>`` HTML tag.
``solid-form-range-number``
~~~~~~~~~~~~~~~~~~~~~~~~~~~
``solid-form-file``
~~~~~~~~~~~~~~~~~~~
Inserts an ``<input/>`` and an ``<input type="file"/>``.
When a file is selected it’s uploaded, URL of file is returned by request and set as the ``<input/>`` value.
The upload URL is provided via the ``upload-url`` attribute.
``solid-form-hidden``
~~~~~~~~~~~~~~~~~~~~~
Inserts an ``<input/>`` HTML tag of type “hidden”, in a ``<label>`` HTML tag.
\ No newline at end of file
Multiple widgets
===============
Startin'blox provides a list of default widgets to handle multiples:
``solid-multiple``
~~~~~~~~~~~~~~~~~~
*default for display*
Inserts all the widgets in a ``<solid-multiple>`` tag.
``solid-multiple-form``
~~~~~~~~~~~~~~~~~~~~~~~
*default for forms*
Inserts all the widgets in a ``<solid-multiple-form>`` tag, with a “remove” button for each widget, and an “add” button.
``solid-multiple-select``
~~~~~~~~~~~~~~~~~~~~~~~~~
Inserts all the values as ``<option>`` in a ``<select>`` tag with a ``multiple`` attribute.
Widgets
=======
Widgets are created at the moment you ask for it for the first time.
The name of the widget is analyzed to use the features and template you want.
Here is the form of a widget:
``solid-[type]-[template]-[features]``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*All the keywords must be separated by ``-`` but can be put in any order.*
``type``
++++++++
Can be ``display`` , ``form`` or ``set``. Will select the directory of template to use.
``template``
++++++++++++
Name of the template to use. Available templates:
- ``display`` directory
- ``value``: displays ``value`` directly in the widget tag.
- ``div``: displays ``value`` inside a ``<div>`` tag
- ``link``: displays ``value`` as an ``href`` attribute in a ``<a>`` tag
- ``img``: displays ``value`` as a ``src`` attribute in a ``<img>`` tag
- ``boolean``: displays label (or name) in a ``<label>`` tag if ``value == true``
- ``form`` directory
- ``text``: set ``value`` in an ``<input>`` of type ``text``
- ``textarea``: set ``value`` in a ``<textarea>``
- ``checkbox``: create a checkbox, which is checked if ``value == true``
- ``date``: set ``value`` in an ``<input>`` of type ``date``
- ``rangedate``: set 2 values in 2 ``<input>`` of type ``date``. Used for filtering with min and max.
- ``number``: set ``value`` in an ``<input>`` of type ``number``
- ``rangenumber``: set 2 values in 2 ``<input>`` of type ``number``. Used for filtering with min and max.
- ``hidden``: set ``value`` in an ``<input>`` of type ``hidden``
- ``dropdown``: set ``value`` in a ``<select>``. The list is provided via the ``range`` attribute, which expects a container’s URL.
- ``radio``: set ``value`` in a list of radio buttons. The list is provided via the ``range`` attribute, which expects a container’s URL.
- ``multiple``: Accept a container URI as a ``value``, and inserts one widget per resource with a “remove” button for each widget, and an “add” button.
- ``multipleselect``: Accept a container URI as a ``value``, and inserts a dropdown widget with the ``multiple`` attribute.
- ``file``: Inserts an ``<input/>`` and an ``<input type="file"/>``.
When a file is selected it’s uploaded, URL of file is returned by request and set as the ``<input/>`` value.
The upload URL is provided via the ``upload-url`` attribute.
- ``image``: Works like ``file`` but allow only images in the input, and create a preview of the image when selected by the user.
- ``set``
- ``default``: inserts widgets directly in the set tag.
- ``div``: inserts widgets in a ``<div>`` tag
- ``ul``: inserts widgets in a ``<ul>`` tag
- default (no template keyword defined)
- ``action``: Displays a link inside a ``<solid-link>`` tag with ``src`` for the ``data-src`` attribute,
``value`` for the ``next`` attribute and ``label`` as text content.
- ``multiple``: insert a ``solid-display`` with the ``@id`` of a container as ``data-src``.
The fields to display are chosen with the ``fields`` attribute.
``features``
++++++++++++
Features to add to the widget. You can choose as many as you want
- ``label``: adds a ``label`` before the template. Uses the attribute ``name`` if ``label`` is not defined
- ``labellast``: adds a ``label`` after the template. Uses the attribute ``name`` if ``label`` is not defined
- ``autocompletion``: initializes the ``SlimSelect`` plugin. Works only with dropdowns
- ``autolink``: analyzes widget content, and transforms all links in anchor.
- ``mailto``: adds ``mailto:`` at the beginning of an ``href`` attribute. Works only with links
- ``tel``: adds ``tel:`` at the beginning of an ``href`` attribute. Works only with links
- ``blank``: adds an attribute ``target="_blank"``. Works only with links
- ``placeholder``: adds a placeholder in the input. Uses the attribute ``name`` or ``label`` if ``placeholder`` is not defined. Works only with input widgets.
- ``date``: transforms the value in a date, in the browser’s default locale format.
- ``datetime``: transforms the value in a date and time, in the browser’s default locale format.
- ``multiline``: Shows a value on multiple lines (replace ``\n`` by ``<br>``)
Examples
~~~~~~~~
Other widgets
===============
Set widgets
~~~~~~~~~~~
``solid-set-default``
+++++++++++++++++++++
*default*
Inserts content directly in the set tag.
``solid-set-div``
+++++++++++++++++
Inserts content in a ``<div/>`` HTML tag.
``solid-set-ul``
++++++++++++++++
Inserts content in a ``<ul/>`` HTML tag.
``solid-set-fieldset``
++++++++++++++++++++++
Inserts content in a ``<fieldset/>`` HTML tag.
Actions widgets
~~~~~~~~~~~~~~~
``solid-action``
++++++++++++++++
Displays a link inside a ``<solid-link>`` tag with ``src`` for the ``data-src`` attribute,
``value`` for the ``next`` attribute and ``label`` as text content.
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