UI MarCom 3

Modal Dialog Stable

Modal dialogs are used for processes that need a decision by the user. They are shown with a layer above the site content.

<uimc-modal-dialog title="" submit-button-label="">
  <p></p>
</uimc-modal-dialog>

AttributeDescriptionValuesDefault
titleSets the dialog title
indicatorSets an indicator if neededsuccess, warning, errornone
openReflects the state of visibilityfalse
submit-button-labelAdds a submit button with the given label
cancel-button-labelAdds a cancel button with the given label

CallbackArgumentDescription
onSubmiteventPass a callback function that gets triggered when the submit button is pressed
onCanceleventPass a callback function that gets triggered when the cancel button is pressed

SlotSlotted content
defaultBody content of the Modal Dialog

Normal dialog

Message dolor sit amet, consectetur adipis tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<uimc-modal-dialog id="modal-dialog" title="Dialog title" submit-button-label="Accept" cancel-button-label="Cancel">
  <p>Message dolor sit amet, consectetur adipis tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</uimc-modal-dialog>

Success dialog

Message dolor sit amet, consectetur adipis tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<uimc-modal-dialog id="success-modal-dialog" title="Success title" indicator="success" submit-button-label="Accept" cancel-button-label="Cancel">
  <p>Message dolor sit amet, consectetur adipis tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</uimc-modal-dialog>

Warning dialog

Message dolor sit amet, consectetur adipis tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<uimc-modal-dialog id="warning-modal-dialog" title="Warning title" indicator="warning" submit-button-label="Accept" cancel-button-label="Cancel">
  <p>Message dolor sit amet, consectetur adipis tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</uimc-modal-dialog>

Error dialog

Message dolor sit amet, consectetur adipis tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<uimc-modal-dialog id="error-modal-dialog" title="Error title" indicator="error" submit-button-label="Accept" cancel-button-label="Cancel">
  <p>Message dolor sit amet, consectetur adipis tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</uimc-modal-dialog>