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

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Dialog

Resources

• Demo: Dialogs
• Material Design Guidelines: Dialogs
• MDC Web: Dialog
• Sass Mixins (MDC Web)

Basic Usage

import Material.Button as Button
import Material.Dialog as Dialog


type Msg
    = Closed


main =
    Dialog.dialog
        (Dialog.config
            |> Dialog.setOpen True
            |> Dialog.setOnClose Closed
        )
        { title = Nothing
        , content = [ text "Discard draft?" ]
        , actions =
            [ Button.text
                (Button.config |> Button.setOnClick Closed)
                "Cancel"
            , Button.text
                (Button.config |> Button.setOnClick Closed)
                "Discard"
            ]
        }

Configuration

Configuration Options

Dialog