Banner

Banner

• adoptedCallback

  () => void

• attributeChangedCallback

  (name: string) => void

• click

  Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.

  ({ sourceEvent }?: ClickOptions) => void

• connectedCallback

  () => void

• disconnectedCallback

  () => void

• dismissible

  Determines whether the close button of the banner is present. When the close button is pressed, the `dismiss` event will fire, then `hidden` will be true, any animation will complete, and the `afterhide` event will fire.

  boolean

• heading

  The title of the banner.

  string

• hidden

  Determines whether the banner is hidden. If this property is being set on each framework render (as in 'controlled' usage), and the banner is `dismissible`, ensure you update app state for this property when the `dismiss` event fires. If the banner is not `dismissible`, it can still be hidden by setting this property.

  boolean

• queueRender

  Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.

  () => void

• setAttribute

  (name: string, value: string) => void

• tone

  Sets the tone of the Banner, based on the intention of the information being conveyed. The banner is a live region and the type of status will be dictated by the Tone selected. - `critical` creates an [assertive live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) that is announced by screen readers immediately. - `neutral`, `info`, `success`, `warning` and `caution` creates an [informative live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) that is announced by screen readers after the current message.

  "info" | "success" | "warning" | "critical" | "auto"

declare class Banner extends PreactCustomElement implements BannerProps {
  accessor heading: BannerProps['heading'];
  accessor tone: BannerProps['tone'];
  accessor hidden: BannerProps['hidden'];
  accessor dismissible: BannerProps['dismissible'];
  constructor();
}

ClickOptions

• sourceEvent

  The event you want to influence the synthetic click.

  ActivationEventEsque

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

• button

  number

• ctrlKey

  boolean

• metaKey

  boolean

• shiftKey

  boolean

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

BannerEvents

• afterhide

  CallbackEventListener<typeof tagName> | null

• dismiss

  CallbackEventListener<typeof tagName> | null

export interface BannerEvents {
  dismiss: CallbackEventListener<typeof tagName> | null = null;
  afterhide: CallbackEventListener<typeof tagName> | null = null;
}

CallbackEventListener

(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null

CallbackEvent

Event & {
  currentTarget: HTMLElementTagNameMap[T];
}

BannerSlots

• secondary-actions

  The secondary actions to display at the bottom of the banner. A maximum of two `s-button` components are allowed, and only buttons with the `variant` of "secondary" are permitted.

  HTMLElement

export interface BannerSlots {
  /**
   * The secondary actions to display at the bottom of the banner.
   *
   * A maximum of two `s-button` components are allowed, and only buttons with the `variant` of "secondary" are permitted.
   */
  'secondary-actions'?: HTMLElement;
}