supermacro / elm-antd / Ant.Modal

Render a Modal dialog to the page.

Example:

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 ]

Definition


type Modal msg

Opaque type that represents a configurable Modal.


type alias ModalState =
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.

Creating and configuring a Modal

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.

Footer Configuration


type ModalFooter msg

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.

Rendering the Modal

toHtml : ModalState -> Modal msg -> Html msg

Render the Modal.