Mixins / foldkit-mixins-ui

Banner

namespace · packages/mixins-ui/src/banner.ts:1

export * as Banner from './banner.js'

In the guides

Members

Banner.BannerAction

type · packages/mixins-ui/src/banner.ts:29

type BannerAction<Message> =
  | {
      readonly label: string
      readonly href: string
    }
  | {
      readonly label: string
      readonly onClick: Message
    }

The banner's action: a link to follow, or a button that sends a Message.

Banner.BannerSlots

const · packages/mixins-ui/src/banner.ts:16

const BannerSlots: Slots.Contract<{
  readonly root: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly [Attr.AttrToken<'aria-label'>],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly icon: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly message: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly action: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly dismiss: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly [Event.EventToken<'click'>],
    readonly [Attr.AttrToken<'aria-label'>],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A banner: a full-width notice across the top of a page or a section, with an optional action and an optional dismiss button. Alert is a notice inside the content; a banner frames it. The root is a named region landmark (a section with aria-label), not a live region: a banner is on the page when it loads, which a live region does not announce, and a landmark lets a screen reader find it, and its dismiss button, from anywhere. A notice that appears because something just happened is an Alert or a Toast. Shown or dismissed is the application's: onDismiss asks, and the next view leaves the banner out.

Banner.BannerView

interface · packages/mixins-ui/src/banner.ts:33

interface BannerView<Message> {
  readonly label: string
  readonly message: string
  readonly icon?: Html | undefined
  readonly action?: BannerAction<NoInfer<Message>> | undefined
  readonly onDismiss?: NoInfer<Message> | undefined
  readonly dismissLabel?: string | undefined
  readonly style?: NamedStyle<typeof BannerSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Banner.view

function · packages/mixins-ui/src/banner.ts:49

function view<Message>(
  options: BannerView<Message>,
  h: HtmlBuilder<Message>,
): Html