ak-modal-dialog v2.0.1
ModalDialog
This component displays content in a layer that sits above the rest of the page content. Users won't be able to interact with the page until the dialog is closed.
##Try it out
Interact with a live demo of the ak-modal-dialog.
Installation
npm install ak-modal-dialog
Using the component
This package exports the ak-button
React component.
Import the component in your React app as follows:
import ModalDialog from 'ak-modal-dialog';
ReactDOM.render(
<ModalDialog
open
header={
<h2>Modal header</h2>
}
footer={
<p>Modal footer</p>
}
>
<p>Modal body goes here</p>
</ModalDialog>
, container);
ModalDialog
Kind: global class
Properties
- modalDialog.isOpen : Boolean
- modalDialog.width : string
- modalDialog.onDialogDismissed : function
- ModalDialog.header : element
- ModalDialog.children : element
- ModalDialog.footer : element
new ModalDialog()
A modal dialog which blankets the page
JS Example
import ModalDialog from 'ak-modal-dialog';
ReactDOM.render(<ModalDialog />, container);
modalDialog.isOpen : Boolean
Whether the modal dialog is open/visible
Kind: instance property of ModalDialog
Default: false
modalDialog.width : string
The maximum width tier of the dialog Allowed values are: 'small' (400px), 'medium' (600px), 'large' (800px), 'x-large' (968px).
Kind: instance property of ModalDialog
Default: "default"
modalDialog.onDialogDismissed : function
Handler function to be called when the blanket is clicked
Kind: instance property of ModalDialog
ModalDialog.header : element
Elements to be placed at top of modal dialog
Kind: static property of ModalDialog
ModalDialog.children : element
Content to be placed in the middle of the modal dialog
Kind: static property of ModalDialog
ModalDialog.footer : element
Elements to be placed at bottom of modal dialog
Kind: static property of ModalDialog
Support and feedback
We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
Community support
Ask a question in our forum.
Check if someone has already asked the same question before.
Create a support ticket
Are you in trouble? Let us know!