diff --git a/source/_static/images/import_documentation/widgets-examples/widget-action.png b/source/_static/images/import_documentation/widgets-examples/widget-action.png new file mode 100644 index 0000000000000000000000000000000000000000..ba4854a3d23a8f454f38090856103d948e11161d Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-action.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-action2.png b/source/_static/images/import_documentation/widgets-examples/widget-action2.png new file mode 100644 index 0000000000000000000000000000000000000000..516b5863a00f631958441a900ed267803b31f025 Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-action2.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-action3.png b/source/_static/images/import_documentation/widgets-examples/widget-action3.png new file mode 100644 index 0000000000000000000000000000000000000000..909bcc3385a80ae7d4956a99350f7ba9ff7964ff Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-action3.png differ diff --git a/source/import_documentation/Mixins/widget-mixin.rst b/source/import_documentation/Mixins/widget-mixin.rst index aabcd8bec1749059fa70ba68f84e83de2d2731b6..abf7fd2d1f7d6c27a1b9fb4a0a47642920343d90 100644 --- a/source/import_documentation/Mixins/widget-mixin.rst +++ b/source/import_documentation/Mixins/widget-mixin.rst @@ -75,7 +75,6 @@ Attributes value-title="My custom and static title" ></solid-display> - .. _default-field: ``default-[field]`` ~~~~~~~~~~~~~~~~~~~ @@ -106,6 +105,17 @@ Attributes Displays a link with a ``<solid-link>`` tag with the current resource as ``data-src`` and the value of the attribute as ``next``. +.. _link-text-field: +``link-text-[field]`` +~~~~~~~~~~~~~~~~~~~~~ + *Works only with solid-display-link(-mailto/tel/blank) and solid-action* + *Available from version 0.18* + + Modify the displayed value as link in : + + - ``<a>`` for solid-display-link, + - ``<solid-link>`` in solid-action. + .. _src-field: ``src-[field]`` ~~~~~~~~~~~~~~~ diff --git a/source/import_documentation/Widgets/Examples.rst b/source/import_documentation/Widgets/Examples.rst index a33ea24b42133c2a80a413960800d0fc34ec73a3..dc3bc2e35b8c0c0000fe5c1974983706b623350e 100644 --- a/source/import_documentation/Widgets/Examples.rst +++ b/source/import_documentation/Widgets/Examples.rst @@ -1,3 +1,5 @@ +.. _widgets-examples: + Examples ========= @@ -175,6 +177,71 @@ solid-set-div *The border is applied on solid-set-div* +solid-action +~~~~~~~~~~~~ + +A classic example of solid-action use is a list of resources (users here) with only one field displayed and the possibility to access additionnal informations by clicking on "User details" : + +.. code:: html + + <solid-display + data-src="data/list/users.jsonld" + fields="name, details" + value-details="User details" + label-name="Name :" + widget-name="solid-display-value-label" + ></solid-display> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action.png + :alt: Basic solid-display + +This is the solid-display with action attribute and link-text-[field] attribute use to replace the basic value-[field] from above. + +.. code:: html + + <solid-display + data-src="data/list/users.jsonld" + fields="name, details" + label-name="Name :" + widget-name="solid-display-value-label" + action-details="user-details" + link-text-details="User details" + ></solid-display> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action2.png + :alt: Widget solid-action + +By adding a router, a route and another view, clicking on the solid-action displays the view (dotted border): + +.. code:: html + + <solid-router use-hash> + <solid-route + hidden + use-id + name="user-details" + ></solid-route> + </solid-router> + + <solid-display + data-src="data/list/users.jsonld" + fields="name, details" + label-name="Name :" + widget-name="solid-display-value-label" + action-details="user-details" + link-text-details="User details" + ></solid-display> + + <div data-view="user-details" hidden> + <solid-display + bind-resources + fields="first_name, last_name, username, email" + ></solid-display> + </div> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action3.png + :alt: Widget solid-action with view + Step-by-step widget creation ---------------------------- diff --git a/source/import_documentation/Widgets/Reference.rst b/source/import_documentation/Widgets/Reference.rst index b627cadb4927849f9fa7b3a80386cea86070619e..93d04d51166a04fcd9294a6754b93a14a1d69c72 100644 --- a/source/import_documentation/Widgets/Reference.rst +++ b/source/import_documentation/Widgets/Reference.rst @@ -84,7 +84,7 @@ Available templates : - **default** (no type 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. + ``value`` for the ``next`` attribute and ``link-text`` 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 ``multiple-[field name]-fields`` attribute.