Modal

A Modal is a type of window that appears in front of app content to provide critical information or ask for a decision. Modals disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

Usage

import { ItsyModal } from '@itsy-ui/navigation';

const schema = {
  "width": "md",
  "title": "Modal title",
  "size": "default",
  "controlSchema": {
    "name": "label",
    "properties": {
      "ui:widget": "label",
      "title": "The term modal is sometimes used to mean dialog, but this is a misnomer."
    }
  }
}

<ItsyModal className="Modal" schema={schema} />


API

name type default description
className String additional class name of root node.
style Object {} Inline style object
width String Width of the drawer control
schema Object {} Schema which contains information to be displayed inside drawer.


Schema API’s

name type default description
title String Modal title text.
controlSchema object Schema widget to be displayed inside the modal.
width number 520 Width of the modal
showOK boolean true Flag to show/hide "Ok" button
okText string Ok Text to be displayed in "Ok" button
onOk function Callback to be triggered when click ok button
onOKTransition string Transition to be triggered when click ok button
showCancel boolean true Flag to show/hide "Cancel" button
cancelText string Ok Text to be displayed in "Cancel" button
onCancel function Callback to be triggered when click cancel button
onCancelTransition string Transition to be triggered when click cancel button


Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions