billstclair / elm-dialog / Dialog

Elm Mdl Dialog


type alias Config msg =
{ 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
            )


type alias Visible =
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