@gluonjs/quarks / packages/quarks/src / Dialog

Function: Dialog()

Dialog(__namedParameters): TemplateResult

Parameters

__namedParameters

DialogProps

Returns

TemplateResult

Example

Render an accessible labeled dialog with a typed close-button reference and an Escape/dismiss handler:

import { html } from '@gluonjs/core';
import { Dialog, quark, type QuarkFactory, type QuarkRef } from '@gluonjs/quarks';

const Button: QuarkFactory<'button', HTMLButtonElement> = quark('button');
const closeButton: QuarkRef<HTMLButtonElement> = { value: undefined };

const dialog = Dialog({
  label: 'Shopping bag',
  children: html`${Button({ ref: closeButton, children: 'Close' })}` ,
  onDismiss: () => console.log('Bag dismissed'),
});
console.log(dialog, closeButton.value);