diff --git a/source/_static/images/import_documentation/widgets-examples/widget-date.png b/source/_static/images/import_documentation/widgets-examples/widget-date.png new file mode 100644 index 0000000000000000000000000000000000000000..88c90d07d8d12833ae5c7fd20ab4cc6a85ae4f01 Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-date.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-dropdown.png b/source/_static/images/import_documentation/widgets-examples/widget-dropdown.png new file mode 100644 index 0000000000000000000000000000000000000000..38cac37e89eb946220c6b8935a1a22c449da03b5 Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-dropdown.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-img.png b/source/_static/images/import_documentation/widgets-examples/widget-img.png new file mode 100644 index 0000000000000000000000000000000000000000..be9a348d07f299b5c80dbf646a8964eb0b23078f Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-img.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-label.png b/source/_static/images/import_documentation/widgets-examples/widget-label.png new file mode 100644 index 0000000000000000000000000000000000000000..8666cf179532118a81cdf33e712f13293bd21e6c Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-label.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-link.png b/source/_static/images/import_documentation/widgets-examples/widget-link.png new file mode 100644 index 0000000000000000000000000000000000000000..40527124629f235812840a66c350511772942af0 Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-link.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-mailto.png b/source/_static/images/import_documentation/widgets-examples/widget-mailto.png new file mode 100644 index 0000000000000000000000000000000000000000..f55bc6b4ab736b2fc02da07119c494d48d6df398 Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-mailto.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-placeholder.png b/source/_static/images/import_documentation/widgets-examples/widget-placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..e08bb0268313141423731f1d9ce65b33cf11a89e Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-placeholder.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-radio.png b/source/_static/images/import_documentation/widgets-examples/widget-radio.png new file mode 100644 index 0000000000000000000000000000000000000000..1a2964aa5c41e26254f5fc11f044584358066915 Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-radio.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-set.png b/source/_static/images/import_documentation/widgets-examples/widget-set.png new file mode 100644 index 0000000000000000000000000000000000000000..034706135688c7956e7e2708ef1b57c3753cbb31 Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-set.png differ diff --git a/source/_static/images/import_documentation/widgets-examples/widget-textarea.png b/source/_static/images/import_documentation/widgets-examples/widget-textarea.png new file mode 100644 index 0000000000000000000000000000000000000000..73f26a9005cb4cef79e8ae7b37ffbc5af389dc17 Binary files /dev/null and b/source/_static/images/import_documentation/widgets-examples/widget-textarea.png differ diff --git a/source/import_documentation/Widgets/Examples.rst b/source/import_documentation/Widgets/Examples.rst index c8d2d8da2820b877363631e8f9f895ceaf798041..a33ea24b42133c2a80a413960800d0fc34ec73a3 100644 --- a/source/import_documentation/Widgets/Examples.rst +++ b/source/import_documentation/Widgets/Examples.rst @@ -1,6 +1,184 @@ Examples ========= +Common widgets +-------------- + +Here is a few examples of widgets use. First, there is the HTML using Startin'blox and then, the displayed result in a webpage. + +All the values from ``<solid-display>`` are displayed with and without widget. + +solid-display-img +~~~~~~~~~~~~~~~~~ + +.. code:: html + + <solid-display + data-src="data/list/user-1.jsonld" + fields="notimage, image" + value-notimage="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" + value-image="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" + widget-image="solid-display-img" + alt-image="pink flowers" + ></solid-display> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-img.png + :alt: Widget solid-display-img + + +solid-display-link +~~~~~~~~~~~~~~~~~~ + +.. code:: html + + <solid-display + data-src="data/list/user-1.jsonld" + fields="notlink, link" + value-notlink="https://startinblox.com/fr/" + value-link="https://startinblox.com/fr/" + widget-link="solid-display-link" + ></solid-display> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-link.png + :alt: Widget solid-display-link + + +solid-display-link-mailto +~~~~~~~~~~~~~~~~~~~~~~~~~ + +.. code:: html + + <solid-display + data-src="data/list/user-5.jsonld" + fields="email" + ></solid-display> + + <solid-display + data-src="data/list/user-5.jsonld" + fields="email" + widget-email="solid-display-link-mailto" + ></solid-display> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-mailto.png + :alt: Widget solid-display-link-mailto + + +solid-display-value-date +~~~~~~~~~~~~~~~~~~~~~~~~ + +.. code:: html + + <solid-display + data-src="data/list/event-1.jsonld" + fields="date" + ></solid-display> + + <solid-display + data-src="data/list/event-1.jsonld" + fields="date" + widget-date="solid-display-value-date" + ></solid-display> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-date.png + :alt: Widget solid-display-value-date + + +solid-form-radio +~~~~~~~~~~~~~~~~ +range attribute + +.. code:: html + + <solid-form + data-src="data/list/event-1.jsonld" + fields="contact" + widget-contact="solid-form-radio" + range-contact="data/list/users.jsonld" + ></solid-form> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-radio.png + :alt: Widget solid-form-radio + +solid-form-dropdown +~~~~~~~~~~~~~~~~~~~ +enum attribute + +.. code:: html + + <solid-form + data-src="data/list/event-1.jsonld" + fields="personnes" + widget-personnes="solid-form-dropdown" + enum-personnes="Sacha, Camille, Charlie, Lou" + ></solid-form> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-dropdown.png + :alt: Widget solid-form-dropdown + +solid-form-textarea-label +~~~~~~~~~~~~~~~~~~~~~~~~~ + +.. code:: html + + <solid-form + data-src="data/list/event-1.jsonld" + fields="description" + widget-description="solid-form-textarea-label" + ></solid-form> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-textarea.png + :alt: Widget solid-form-textarea-label + +solid-form-text-placeholder +~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +.. code:: html + + <solid-form + data-src="./data/list/users.jsonld" + fields="first_name" + widget-first_name="solid-form-text-placeholder" + placeholder-first_name="Enter your name" + ></solid-form> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-placeholder.png + :alt: Widget solid-form-text-placehoder + +solid-form-text-label +~~~~~~~~~~~~~~~~~~~~~ + +.. code:: html + + <solid-form + data-src="./data/list/users.jsonld" + fields="first_name" + widget-first_name="solid-form-text-label" + label-first_name="First name :" + ></solid-form> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-label.png + :alt: Widget solid-form-text-label + +solid-set-div +~~~~~~~~~~~~~ + +.. code:: html + + <solid-display + data-src="data/list/users.jsonld" + fields="name(first_name, ' - ' ,last_name, ' - ', username)" + widget-name="solid-set-div" + ></solid-display> + +.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-set.png + :alt: Widget solid-set-div + +*The border is applied on solid-set-div* + + +Step-by-step widget creation +---------------------------- + Create your widget ~~~~~~~~~~~~~~~~~~