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.

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.

This function is useful when nesting components with the Elm Architecture. It lets you transform the messages produced by a subtree.

For convenience, a varient of map which assumes you're dealing with a Maybe (Config a), which is often the case.