DevactionUI.ToastGroup (devaction_ui v0.1.0)

Copy Markdown View Source

Notices that pile up without covering the screen: while there is more than one they sit as a stack of layers with a count, and a click (or the button) opens them into a list with "Collapse" and "Clear". Each toast closes by itself after duration milliseconds (0 keeps it), pausing while the pointer or the focus is in the group or the list is open. Closing one, or clearing all, is sent to the LiveView (on_dismiss, on_clear), which is the source of truth: it removes the toast from what it renders.

The caller places the group (class="fixed right-4 bottom-4 w-[380px]"). The newest toast is the first in the slot. A toast is :dark (the inverted one), :light or :risk (announced as an alert).

Summary

Functions

toast_group(assigns)

Attributes

  • id (:string) (required)
  • label (:string) (required) - the region's name, for assistive technology.
  • on_dismiss (:string) (required) - event sent with phx-value-id when a toast closes.
  • on_clear (:string) (required) - event sent when all are cleared.
  • expand_label (:string) (required)
  • collapse_label (:string) (required)
  • clear_label (:string) (required)
  • dismiss_label (:string) (required) - for the × of each toast.
  • count_label (:string) (required) - with __COUNT__, e.g. __COUNT__ notices.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • toast (required) - Accepts attributes:
    • id (:string) (required)
    • kind (:atom)
    • title (:string) (required)
    • duration (:integer)
    • action_label (:string)
    • action_event (:string)
  • close_icon - replaces the typographic × that dismisses a toast.