Uses the styles from Pico to display a modal. The component comes with pretty animations and the functionality to "lock" scrolling when the modal is open.
This does however require interaction with the page outside the modal.
You need to include the webcomponent that's in picomponent.js
in the packages repository root.
There must be only one instance of the modal component. since there can never be multiple modals open at the same time.
For the animation the component needs it's own state. So it is implemented with the Elm architecture.
You need to:
ModalState
field to your modelModal.init
Mgs
type that takes a Modal.Msg
as an argumentModal.Msg
to Modal.update
and update your ModalState
accordinglyModal.subscription
(and tell it which of your Msg
to use to wrap the Modal.Msg
)Modal.view
to render your modalThe state of the modal.
init : ModalState
The initial, closed state of the modal.
The messages that will be sent to control the state of the modal.
update : Msg -> ModalState -> ModalState
Transitions the modal
subscription : (Msg -> msg) -> ModalState -> Platform.Sub.Sub msg
Listens to the escape key to close the modal.
view : ModalState -> List (Html msg) -> Html msg
Render the modal.
open : ModalState
Opens the modal.
close : ModalState
Closes the modal.
toggle : ModalState -> ModalState
Toggles the modal.