axelerator / picomponents / Pico.Modal

Modal component

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.

Setup

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:

  1. add a ModalState field to your model
  2. initialize it with Modal.init
  3. add a variant to your Mgs type that takes a Modal.Msg as an argument
  4. forward the Modal.Msg to Modal.update and update your ModalState accordingly
  5. subscribe to Modal.subscription (and tell it which of your Msg to use to wrap the Modal.Msg)
  6. use Modal.view to render your modal


type ModalState

The state of the modal.

init : ModalState

The initial, closed state of the modal.


type Msg

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.

Control visibility

open : ModalState

Opens the modal.

close : ModalState

Closes the modal.

toggle : ModalState -> ModalState

Toggles the modal.