Banner

A Banner is displayed when a user lands on a page to provide a message or greeting. The user can simply click on the banner to remove it.

Use cases:

• displaying a greeting
• displaying information, such as changes to a page

Example

This example shows a simple banner. You can click to remove it. (Reload the page to see the banner again.)

A banner for displaying information... Click to dismiss!

Genesis

Declaration

<rapid-banner></rapid-banner>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-banner
      ${ref('bannerRef')}
      @click=${x => x.handleClick()}>
      <div slot="content">
        A banner for displaying information... Click to dismiss!
      </div>
    </rapid-banner>
  `,
})
export class MyElement extends GenesisElement {
  @observable bannerRef: Banner;
  handleClick() {
    this.bannerRef.dismiss()
  }
}

React

Declaration

  <rapid-banner></rapid-banner>

Usage

export function MyComponent() {
  const bannerRef = useRef(null);
  const handleClick = (e) => {
    bannerRef.current?.dismiss();
  }
  return (
    <rapid-banner onClick={handleClick}>
      <div slot="content">
        A banner for displaying information... Click to dismiss!
      </div>
    </rapid-banner>
  );
}

Angular

Declaration

  <rapid-banner></rapid-banner>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
      <rapid-banner #bannerRef (click)="handleClick()">
        <div slot="content">
          A banner for displaying information... Click to dismiss!
        </div>
      </rapid-banner>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  @ViewChild('bannerRef') bannerRef!: ElementRef;
  handleClick() {
    this.dialogRef.nativeElement?.dismiss();
  }
}

API

Attributes

This component doesn't have any attributes.

Properties

This component doesn't have any properties.

Methods

Method	Description
dismiss	Dismisses the banner.

Slots

Name	Description
Default	The default slot for the banner text.

Parts

Name	Description
control	The element representing the banner, which wraps the default slot.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.