... | ... | @@ -27,4 +27,56 @@ In a `sib-widget`, you have access to these values: |
|
|
- **`label`**: if defined, label of the current field
|
|
|
- **`range`**: if defined, range of the current field
|
|
|
|
|
|
> NB: Do not forget to define your custom template in a `<template>` tag. Otherwise, your widget will not be declared properly. |
|
|
\ No newline at end of file |
|
|
> 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
|
|
|
|
|
|
- **`sib-display-value`** (default): Displays the value.
|
|
|
- **`sib-display-div`**: Displays the `value` inside a `<div>` HTML tag.
|
|
|
- **`sib-display-labelled-div`**: Displays the `value` inside a `<div>` HTML tag, after the `label` contained in a `<label>` HTML tag
|
|
|
- **`sib-display-multiline`**:Displays the `value` inside a `<div>`, `\n` are replaced by `<br>`.
|
|
|
- **`sib-display-labelled-boolean`**: Displays the `label` inside a `<label>` HTML tag if the `value` is true
|
|
|
- **`sib-display-img`**: Inserts the `value` as the src attribute value of an `<img>` HTML tag.
|
|
|
- **`sib-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.
|
|
|
- **`sib-display-tel`**: Displays a link inside a `<a>` HTML tag with a `tel:value` as path
|
|
|
- **`sib-display-link`**: Displays a link inside a `<a>` HTML tag with the value as path, and the label as text content
|
|
|
- **`sib-display-date`**: Displays a date in the browser's default locale format
|
|
|
- **`sib-display-date-time`**: Displays a date and a time in the browser's default locale format
|
|
|
|
|
|
### Form widgets
|
|
|
|
|
|
- **`sib-form-label-text`**: Inserts an `<input/>` HTML tag of type "text", in a `<label>` HTML tag.
|
|
|
- **`sib-form-checkbox`**: Inserts an `<input/>` HTML tag of type "checkbox", in a `<label>` HTML tag.
|
|
|
- **`sib-form-date`**: Inserts an `<input/>` HTML tag of type "date", in a `<label>` HTML tag.
|
|
|
- **`sib-form-range-date`**:
|
|
|
- **`sib-form-json`**: Inserts an `<input/>` HTML tag of type "text", in a `<label>` HTML tag, and with its `value` converted from JSON to string
|
|
|
- **`sib-form-placeholder-text`**: Inserts an `<input/>` HTML tag of type "text", with the `label` as placeholder.
|
|
|
- **`sib-form-textarea`**: Inserts an `<textarea>` HTML tag in a `<label>` HTML tag.
|
|
|
- **`sib-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 `sib-form-dropdown` widget.
|
|
|
- **`sib-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
|
|
|
- **`sib-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 `sib-form-auto-completion` widget.
|
|
|
- **`sib-form-number`**: Inserts an `<input/>` HTML tag of type "number", in a `<label>` HTML tag.
|
|
|
- **`sib-form-range-number`**:
|
|
|
- **`sib-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.
|
|
|
- **`sib-form-hidden`**: Inserts an `<input/>` HTML tag of type "hidden", in a `<label>` HTML tag.
|
|
|
|
|
|
### Multiple widgets
|
|
|
|
|
|
- **`sib-multiple`** (default for display): Inserts all the widgets in a `<sib-multiple>` tag.
|
|
|
- **`sib-multiple-form`** (default for forms): Inserts all the widgets in a `<sib-multiple-form>` tag, with a "remove" button for each widget, and an "add" button.
|
|
|
- **`sib-multiple-select`**: Inserts all the values as `<option>` in a `<select>` tag with a `multiple` attribute.
|
|
|
|
|
|
### Set widgets
|
|
|
- **`sib-set-default`** (default): Inserts content directly in the set tag.
|
|
|
- **`sib-set-div`**: Inserts content in a `<div/>` HTML tag
|
|
|
- **`sib-set-ul`**: Inserts content in a `<ul/>` HTML tag
|
|
|
- **`sib-set-fieldset`**: Inserts content in a `<fieldset/>` HTML tag
|
|
|
|
|
|
### Actions widgets
|
|
|
|
|
|
- **`sib-action`**: Displays a link inside a `<sib-link>` tag with `src` for the `data-src` attribute, `value` for the `next` attribute and `label` as text content |
|
|
\ No newline at end of file |