uiModal

Weldkit modal component

Getting started

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>

API

data-model

Data to be used in the modal.

data-display

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

data-confirm

Confirm event callback function, called when the user confirms the dialog.

data-reject

Reject event callback function, called when the user rejects the dialog.

openDialog event

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.