aforemny / material-components-web-elm / Material.Dialog

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

Table of Contents

Resources

Basic Usage

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

type Msg
    = Closed

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

Configuration


type Config msg

Configuration of a dialog

config : Config msg

Default configuration of a dialog

Configuration Options

setOnClose : msg -> Config msg -> Config msg

Specify a message when the user closes the dialog

setOpen : Basics.Bool -> Config msg -> Config msg

Specify whether a dialog is open

setScrimCloses : Basics.Bool -> Config msg -> Config msg

Specify whether click the dialog's scrim should close the dialog

If set to True, clicking on the dialog's scrim results in the dialog's setOnClose mege. Defaults to True.

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Alert Dialog

alert : Config msg -> { content : List (Html msg), actions : List (Html msg) } -> Html msg

Alert dialog view function

Simple Dialog

simple : Config msg -> { title : String, content : List (Html msg) } -> Html msg

Simple dialog view function

Confirmation Dialog

confirmation : Config msg -> { title : String, content : List (Html msg), actions : List (Html msg) } -> Html msg

Confirmation dialog view function

Fullscreen Dialog

fullscreen : Config msg -> { title : String, content : List (Html msg), actions : List (Html msg) } -> Html msg

Fullscreen view function

Default Action

defaultAction : Html.Attribute msg

A button that is marked with this attribute is automatically activated by the containing dialog on pressing the Enter key.

Initial Focus

initialFocus : Html.Attribute msg

An element that is marked with this attribute is automatically focus on opening the containing dialog.