Elm Mdl Dialog
{ styles : List ( String
, String )
, title : String
, content : List (Html msg)
, actionBar : List (Html msg)
}
The Dialog Configuration.
styles
sets inline styles for the dialog div. You may e.g. want to set a width.
title
sets a header title. Since MDL does the styling, you only need to provide
a string.
content
is where you put all your Html to be displayed in the Dialog's body.
actionBar
sits at bottom of the Dialog. You may want to place some actions there,
usually at least one close button.
render : Config msg -> Visible -> Html msg
Render the Dialog
Dialog.render
{ styles = [ ( "width", "40%" ) ]
, title = "My Dialog"
, content = [ text "This is my dialog's body." ]
, actionBar = [ button [ onClick ToggleMyDialogVisible ] [ text "Close" ] ]
}
model.myDialogVisible
You take care of the open and close Msg yourself. Just include a Visible in your model for each Dialog.
type alias Model =
{ myDialogVisible : Visible
}
update msg model =
case msg of
ToggleMyDialogVisible ->
( { model | myDialogVisible = not model.myDialogVisible }
, Cmd.none
)
Basics.Bool
A helper to make things more humand readable. Use it like this:
type alias Model =
{ myDialogVisible : Visible
}
In the init function initialize it like this:
init =
{ myDialogVisible = Dialog.hidden
}
hidden : Visible
A helper function that returns False to make things more human readable
visible : Visible
A helper function that returns True to make things more human readable