kara-module-file-list v1.0.21

Introduce

• react-modal-plugin just provide one div, this div is modal.
• In this div(modal) html is modal's child.
• react-modal-plugin provide some child(alert,comfirm,dialog).
• You can custom child , class name , style for modal.

Example and demo

• Place download react-modal-plugin open demo/index.html . Example and demo are one on one.

Doc

Alert

Alert is modal's child. Example see example/alert.js. Demo open demo/alert.js in browser.

import Modal,{Alert} from 'react-modal-plugin'

<Modal show={true}>
  <Alert
  onConfirm={()=>{alert('You click confirm button!')}}
  title="title"
  message="message"
  confirmButton="confirm"
  className="custom-class-name"
  />
</Modal>

Alert props:

• title value is text,it's alert title,if title value is undefined it's don't show in alert.
• message value is text,it's alert message,if message value is undefined it's don't show in alert.
• confirmButton value is text,it's default value is confirm.
• clssName value is class name,you can custom alert style use className.
• onConfirm value is function,wen confirm button is click modal will call onConfirm function, so you can add you code in onConfirm, don't forget set modal props show value is false.

Confirm

Confirm is modal's child. Example see example/confirm.js. Demo open demo/confirm.js in browser.

import Modal,{Confirm} from 'react-modal-plugin'

<Modal show={true}>
  <Confirm
  onConfirm={()=>{alert('You click confirm button.')}}
  onCancel={()=>{alert('You click cancel button.')}}
  title="title"
  message="message"
  confirmButton="confirm"
  cancelButton="cancel"
  className="custom-class-name"
  />
</Modal>

Confirm props:

• title value is text,it's confirm title,if title value is undefined it's don't show in confirm.
• message value is text,it's confirm message,if message value is undefined it's don't show in confirm.
• confirmButton value is text,it's default value is confirm.
• cancelButton value is text,it's default value is cancel.
• clssName value is class name,you can custom confirm style use className.
• onConfirm value is function,wen confirm button is click modal will call onConfirm function, so you can add you code in onConfirm, don't forget set modal props show value is false.
• onCancel value is function,wen cancel button is click modal will call onCancel function, you can set modal show value is false in this function.

Dialog

Dialog is modal's child. Example see example/dialog.js. Demo open demo/dialog.js in browser.

import Modal,{Dialog} from 'react-modal-plugin'