Render a Modal dialog to the page.
type Msg
= ModalStateChanged Ant.Modal.ModalState
| ModalConfirmClicked Ant.Modal.ModalState
| LaunchMisslesButtonClicked
update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
case msg of
LaunchMisslesButtonClicked ->
( { model | modalOpen = True }, Cmd.none )
ModalStateChanged newState ->
( { model | modalOpen = newState }, Cmd.none )
ModalConfirmClicked newState ->
let
cmd =
initiateLaunchSequence model
in
( { model | modalOpen = newState }, cmd )
view : Model -> Html Msg
view model =
let
buttonToggle =
button "Fire ze missles!"
|> Btn.withType Btn.Primary
|> Btn.onClick LaunchMisslesButtonClicked
|> Btn.toHtml
modalFooter =
Modal.footer
|> Modal.withOnConfirm ModalConfirmClicked
htmlModal =
Modal.modal modalContents
|> Modal.withTitle "Are you sure you want to launch ze missles?"
|> Modal.withOnCancel ModalStateChanged
|> Modal.withFooter modalFooter
|> Modal.withVerticalOffsetInPercentage 35
|> Modal.toHtml model.modalOpen
in
div [] [ htmlModal, buttonToggle ]
Opaque type that represents a configurable Modal.
Basics.Bool
State of the Modal, currently this is a simple Bool alias that represents the Modal's visibility, but it may change in the future to hold other state.
This value must be saved in your Model.
modal : Html msg -> Modal msg
Create a configurable Modal that will render whatever you pass into it within the body of the Modal.
withClosable : Basics.Bool -> Modal msg -> Modal msg
Whether a close (x
) button is visible on top right of the modal dialog or not.
The default is True
already.
Note that this icon will only render if the option is toggled on AND the withOnCancel
function has been called.
withMask : Basics.Bool -> Modal msg -> Modal msg
Whether a opaque dark grey background gets rendered behind the Modal to provide visual emphasis on to the Modal.
By default this value is set to True
.
The "click out" behaviour is not affected by this combinator. Clicking outside of the modal still hides the Modal if you have configured withOnCancel
.
withOnCancel : (ModalState -> msg) -> Modal msg -> Modal msg
Specify a msg
tag that will be triggered when a user clicks out of the Modal (on the opaque mask surrounding the Modal), close button on top right or Cancel button on the footer
.
withTitle : String -> Modal msg -> Modal msg
Specify a title to be rendered at the Header of the Modal.
withVerticalOffsetInPercentage : Basics.Float -> Modal msg -> Modal msg
Specify a percentage value for positioning the modal vertically with respect to the documents height.
By default this value is set to 15
.
withVerticalOffsetInPixels : Basics.Float -> Modal msg -> Modal msg
Specify a pixel value for positioning the modal vertically with respect to the documents height.
withFooter : ModalFooter msg -> Modal msg -> Modal msg
Whether a ModalFooter
should be added to the Modal. By default the Modal does not have a footer.
See the Footer Configuration section on creating and configuring footers.
Represents a configurable Modal footer. See the footer
function for creating this type.
See the Footer Configuration section on options for configuring a ModalFooter
.
footer : ModalFooter msg
Create a configurable Footer
to be rendered with the withFooter
function.
By default, a footer is rendered with nothing inside of it. If you want a "cancel" button, you need to call withOnCancel
on the Modal itself. And if you want a confirm button, you need to call withOnConfirm
on the footer.
withCancelText : String -> ModalFooter msg -> ModalFooter msg
Set a custom prompt for the cancel button on the modal footer.
Recall that to actually render a "cancel" button, you need to call withOnCancel
on the Modal itself.
withOnConfirm : (ModalState -> msg) -> ModalFooter msg -> ModalFooter msg
Used to render a primary call-to-action on the footer modal.
type Msg = ModalConfirmClicked Modal.ModalState
update : Msg -> Model -> ( Model, Cmd msg )
update msg =
case msg of
ModalConfirmClicked newState ->
({ modal | missleLaunchModal | newState }, launchTheMissles )
modalFooter =
Modal.footer
|> Modal.withOnConfirm ModalConfirmClicked
myModal = Modal.modal
|> Modal.withFooter modalFooter
withOnConfirmText : String -> ModalFooter msg -> ModalFooter msg
Set a custom prompt for the primary call-to-action on the modal footer.
toHtml : ModalState -> Modal msg -> Html msg
Render the Modal.