Dialog

Dialogs are popup menus which take focus and prohibit the user interacting with the content behind.

Use cases:

• Popup notification
• Configuration box

Example

Open Dialog

Genesis

Declaration

<rapid-dialog></rapid-dialog>

Usage

@customElement({
  name: 'my-element',
  template: html<MyElement>`
    <rapid-dialog ${ref('dialog')}>
      <h2>Dialog</h2>
      <p>This is an example dialog.</p>
    </rapid-dialog>
    <rapid-button @click="${(x) => x.showDialog()}"></rapid-button>
  `,
})
export class MyElement extends GenesisElement {
  dialog: Dialog;
  showDialog() {
    this.dialog.show();
  }
}

React

Declaration

<rapid-dialog></rapid-dialog>

Usage

export function MyComponent() {
  const dialogRef = useRef(null);

  return (
    <rapid-button onClick={() => {
      dialogRef.current?.removeAttribute('hidden');
      dialogRef.current?.show();
    }}>
      Open Dialog
    </rapid-button>

    <rapid-dialog
      ref={dialogRef}
      id="example1"
      class="example-dialog"
      aria-label="Simple modal dialog"
      modal="true"
      hidden
    >
      <h2>Dialog</h2>
      <p>This is an example dialog.</p>
    </rapid-dialog>
  )
}

Angular

Declaration

<rapid-dialog></rapid-dialog>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-component',
  template: `
    <rapid-button (click)="openDialog()">
      Open Dialog
    </rapid-button>

    <rapid-dialog
      #dialogRef
      id="example1"
      class="example-dialog"
      aria-label="Simple modal dialog"
      modal="true"
      hidden
    >
      <h2>Dialog</h2>
      <p>This is an example dialog.</p>
    </rapid-dialog>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [FormsModule],
})
export class MyComponent {
  @ViewChild('dialogRef') dialogRef!: ElementRef;

  openDialog() {
    this.dialogRef.nativeElement?.removeAttribute('hidden');
    this.dialogRef.nativeElement?.show();
  }
}

API

Attributes

Attribute	Type	Description	Example
type	'default' | 'error' | 'success'	The general style of dialog type to show. default type adds no extra styling, error shows a red highlight and success shows a green.	<rapid-dialog type="success">
position	'center' | 'left' | 'right'	The position of the dialog. center is the default.	<rapid-dialog position="right">
show-close-icon	boolean	Enables the close icon in the top right corner of the dialog. true is the default.	<rapid-dialog show-close-icon="false">

Properties

Property	Type	Description	Example
onShowCallback	() => void	Function that runs before dialog is opened.	<rapid-dialog :onShowCallback="${(x) => () => x.beforeDialogShown()}">
onCloseCallback	() => void	Function that is called after the dialog is closed.	<rapid-dialog :onCloseCallback="${(x) => () => x.afterDialogHide()}">

Methods

Method	Description	Example
show	Show the dialog	dialogRef.show()
close	Hides the dialog	dialogRef.close()

Slots

Slot	Description
Default	All the content which you want to display on the dialog box when shown.
top	Can be used to set a title section for the dialog.
bottom	Can be used to set a footer section for the dialog.

Parts

Part	Description
dialog	the base html dialog tag
top	The top part of the dialog which contains the dialog header
bottom	The bottom part of the dialog which contains the dialog footer

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.