Modals are streamlined, but flexible dialog prompts. They support a number of use cases from user notifications to completely custom content and feature a handful of helpful subcomponents, sizes, and more.
type alias Model =
{ modalVisibility : Modal.Visibility }
init : ( Model, Cmd Msg )
init =
( { modalVisibility = Modal.hidden }, Cmd.none )
type Msg
= CloseModal
| ShowModal
update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
CloseModal ->
( { model | modalVisibility = Modal.hidden }
, Cmd.none
)
ShowModal ->
( { model | modalVisibility = Modal.shown }
, Cmd.none
)
view : Model -> Html msg
view model =
Grid.container []
[ Button.button
[ Button.attrs [ onClick ShowModal ] ]
[ text "Show modal" ]
, Modal.config CloseModal
|> Modal.small
|> Modal.h5 [] [ text "Modal header" ]
|> Modal.body []
[ Grid.containerFluid []
[ Grid.row []
[ Grid.col
[ Col.xs6 ]
[ text "Col 1" ]
, Grid.col
[ Col.xs6 ]
[ text "Col 2" ]
]
]
]
|> Modal.footer []
[ Button.button
[ Button.outlinePrimary
, Button.attrs [ onClick CloseModal ]
]
[ text "Close" ]
]
|> Modal.view model.modalVisibility
]
NOTE: Don't try to open several modals at the same time. It probably won't end well.
view : Visibility -> Config msg -> Html msg
Create a modal for your application
show
Whether to display the modal or not (if False
the content is still in the dom, but hidden). You need to keep track of this state in your modelconfig
View configurationconfig : msg -> Config msg
Create an initial modal config. You can enrich the config by using the header, body, footer and option related functions.
Opaque type representing the view config for a model. Use the config
function to create an initial config.
hidden : Visibility
The modal should be hidden
shown : Visibility
The modal should be made visible.
Visibility state for the modal
small : Config msg -> Config msg
Option to make a modal smaller than the default
large : Config msg -> Config msg
Option to make a modal larger than the default
centered : Basics.Bool -> Config msg -> Config msg
If you don't like the modal vertically centered, override with False here!
hideOnBackdropClick : Basics.Bool -> Config msg -> Config msg
Option to trigger close message when the user clicks on the modal backdrop. Default True.
scrollableBody : Basics.Bool -> Config msg -> Config msg
Use this function to make the Modal body scrollable.
attrs : List (Html.Attribute msg) -> Config msg -> Config msg
Use this function to add any Html.Attribute options you wish to the Modal
header : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a header for a modal, typically for titles, but you can be imaginative
attributes
List of attributeschildren
List of child elementsconfig
configuration settings to configure header forh1 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Creates a modal header with a h1 title child element
attributes
List of attributeschildren
List of child elementsconfig
configuration settings to configure header forh2 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Creates a modal header with a h2 title child element
attributes
List of attributeschildren
List of child elementsconfig
configuration settings to configure header forh3 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Creates a modal header with a h3 title child element
attributes
List of attributeschildren
List of child elementsconfig
configuration settings to configure header forh4 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Creates a modal header with a h4 title child element
attributes
List of attributeschildren
List of child elementsconfig
configuration settings to configure header forh5 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Creates a modal header with a h5 title child element
attributes
List of attributeschildren
List of child elementsconfig
configuration settings to configure header forh6 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Creates a modal header with a h6 title child element
attributes
List of attributeschildren
List of child elementsconfig
configuration settings to configure header forOpaque type representing a modal header
body : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a body for a modal, you would typically always create a body for a modal
attributes
List of attributeschildren
List of child elementsconfig
configuration settings to configure body forOpaque type representing a modal body
footer : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a footer for a modal. Normally used for action buttons, but you might be creative
attributes
List of attributeschildren
List of child elementsconfig
configuration settings to configure header forOpaque type representing a modal body
When you want your modal to support an animation when displayed and closed. There is a few more things you must wire-up and keep in mind.
withAnimation : (Visibility -> msg) -> Config msg -> Config msg
Configure the modal to support fade-in/out animations. You'll need to provide a message to handle animation.
subscriptions : Visibility -> (Visibility -> msg) -> Platform.Sub.Sub msg
Subscription for handling animations
hiddenAnimated : Visibility
When using animations use this state for handling custom close buttons etc.
Button.button
[ Button.outlinePrimary
, Button.attrs [ onClick <| CloseModalAnimated Modal.hiddenAnimated ]
]
[ text "Close" ]
type Msg
= ShowModal
-- Note the extra msg constructor needed
| AnimateModal Modal.Visibility
| CloseModal
update : Msg -> State -> State
update msg state =
case msg of
CloseModal ->
{ state | modalVisibility = Modal.hidden }
ShowModal ->
{ state | modalVisibility = Modal.shown }
-- You need to handle the extra animation message
AnimateModal visibility ->
{ state | modalVisibility = visibility }
-- Animations for modal doesn't work without a subscription.
-- DON“T forget this !
subscriptions : Model -> Sub msg
subscriptions model =
Sub.batch
[ Modal.subscriptions model.modalVisibility AnimateModal ]
view : Model -> Html msg
view model =
Grid.container []
[ Button.button
[ Button.attrs [ onClick ShowModal ] ]
[ text "Show modal" ]
, Modal.config CloseModal
|> Modal.h5 [] [ text "Modal header" ]
|> Modal.body [] [ text "Modal body" ]
|> Modal.footer []
[ Button.button
[ Button.outlinePrimary
, Button.attrs [ onClick <| AnimateModal Modal.hiddenAnimated ]
]
[ text "Close" ]
]
|> Modal.view model.modalVisibility
]