Elm Modal Dialogs.
{ closeMessage : Maybe msg
, maskAttributes : List (Element.Attribute msg)
, containerAttributes : List (Element.Attribute msg)
, headerAttributes : List (Element.Attribute msg)
, bodyAttributes : List (Element.Attribute msg)
, footerAttributes : List (Element.Attribute msg)
, header : Maybe (Element msg)
, body : Maybe (Element msg)
, footer : Maybe (Element msg)
}
The configuration for the dialog you display. The header
, body
and footer
are all Maybe (Element msg)
blocks. Those (Element msg)
blocks can
be as simple or as complex as any other view function.
Use only the ones you want and set the others to Nothing
.
The closeMessage
is an optional Signal.Message
we will send when the user
clicks the 'X' in the top right. If you don't want that X displayed, use Nothing
.
view : Maybe (Config msg) -> Element msg
Renders a modal dialog whenever you supply a Config msg
.
To use this, include this view in your top-level view function, right at the top of the DOM tree, like so:
type Msg
= ...
| ...
| CloseDialog
view : -> Model -> Element Msg
view model =
let
config =
{ closeMessage = Just CloseDialog
, maskAttributes = []
, containerAttributes = [ padding 10 ]
, headerAttributes = []
, bodyAttributes = []
, footerAttributes = []
, header = Just (text "Hello world")
, body = Nothing
, footer = Nothing
}
dialogConfig =
if model.showDialog then
Just config
else
Nothing
in
Element.layout
[ inFront (Dialog.view dialogConfig)
]
contentView
It's then up to you to replace model.showDialog
with whatever
logic should cause the dialog to be displayed, and to handle an
CloseDialog
message with whatever logic should occur when the user
closes the dialog.
See the examples/
directory for examples of how this works for apps
large and small.
map : (a -> b) -> Config a -> Config b
This function is useful when nesting components with the Elm Architecture. It lets you transform the messages produced by a subtree.
mapMaybe : (a -> b) -> Maybe (Config a) -> Maybe (Config b)
For convenience, a varient of map
which assumes you're dealing with a Maybe (Config a)
, which is often the case.