Module: Dialog

Parameters:

Name	Type	Description
props	Object	Properties Name Type Attributes Description title string <optional> The title of the dialog. isOpen boolean <optional> true if opening dialog, otherwise false. Default to false. className string <optional> The class name that is added to the surface element. buttons Array.<Object> Specifies the settings of the action buttons that the dialog has. Properties Name Type Attributes Description action string Mandatory. The identifer of the action button. label string The label of the action button. isDefault boolean <optional> Specifies true if the button means the default action, otherwise false. Default to false. mdcDialogRef React.MutableRefObject <optional> MutableRefObject which bind an MDCDialog instance to. onOpening EventHandler <optional> Specifies event handler that is called when the dialog begins its opening animation. onOpened EventHandler <optional> Specifies event handler that is called when the dialog finishes its opening animation. onClosing EventHandler <optional> Specifies event handler that is called when the dialog begins its closing animation. event.detail.action represents the action which closed the dialog. onClosed EventHandler <optional> Specifies event handler that is called when the dialog finishes its closing animation. event.detail.action represents the action which closed the dialog.

Source:

• dialog.jsx, line 28

Returns:

Type

DetailedReactHTMLElement

Example

import React from 'react';
import { Dialog } from 'material-react-js';

function MyDialog(props) {
  const buttons = [
    { action: 'close', label: 'Cancel', isDefault: true },
    { action: 'accept', label: 'OK' },
  ];
  function onClosed(event) {
    if (event.detail.action === 'accept') {
      props.acceptCallback();
    }
  }
  return (
    <Dialog title="Choose a Ringtone" buttons={buttons} onClosed={onClosed}>
      <ul className="mdc-list">
        <li className="mdc-list-item" tabIndex="0">
          <span className="mdc-list-item__graphic">
            <div className="mdc-radio">
              <input className="mdc-radio__native-control"
                     type="radio"
                     id="test-dialog-baseline-confirmation-radio-1"
                     name="test-dialog-baseline-confirmation-radio-group"
                     checked={true}>
              <div className="mdc-radio__background">
                <div className="mdc-radio__outer-circle"></div>
                <div className="mdc-radio__inner-circle"></div>
              </div>
            </div>
          </span>
          <label id="test-dialog-baseline-confirmation-radio-1-label"
                 htmlFor="test-dialog-baseline-confirmation-radio-1"
                 className="mdc-list-item__text">None</label>
        </li>
        <!-- ... -->
      </ul>
    </Dialog>
  );
}