primait / pyxis-components / Prima.Pyxis.Modal

Configuration


type Config msg

Represent the configuration of a Modal. This type can't be created directly and is Opaque. You must use Configuration constructors instead

Configuration Methods

small : Basics.Bool -> msg -> Config msg

Small size modal constructor. Modal by default is printed with a close button on header Requires initial visibility state, and the event that should be emitted when user interacts with close button

eg.

--
type Msg
    = HideYourModal

type alias Model =
    { field1 : FieldType
    , isModalVisible : Bool
    }
...
-- Somewhere in your views

yourModal : Model -> Html Msg
yourModal { isModalVisible } =
    Modal.small isModalVisible HideYourModal
        |> Modal.render

medium : Basics.Bool -> msg -> Config msg

Medium modal configuration constructor. Modal by default is printed with a close button on header Requires initial visibility state, and the event that should be emitted when user interacts with close button

eg.

--
type Msg
    = HideYourModal

type alias Model =
    { field1 : FieldType
    , isModalVisible : Bool
    }
...
-- Somewhere in your views

yourModal : Model -> Html Msg
yourModal { isModalVisible } =
    Modal.medium isModalVisible HideYourModal
        |> Modal.render

large : Basics.Bool -> msg -> Config msg

Large modal configuration constructor. Modal by default is printed with a close button on header Requires initial visibility state, and the event that should be emitted when user interacts with close button

eg.

--
type Msg
    = HideYourModal

type alias Model =
    { field1 : FieldType
    , isModalVisible : Bool
    }
...
-- Somewhere in your views

yourModal : Model -> Html Msg
yourModal { isModalVisible } =
    Modal.large isModalVisible HideYourModal
        |> Modal.render

smallAlt : Basics.Bool -> msg -> Config msg

Small size modal constructor with Dark style.

mediumAlt : Basics.Bool -> msg -> Config msg

Medium size modal constructor with Dark style.

largeAlt : Basics.Bool -> msg -> Config msg

Large size modal constructor with Dark style.

Rendering

render : Config msg -> Html msg

Renders the modal config (note that modal is not rendered until visible

Methods

hide : Config msg -> Config msg

Utility that hides a modal. If you need to hold modal config in your model you can avoid visibility state duplication and simply use this helper in your update to hide the modal when you need

eg.

--
type Msg
    = HideYourModal
    | ShowModal

type alias Model =
    { ...
    , myModal : Modal.Config Msg
    }

model: Model
model =
   { ...
   , myModal = Modal.small False HideYourModal
   }
...
-- Somewhere in your views

yourModal : Model -> Html Msg
yourModal { myModal } =
    myModal
        |> Modal.render

-- Somewhere in your update
case msg of
    ShowModal ->
        model
            |> showModal
            |> withoutCmds
    HideYourModal ->
        model
            |> hideModal
            |> withoutCmds
 ...

 showModal: Model -> Model
 showModal model =
    { model
        | myModal = Modal.show model.myModal
    }

 hideModal: Model -> Model
 hideModal model =
    { model
         | myModal = Modal.hide model.myModal
    }

show : Config msg -> Config msg

Utility that shows a modal. If you need to hold modal config in your model you can avoid visibility state duplication and simply use this helper in your update to show the modal when you need

eg.

--
type Msg
    = HideYourModal
    | ShowModal

type alias Model =
    { ...
    , myModal : Modal.Config Msg
    }

model: Model
model =
   { ...
   , myModal = Modal.small False HideYourModal
   }
...
-- Somewhere in your views

yourModal : Model -> Html Msg
yourModal { myModal } =
    myModal
        |> Modal.render

-- Somewhere in your update
case msg of
    ShowModal ->
        model
            |> showModal
            |> withoutCmds
    HideYourModal ->
        model
            |> hideModal
            |> withoutCmds
 ...

 showModal: Model -> Model
 showModal model =
    { model
        | myModal = Modal.show model.myModal
    }

 hideModal: Model -> Model
 hideModal model =
    { model
         | myModal = Modal.hide model.myModal
    }

toggle : Config msg -> Config msg

Utility that toggle modal visibility. If you need to hold modal config in your model you can avoid visibility state duplication and simply use this helper in your update to toggle the modal when you need

eg.

--
type Msg
    = ToggleYourModal

type alias Model =
    { ...
    , myModal : Modal.Config Msg
    }

model: Model
model =
   { ...
   , myModal = Modal.small False HideYourModal
   }
...
-- Somewhere in your views

yourModal : Model -> Html Msg
yourModal { myModal } =
    myModal
        |> Modal.render

-- Somewhere in your update
case msg of
    ToggleModal ->
        model
            |> toggleModal
            |> withoutCmds
 ...

 toggleModal: Model -> Model
 toggleModal model =
    { model
        | myModal = Modal.toggle model.myModal
    }

Options

withAttribute : Html.Attribute msg -> Config msg -> Config msg

Modifier Adds generic attribute to modal. It can be used several times

withClass : String -> Config msg -> Config msg

Modifier Adds class attribute to modal.

withClassList : List ( String, Basics.Bool ) -> Config msg -> Config msg

Modifier Adds classList attribute to modal.

withId : String -> Config msg -> Config msg

Modifier Adds id attribute to modal.

withStyle : String -> String -> Config msg -> Config msg

Modifier Adds style attribute to modal. It can be used several times

withTitleAttribute : String -> Config msg -> Config msg

Modifier Adds title attribute to modal.

Overlay Options

withCloseOnOverlayClick : Config msg -> Config msg

Modifier The modal closes if overlay is clicked

withOverlayStyle : String -> String -> Config msg -> Config msg

Modifier Adds a style attribute to overlay. It can be used several times

withOverlayAttribute : Html.Attribute msg -> Config msg -> Config msg

Modifier Adds a generic attribute to overlay. If you are planning to add a custom event listener you may take a look to InterceptedEvents and Interceptor modules to avoid undesired bubbling and onOverlayClick function in this module.

withOverlayClass : String -> Config msg -> Config msg

Modifier Adds class attribute to overlay

withOverlayClassList : List ( String, Basics.Bool ) -> Config msg -> Config msg

Modifier Adds classList attribute to overlay

Header Options

withHeaderAttribute : Html.Attribute msg -> Config msg -> Config msg

Modifier Adds generic attribute to modal header. It can be used several times

withHeaderClass : String -> Config msg -> Config msg

Modifier Adds class attribute to modal header.

withHeaderClassList : List ( String, Basics.Bool ) -> Config msg -> Config msg

Modifier Adds classList attribute to modal header.

withHeaderContent : List (Html msg) -> Config msg -> Config msg

Modifier Adds a custom html content in modal header with close button

withHeaderContentOnly : List (Html msg) -> Config msg -> Config msg

Modifier Adds a custom html content in modal header without close button

withHeaderStyle : String -> String -> Config msg -> Config msg

Modifier Adds a style attribute to header. It can be used several times

withHeaderTitle : String -> Config msg -> Config msg

Modifier Prints given string in modal title section with close button

withHeaderTitleOnly : String -> Config msg -> Config msg

Modifier Prints given string in modal title section without close button

Body Options

withBodyAttribute : Html.Attribute msg -> Config msg -> Config msg

Modifier Adds a generic attribute to modal body. It can be used several times

withBodyClass : String -> Config msg -> Config msg

Modifier Adds a class attribute to modal body.

withBodyClassList : List ( String, Basics.Bool ) -> Config msg -> Config msg

Modifier Adds a classList attribute to modal body.

withBodyContent : List (Html msg) -> Config msg -> Config msg

Modifier Adds a content to modal body.

withBodyStyle : String -> String -> Config msg -> Config msg

Modifier Adds a style attribute to modal body. It can be used several times

Footer Options

withFooterAttribute : Html.Attribute msg -> Config msg -> Config msg

Modifier Adds a generic attribute to modal footer. It can be used several times

withFooterClass : String -> Config msg -> Config msg

Modifier Adds a class attribute to modal footer.

withFooterClassList : List ( String, Basics.Bool ) -> Config msg -> Config msg

Modifier Adds classList attribute to modal footer.

withFooterContent : List (Html msg) -> Config msg -> Config msg

Modifier Adds a content to modal footer.

withFooterStyle : String -> String -> Config msg -> Config msg

Modifier Adds a style attribute to modal footer. It can be used several times