widget-mixin.rst

widget-mixin
============

The widget mixin allows to create a widget in the DOM for each properties of a resource, and set its value.

Used by:
--------

* `solid-display `__
* `solid-form `__
* `solid-map `__

Attributes
----------

``fields``
~~~~~~~~~~
The ordered list of fields to be displayed, separated by commas.

By default, all the fields of the resource are displayed.

To not show any fields, put an empty fields (eg.
``)``

By default, all displayed fields are inserted into a ``

``

**Sets**

To group fields within a ``

`` tag, enclose some fields in parenthesis.

In this example, a ``

`` will be created, and it will contain
the widgets of the first name and the last name of the user.

.. code:: html

You can customize the group widget, see the `Sets widgets `__
page for more info.

``value-[field]``
~~~~~~~~~~~~~~~~~
To display a string not contained within the data.

.. code:: html

``default-[field]``
~~~~~~~~~~~~~~~~~~~
Value displayed for ``[field]`` when it’s empty or not defined

``widget-[field]``
~~~~~~~~~~~~~~~~~~
The widget to be used to display the ``[field]``

default-widget
~~~~~~~~~~~~~~~~
The widget to use for all the fields, except if a specific one is defined for a field.

``action-[field]``
~~~~~~~~~~~~~~~~~~

``label-[field]``
~~~~~~~~~~~~~~~~~
Set the label for the ``[field]``

``placeholder-[field]``
~~~~~~~~~~~~~~~~~~~~~~~
Set the placeholder for the ``[field]``

``class-[field]``
~~~~~~~~~~~~~~~~~
Set the class applied to the widget of the ``[field]``

``editable-[field]``
~~~~~~~~~~~~~~~~~~~~
*Does not work with ``solid-form``*

Add an “edit” button next to the ``[field]`` to let the user edit it.
The changes are saved as soon as the field loses focus.

The editable attribute works with the following widgets:

- ``solid-display-div``
- ``solid-display-labelled-div``
- ``solid-display-mailto``
- ``solid-display-tel``

``multiple-[field]``
~~~~~~~~~~~~~~~~~~~~
Show ``[field]`` as multiple field containing
one widget for each child.

Multiple widget can be specified, example:
``multiple-skills="my-custom-multiple-widget"``. If argument is used
without value, default multiple widget is used. Cf the `Multiple
widgets `__ page below for more info.

All attributes starting by ``each`` will be applied on each child,
without the prefix ``each``.

- ``each-label-[field]``: label of each child of multiple widget
- ``each-class-[field]``: class of each child of multiple widget
- ``each-range-[field]``: range value of each child of multiple widget
- ``each-range-[field]``: range value of each child of multiple widget

For ``solid-form`` only:

``multiple-[field]-add-label``
++++++++++++++++++++++++++++++
Text of the “+” button used to add an element

``multiple-[field]-remove-label``
+++++++++++++++++++++++++++++++++
Text of the “x” button used to remove an element