@fluid-topics/ft-dialog

A dialog component.

Install

npm install @fluid-topics/ft-dialog
yarn add @fluid-topics/ft-dialog

Usage

import { html } from "lit"
import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
import "@fluid-topics/ft-button"
import "@fluid-topics/ft-dialog"

@customElement("my-element")
class MyElement extends FtLitElement {

    @state()
    private dialogOpen = false

    render() {
        return html`
            <ft-button @click=${ () => this.dialogOpen = true }>Open dialog</ft-button>
            <ft-dialog
                ?opened=${ this.dialogOpen }
                heading="Dialog Title"
                icon="info"
                closeOnEsc
                closeOnClickOutside
                @opened-changed=${ (e: CustomEvent<{ opened: boolean }>) => this.dialogOpen = e.detail.opened }>
                Dialog Content
            </ft-dialog>
        `
    }
}