Banner

Use cases:

• Highlighting an item.
• Flagging an item as part of a category.
• Representing a value of unread messages.

Example

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

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

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 banner text, commonly a name or initials.

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.