fast-dialog

A web component implementation of a dialog which can either be modal or non-modal.

Usage

<fast-dialog id="example1" class="example-dialog" aria-label="Simple modal dialog" modal="true" hidden>
<h2>Dialog</h2>
<p>This is an example dialog.</p>
<fast-button>Close Dialog</fast-button>
</fast-dialog>

Applying custom styles

import { customElement } from "@microsoft/fast-element";
import { Dialog, DialogTemplate as template } from "@microsoft/fast-foundation";
import { DialogStyles as styles } from "./dialog.styles";
@customElement({
name: "fast-dialog",
template,
styles,
})
export class FASTDialog extends Dialog {}