@rmwc/dialog

Dialogs

Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

Material Dialogs are a complex component. RMWC contains an additional non-standard SimpleDialog component for ease of use that internally contains the default structure already built out. Illustrated below is both the strandard and simple dialog usage.

• Module @rmwc/dialog
• Import styles:
  • import '@material/dialog/dist/mdc.dialog.css';
  • import '@material/button/dist/mdc.button.css';
• MDC Docs: https://material.io/develop/web/components/dialogs/

Standard Usage

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  DialogButton
} from '@rmwc/dialog';

import { Button } from '@rmwc/button';

{/** Standard dialog usage */}
<Dialog
  open={this.state.standardDialogOpen}
  onClose={evt => {
    console.log(evt.detail.action)
    this.setState({standardDialogOpen: false})
  }}
>    
  <DialogTitle>Dialog Title</DialogTitle>
  <DialogContent>This is a standard dialog.</DialogContent>
  <DialogActions>
    <DialogButton action="close">Cancel</DialogButton>
    <DialogButton action="accept" isDefaultAction>Sweet!</DialogButton>
  </DialogActions>
</Dialog>

<Button
  raised
  onClick={evt => this.setState({standardDialogOpen: true})}
>
  Open standard Dialog
</Button>

Simplified Usage

import { SimpleDialog } from '@rmwc/dialog';
import { Button } from '@rmwc/button';

{/** Simple Dialog usage */}
<SimpleDialog
  title="This is a simple dialog"
  body="You can pass the body prop, or anything you want as children."
  open={this.state.simpleDialogIsOpen}
  onClose={evt => {
    console.log(evt.detail.action)
    this.setState({simpleDialogIsOpen: false})
  }}
/>


<Button
  raised
  onClick={evt => this.setState({simpleDialogIsOpen: true})}
>
  Open Simple Dialog
</Button>

import { DocumentComponent } from '@rmwc/base/utils/document-component';
import * as docs from './docgen.json';
import * as buttonDocs from '@rmwc/button/docgen.json';

<DocumentComponent docs={docs} displayName="Dialog" />
<DocumentComponent docs={docs} displayName="DialogTitle" />
<DocumentComponent docs={docs} displayName="DialogContent" />
<DocumentComponent docs={docs} displayName="DialogActions" />
<DocumentComponent docs={[docs, buttonDocs]} displayName="DialogButton" composes={['Button']} />
<DocumentComponent docs={docs} displayName="SimpleDialog" />

Changelog

4.0.3 (2018-12-28)

Bug Fixes

• TS: Corrects className issue on buttons (f999004a)