Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
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 of a dialog
config : Config msg
Default configuration of a dialog
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 : Config msg -> { content : List (Html msg), actions : List (Html msg) } -> Html msg
Alert dialog view function
simple : Config msg -> { title : String, content : List (Html msg) } -> Html msg
Simple dialog view function
confirmation : Config msg -> { title : String, content : List (Html msg), actions : List (Html msg) } -> Html msg
Confirmation dialog view function
fullscreen : Config msg -> { title : String, content : List (Html msg), actions : List (Html msg) } -> Html msg
Fullscreen view function
defaultAction : Html.Attribute msg
A button that is marked with this attribute is automatically activated by
the containing dialog on pressing the Enter
key.
initialFocus : Html.Attribute msg
An element that is marked with this attribute is automatically focus on opening the containing dialog.