DevactionUI.Banner (devaction_ui v0.2.3)

Copy Markdown View Source

A full-width strip at the top of a page or a section that tells the whole screen something: news, a degraded service, an expiring plan, a lost connection. A bold lead and a line of text, an icon in front, one action link at the end and a button to dismiss it.

Four tones: :info, :warning, :critical and :offline (solid ink, the strongest strip). :critical is announced at once (role="alert"); the others politely (role="status"). It is not a toast: it stays until the person dismisses it or the cause is gone, and the server decides which, so a dismiss is an event (on_dismiss, a string or a %JS{}, sent to target when there is one) and the page stops rendering it.

The icon, the action and the dismiss icon are slots and every word is an attribute: the library knows no icon set and no language. Differs from DevactionUI.Alert, which sits inside a page under a form and has neither an action nor a way out.

Summary

Functions

A full-width strip with a lead, a text, an action and a dismiss button.

Functions

banner(assigns)

@spec banner(map()) :: Phoenix.LiveView.Rendered.t()

A full-width strip with a lead, a text, an action and a dismiss button.

Attributes

  • tone (:atom) - :critical is announced as an alert, the others as a status. Defaults to :info. Must be one of :info, :warning, :critical, or :offline.
  • title (:string) - the bold lead, such as Novelty:. Defaults to nil.
  • on_dismiss (:any) - the event (a string or a %JS{}) of the dismiss button; without it there is no button. Defaults to nil.
  • dismiss_label (:string) - the name of the dismiss button; needed with on_dismiss. Defaults to nil.
  • target (:any) - the LiveComponent (@myself) that receives on_dismiss. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - the line of text after the lead.
  • icon - the icon in front, drawn by the caller.
  • action - a link or button at the end, drawn underlined.
  • dismiss_icon - the icon of the dismiss button, such as a cross.