MDL Dialogs

Modal windows for dedicated user input.

The origin MDL documentation is available at Dialogs

In FlexJS dialog is represented by class Dialog with additional helper classes which defines containers for title, content and actions.

• Dialog:

  • <mdl:Dialog />

  • Methods:

    • show Displays the dialog element.

    NOTE: It seems MDL does not support non modal dialogs, since there's no examples and dialogs are always added to "document.body"

    • showModal Displays the dialog element and makes it the top-most modal dialog
    • close Closes the dialog element

• DialogTitle:

  • <mdl:DialogTitle />(Optional)

  Defines the title container in the dialog

  • Properties:
    • text (String) Assigns appropriate text to dialog title

• DialogContent:

  • <mdl:DialogContent />

  Defines the content container of the dialog.

• DialogActions:

  • <mdl:DialogActions />

  Defines the actions container in the dialog.

  • Properties:
    • fullWidth (Boolean) Modifies the actions to each take the full width of the container. This makes each take their own line.

Snippets

<mdl:Dialog xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:js="library://ns.apache.org/flexjs/basic"
        xmlns:mdl="library://ns.apache.org/flexjs/mdl"
        xmlns="http://www.w3.org/1999/xhtml">
  <mdl:DialogTitle text="Allow data collection?"/>
  <mdl:DialogContent>
    <js:P text="This is an example of the Material Design Lite dialog component."/>
  </mdl:DialogContent>
  <mdl:DialogActions>
    <mdl:Button text="Agree" raised="true"/>
    <mdl:Button text="Disagree" raised="true" click="close()"/>
  </mdl:DialogActions>
</mdl:Dialog>