Beacon.LiveAdmin.StationUI.HTML.Banner (Beacon LiveAdmin v0.4.0)

View Source

Summary

Functions

The banner component renders an enclosed title, description, and close button. The title content goes into the main inner_block slot. The optional secondary (lower) content goes into the secondary slot.

Functions

banner(assigns)

The banner component renders an enclosed title, description, and close button. The title content goes into the main inner_block slot. The optional secondary (lower) content goes into the secondary slot.

Examples

Default banner with left icon, title, and secondary text:

<.banner id="icon-title-and-secondary">

<.icon name="hero-information-circle-solid" class="text-[--sui-brand-primary] shrink-0" />
<h2 class="font-medium text-xl pl-2">Default Banner with Icon and Secondary</h2>
<:secondary>
  Secondary text.
</:secondary>

</.banner>

Banner of default size but without border:

<.banner id="no-border" class="border-transparent [&_span]:h-6 [&_span]:w-6 text-base">

...

</.banner>

Suggested classes for various text sizes and the default border styling:

  • xs -> "border-[--sui-brand-primary-border] [&_span]:h-3.5 [&_span]:w-3.5 text-xs"
  • sm -> "border-[--sui-brand-primary-border] [&_span]:h-4.5 [&_span]:w-4.5 text-sm"
  • md -> "border-[--sui-brand-primary-border] [&_span]:h-6 [&_span]:w-6 text-base" (the default)
  • lg -> "border-[--sui-brand-primary-border] [&_span]:h-9 [&_span]:w-9 text-xl"
  • xl -> "border-[--sui-brand-primary-border] [&_span]:h-12 [&_span]:w-12 text-3xl"

Attributes

  • id (:string) (required)
  • class (:any) - Defaults to "border-[--sui-brand-primary-border] [&_span]:h-6 [&_span]:w-6 text-base".
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.

Slots

  • inner_block (required)
  • secondary