Weldkit modal component
Include UI Modal in your project dependencies:
npm install ui-modal --save
In your view you would insert an HTML tag like so:
<ui-modal>
...
</ui-modal>
The modal display, model, and callbacks may be specified as tag attributes or by passing a configuration object with the openDialog event.
Modal display may be specified as tag attribute, in openDialog event detail or as tag content, like so:
<ui-modal>
<header data-closebtn="true">
Test
</header>
<div>Hello World!</div>
<footer>
<button data-role="accept" class="primary">Ok</button>
</footer>
</ui-modal>
Data to be used in the modal.
Display configuration of the modal. The display object supports the following options:
-
header(object): Modal header
- title(string): Modal title
- closebtn(boolean): Display close button in the header
- body(string): Modal content
-
footer(object): Modal footer
-
options(array): Modal options
- label(string): option label
- type(enum: confirm | reject): option type
- styleClass(enum: default | primary): option style
-
options(array): Modal options
Confirm event callback function, called when the user confirms the dialog.
Reject event callback function, called when the user rejects the dialog.
An event with type openDialog will be dispatched by the modal component to open a dialog. The content and callbacks of the dialog may be specified in the detail of a Custom Event with the following attributes:
- model(string | object): A data object or URI or a callback for the data model. Callbacks should be written without curly braces.
- display(string | object): Display configuration callback, or configuration object.
- confirm(string): Confirm callback, without curly braces.
- reject(string): Reject callback, without curly braces.