Dialog

A dialog is a pop-up dialog (rectangular panel) that takes focus, and prohibits the user from interacting with the content behind.

Use cases:

• pop-up notification
• configuration box

Example

The example below shows the component in action. Clicking on the Open Dialog button displays a dialog with some simple text. Click in the x in the top right corner to remove the dialog.

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. Default is center.	<rapid-dialog position="right">
show-close-icon	boolean	Enables the close icon in the top right corner of the dialog. Default is true.	<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	Shows the dialog.	dialogRef.show()
close	Hides the dialog.	dialogRef.close()

Slots

Slot	Description
Default	All the content that 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

Event	Type	Description	Example
close	void	Fired when the dialog is closed, either through the close button or programmatic close.	<rapid-dialog @close="${(x) => x.handleDialogClose()}">

Events listened to

This component doesn't listen to any events.