@fluid-topics/ft-dialog

A dialog component for all UI usage.

Install

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

Usage

import { html } from "lit"
import "@fluid-topics/ft-button"
import "@fluid-topics/ft-dialog"

function render() {
    return html`
        <ft-button @click=${ () => document.querySelector<FtDialog>("ft-dialog")?.open() }> Open dialog </ft-button>
        <ft-dialog
            heading="Dialog Title"
            closeOnEsc
            closeOnClickOutside
            @opened-changed=${ (e: CustomEvent<{ opened: boolean }>) => console.log("opened changed ", e.detail) }
        >
            Dialog Content
        </ft-dialog>
    `
}