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 =
{ modalState : Modal.State }
init : ( Model, Cmd Msg )
init =
( { modalState : Modal.hiddenState }, Cmd.none )
type Msg
= ModalMsg Modal.State
update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
ModelMsg state ->
( { model | modalState = state }
, Cmd.none
)
view : Model -> Html msg
view model =
Grid.container []
[ Button.button
[ Button.attrs [ onClick ModalMsg Modal.visibleState ] ]
[ text "Show modal" ]
, Modal.config ModalMsg
|> 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 <| ModalMsg Modal.hiddenState ]
]
[ text "Close" ]
]
|> Modal.view
]NOTE: Don't try to open several modals at the same time. It probably won't end well.
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.
In this state the modal will be displayed
Opaque representation of the view state of a modal
Option to make a modal smaller than the default
Option to make a modal larger than the default
Opaque type representing configuration options
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 forCreates a modal header with a h1 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h2 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h3 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h4 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h5 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates 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
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
Create a modal for your application
stateThe current view state of the modal. You need to keep track of this state in your modelconfigView configuration