data-dlg is data-binder for bsn boosted Bootstrap4 modal dialog.
- Support auto/manual data binding
- Support i18n resource
via npm
npm install data-dlg
via CDN
<script src="https://cdn.jsdelivr.net/npm/data-dlg/lib/data-dlg.js"></script>import DialogManager from "data-dlg";| Attribute Name | Attribute Value | Description |
| data-dlg | dialogId | When you click on the element to which this attribute is given, the specified dialog (identified by diloagId) is automatically opened. |
| data-dlg-resume | N/A | If the element with this attribute was a child element of a dialog with an element with this attribute, clicking on the element with this attribute will open the dialog specified by data-dlg, and after the opening dialog is closed, the dialog with the element with this attribute will open again. |
| data-dlg-prop | Property Name | Specify for an input element (such as Input). The property name of the context variable and DOM element at the time of binding. E.g., the initial value of the Input element will show the name of this property out of context, and the input value of the Input element will be stored in the context variable of this property name. |
| data-dlg-input-type | Property Type | Specify for an input element (such as Input). Property type "text" "number" "date" "date" "time" "datetime" to specify. |
| data-dlg-focus | N/A | Specify for an input element (such as Input). Specify the input element to focus automatically when the dialog is displayed. |
| data-dlg-enter-to-apply | N/A | Specify for an input element (such as Input). If you press enter in an input element, Apply will be issued automatically. |
| data-dlg-hidden | Property Name | label element (such as a div or label). If the specified property is EMPTY, then the element with this attribute is hidden. |
| data-dlg-ref | Property Name or SentenceId | Specified for selective elements (such as SELECT elements). Specify a name that indicates the list of candidates to be displayed in the selection type element. If there is a property specified by this attribute in the context, the property is used as a candidate list. If it does not exist in the context, it uses the resource name of the same name from the i18n resource as a search candidate list. Selective elements can use either multiple choice or single choice. |
| data-dlg-multi-prop | Property Name | A property of array type that holds multiple values. Specify it for an enumerated type element (such as a SELECT element). |
| data-dlg-key | String value | Use it with data-dlg-resume. When you come back from an external dialog, you can get it as an argument to the onResume method. |