LineaUI.Components.Alert (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's alerts: filled, outlined, soft and bordered, with an icon, an accent bar or a close button.

<.alert>This is simple alert</.alert>
<.alert color="primary" variant="soft" shape="pill">Saved</.alert>
<.alert color="secondary" variant="soft" accent="left">With a bar</.alert>
<.alert color="info" variant="outline">
  <:icon boxed><svg>…</svg></:icon>
  This is simple alert
</.alert>
<.alert id="notice" color="info" variant="outline" dismissible>Closable</.alert>

dismiss_alert/1 fades out and hides the alert around the element that runs it, for close buttons placed by hand:

<.button phx-click={dismiss_alert()}>Remind me later</.button>

Summary

Functions

alert(assigns)

Renders an alert.

dismiss_alert(js \\ %JS{})

Fades out and hides the alert that holds the element running it, the way LineOne removes a dismissed alert.

Functions

alert(assigns)

Renders an alert.

With accent or a boxed :icon the alert is split into parts and its padding moves to the content; otherwise the content sits in the padded alert itself, after an inline icon.

<.alert id="saved" color="success" variant="soft" dismissible on_dismiss="hide_notice">
  <:icon><svg class="size-5">…</svg></:icon>
  Changes saved.
</.alert>

With on_dismiss="hide_notice" the server gets handle_event("hide_notice", %{"id" => "saved"}, socket).

Attributes

  • id (:string) - Defaults to nil.
  • color (:string) - Defaults to "neutral". Must be one of "neutral", "primary", "secondary", "info", "success", "warning", "error", or "dark".
  • variant (:string) - Defaults to "solid". Must be one of "solid", "outline", "soft", or "bordered".
  • shape (:string) - Defaults to "rounded". Must be one of "rounded", or "pill".
  • accent (:string) - A colored bar on one side of the alert. Defaults to nil. Must be one of nil, "left", or "right".
  • dismissible (:boolean) - Adds LineOne's close button, which fades the alert out. Defaults to false.
  • on_dismiss (:any) - An event name or a JS command run when the close button is pressed. The event's payload is %{"id" => id}. Defaults to nil.
  • target (:any) - The phx-target of on_dismiss. Defaults to nil.
  • open (:boolean) - false renders the alert hidden; the close button hides it in the browser. Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - An icon before the content. Accepts attributes:
    • boxed (:boolean) - Draws the icon on a filled block at the edge of the alert.
  • action - Controls after the content, such as a menu or a button.
  • inner_block (required)

dismiss_alert(js \\ %JS{})

@spec dismiss_alert(Phoenix.LiveView.JS.t()) :: Phoenix.LiveView.JS.t()

Fades out and hides the alert that holds the element running it, the way LineOne removes a dismissed alert.

<button phx-click={dismiss_alert()}>Close</button>