diff --git a/source/import_documentation/Components/SiB-Display.rst b/source/import_documentation/Components/SiB-Display.rst index c03e8ffee51125a6085a25f205e8779b022254aa..cfa0baf15a09866267d1800953400bbe6b49ed86 100644 --- a/source/import_documentation/Components/SiB-Display.rst +++ b/source/import_documentation/Components/SiB-Display.rst @@ -45,15 +45,17 @@ fields ``<solid-display>``. Make sure you don’t give your set the same name as a field as it would result in an infinite loop. -widget-xyz -~~~~~~~~~~ - By default, the widget used is ``<solid-display-div>``. Cf the - `Display widgets <#display-widgets>`__ section below for more info. - child-xyz ~~~~~~~~~~~~~~~~ add attribute ``xyz`` to all children. + +Widgets +------- +By default, the widget used is ``<solid-display-div>``. Cf the +`Display widgets <display-widgets>`__ page for more info. + + Events ------- diff --git a/source/import_documentation/Components/SiB-Form.rst b/source/import_documentation/Components/SiB-Form.rst index ed4067e25918b5c69ad53a66166d89cb82ace3b7..8a6c40711769bcc5def1971c917fea0292d1f48c 100644 --- a/source/import_documentation/Components/SiB-Form.rst +++ b/source/import_documentation/Components/SiB-Form.rst @@ -56,6 +56,12 @@ Attributes Add this attribute when the form does not include all the fields of the resource to update. +Widgets +------- +By default, the widget used is ``<solid-form-label-text>``. Cf the +`Form widgets <form-widgets>`__ page for more info. + + Events ------- diff --git a/source/import_documentation/Components/SiB-Widget.rst b/source/import_documentation/Components/SiB-Widget.rst index 7ef364e39d3a799a5d24648335ec6151030ef0a0..8585f8b55ab234d72fb3179ce1e2119a92a5d249 100644 --- a/source/import_documentation/Components/SiB-Widget.rst +++ b/source/import_documentation/Components/SiB-Widget.rst @@ -32,101 +32,3 @@ In a ``solid-widget``, you have access to these values: NB: Do not forget to define your custom template in a ``<template>`` tag. Otherwise, your widget will not be declared properly. - -Widgets -------- - -The following widgets are available: - -Display widgets -~~~~~~~~~~~~~~~ - -- ``solid-display-value`` (default): 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 -~~~~~~~~~~~~ - -- ``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. - -Multiple widgets -~~~~~~~~~~~~~~~~ - -- ``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. - -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 diff --git a/source/import_documentation/Mixins/widget-mixin.rst b/source/import_documentation/Mixins/widget-mixin.rst index 445ab8875ad94a26da107274ae55e5b7fe1cfd4a..798df123bfcbe603516fc19a4ad688e62ca9a6fc 100644 --- a/source/import_documentation/Mixins/widget-mixin.rst +++ b/source/import_documentation/Mixins/widget-mixin.rst @@ -39,8 +39,8 @@ Attributes fields="fullName(first_name, last_name), email" ></solid-display> - You can customize the group widget, see the `sets widgets <#set-widgets>`__ - section below for more info. + You can customize the group widget, see the `Sets widgets <other-widgets>`__ + page for more info. ``value-[field]`` @@ -105,7 +105,7 @@ default-widget 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 <#multiple-widgets>`__ section below for more info. + widgets <multiple-widgets>`__ page below for more info. All attributes starting by ``each`` will be applied on each child, diff --git a/source/import_documentation/Widgets/display-widgets.rst b/source/import_documentation/Widgets/display-widgets.rst new file mode 100644 index 0000000000000000000000000000000000000000..825468b931d049ede7ab91d4847da347a2b1e36f --- /dev/null +++ b/source/import_documentation/Widgets/display-widgets.rst @@ -0,0 +1,28 @@ +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 diff --git a/source/import_documentation/Widgets/form-widgets.rst b/source/import_documentation/Widgets/form-widgets.rst new file mode 100644 index 0000000000000000000000000000000000000000..3579faddda83d4d8cfb37b336c7a925da636e5d5 --- /dev/null +++ b/source/import_documentation/Widgets/form-widgets.rst @@ -0,0 +1,42 @@ +Form widgets +=============== + +Startin'blox provides a list of default widgets to use in a form: + +Form widgets +~~~~~~~~~~~~ + +- ``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 diff --git a/source/import_documentation/Widgets/multiple-widgets.rst b/source/import_documentation/Widgets/multiple-widgets.rst new file mode 100644 index 0000000000000000000000000000000000000000..df428ae43f36d9603d188eeb87d536501a9d10af --- /dev/null +++ b/source/import_documentation/Widgets/multiple-widgets.rst @@ -0,0 +1,15 @@ +Multiple widgets +=============== + +Startin'blox provides a list of default widgets to handle multiples: + +Multiple widgets +~~~~~~~~~~~~~~~~ + +- ``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. diff --git a/source/import_documentation/Widgets/other-widgets.rst b/source/import_documentation/Widgets/other-widgets.rst new file mode 100644 index 0000000000000000000000000000000000000000..83b213f64bb138ab9a058b5d0ff6c72be120e843 --- /dev/null +++ b/source/import_documentation/Widgets/other-widgets.rst @@ -0,0 +1,19 @@ +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 diff --git a/source/index.rst b/source/index.rst index 27197211bf1b71009566b354c4495bd5b6aaf94e..f63539aed228b5f95f178f50be6170c8f0f9e20a 100644 --- a/source/index.rst +++ b/source/index.rst @@ -65,6 +65,15 @@ Welcome to Startinblox's documentation! import_documentation/Mixins/sorter-mixin import_documentation/Mixins/highlighter-mixin +.. toctree:: + :maxdepth: 2 + :caption: Mixins: + + import_documentation/Widgets/display-widgets + import_documentation/Widgets/form-widgets + import_documentation/Widgets/multiple-widgets + import_documentation/Widgets/other-widgets + .. toctree:: :maxdepth: 2 :caption: Javascript Api: