Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcBannerComponent

The igc-banner component displays important and concise message(s) for a user to address, that is specific to a page or feature.

Element

igc-banner

Slot

  • Renders the text content of the banner message.

Slot

prefix - Renders additional content at the start of the message block.

Slot

actions - Renders any action elements.

Fires

igcClosing - Emitted before closing the banner - when a user interacts (click) with the default action of the banner.

Fires

igcClosed - Emitted after the banner is closed - when a user interacts (click) with the default action of the banner.

Csspart

base - The base wrapper of the banner component.

Csspart

spacer - The inner wrapper that sets the space around the banner.

Csspart

message - The part that holds the text and the illustration.

Csspart

illustration - The part that holds the banner icon/illustration.

Csspart

content - The part that holds the banner text content.

Csspart

actions - The part that holds the banner action buttons.

Hierarchy

Hierarchy

  • EventEmitterInterface<IgcBannerComponentEventMap, this> & LitElement<this>
    • IgcBannerComponent

Properties

Methods

Properties

open

open: boolean = false

Determines whether the banner is being shown/hidden.

Attr

Static ReadonlytagName

tagName: "igc-banner" = 'igc-banner'

Returns the HTML-uppercased qualified name.

MDN Reference

Methods

hide

  • hide(): Promise<boolean>

  • Hides the banner if not already hidden. Returns true when the animation has completed.

    Returns Promise<boolean>

show

  • show(): Promise<boolean>

  • Shows the banner if not already shown. Returns true when the animation has completed.

    Returns Promise<boolean>

toggle

  • toggle(): Promise<boolean>

  • Toggles between shown/hidden state. Returns true when the animation has completed.

    Returns Promise<boolean>