react-toolbox/components/dialog
Enzo Martin addc7f312b Remove all `unquote` calls
- Use SASS RGBA directly when modifying the opacity
2015-11-19 12:21:51 +01:00
..
_config.scss Remove all `unquote` calls 2015-11-19 12:21:51 +01:00
index.jsx Add react-toolbox attribute to dialog 2015-11-15 03:20:23 +01:00
readme.md Merge master and solve conflicts 2015-11-11 10:28:01 +01:00
style.scss Use new Overlay component in dialogs and dependencies 2015-11-14 21:51:33 +01:00

readme.md

Dialog

Dialogs contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.

import Dialog from 'react-toolbox/lib/dialog';

class DialogTest extends React.Component {
  state = { 
    active: false 
  };

  handleToggle = () => {
    this.setState({active: !this.state.active});
  }

  actions = [
    { label: "Cancel", onClick: this.handleToggle },
    { label: "Save", onClick: this.handleToggle }
  ];

  render () {
    return (
      <div>
        <Button label='Show my dialog' onClick={this.handleToggle} />
        <Dialog actions={this.actions} active={this.state.active} title='My awesome dialog'>
          <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
        </Dialog>
      </div>
    );
  }
}

Properties

Name Type Default Description
active Boolean false If true, the dialog will be active.
actions Array [] A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.
className String '' Sets a class to give customized styles to the dialog.
onOverlayClick Function Callback to be invoked when the dialog overlay is clicked.
title String The text string to use as standar title of the dialog.
type String normal Used to determine the size of the dialog. It can be small, normal or large.