Represent the configuration of a Modal
.
This type can't be created directly and is Opaque.
You must use Configuration constructors instead
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
--
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
--
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
--
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.
render : Config msg -> Html msg
Renders the modal config (note that modal is not rendered until visible
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
--
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
--
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
--
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
}
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.
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
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
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
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