Beacon.LiveAdmin.StationUI.HTML.Banner (Beacon LiveAdmin v0.4.0)
View SourceSummary
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
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