Catalog Notifications

<.notifier>

ConnieUI.Notifications

HEEx

<ConnieUI.Layouts.inline gap="sm">
  <ConnieUI.Buttons.button
    color="secondary"
    click={
      ConnieUI.Notifications.show_notification(
        %JS{},
        "Changes saved",
        "Lars Hansen's contract is up to date."
      )
    }
  >
    Show info
  </ConnieUI.Buttons.button>
  <ConnieUI.Buttons.button
    color="secondary"
    click={
      ConnieUI.Notifications.show_notification(
        %JS{},
        "Could not send",
        "The signer's email address bounced.",
        kind: :error
      )
    }
  >
    Show error
  </ConnieUI.Buttons.button>
  <ConnieUI.Buttons.button
    color="secondary"
    click={JS.dispatch("notification:disconnected", to: "#notifier")}
  >
    Lose the connection
  </ConnieUI.Buttons.button>
  <ConnieUI.Buttons.button
    color="secondary"
    click={JS.dispatch("notification:connected", to: "#notifier")}
  >
    Reconnect
  </ConnieUI.Buttons.button>
</ConnieUI.Layouts.inline>
<ConnieUI.Notifications.notifier />

Controls

Set by the example

notifications

Docs

Renders a notifier component that listens for JavaScript events to show messages. This component should be placed at the top-level of your app layout and will handle notifications dispatched from anywhere in the component tree. ## Examples <ConnieUI.Notifications.notifier /> # With server-side flash messages <ConnieUI.Notifications.notifier notifications={flash_to_notifications(@flash)} />

Attribute	Type	Default
No data found.
id	:string	"notifier"
notifications	:list	[]
rest	:global