nathanjohnson320 / elm-ui-components / ElmUIC.Modal

A styled full page Modal


type alias Modal =
{ kind : ElmUIC.Theme.ColorSetting
, size : ElmUIC.Theme.Size
, text : Css.Color
, open : Basics.Bool
, closeOnOverlay : Basics.Bool 
}

Base model for a Modal

defaultModal : Modal

Instantiates the default properties of a modal

{ defaultModal | open = True }

modal : ElmUIC.Theme.Theme -> Modal -> (Basics.Bool -> msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

A styled modal

modal
    defaultTheme
    { defaultModal
        | open = model.modalOpen
    }
    ToggleModal
    [ css [ width (px 400), height (px 400) ] ]
    [ button
        defaultTheme
        defaultButton
        [ onClick <| ToggleModal False ]
        [ text "Close it!" ]
    ]