GDialog

A dialog component that uses <dialog> under the hood.

Demo

Basic Usage

Closedby

You can limit how the user closes the dialog with closedby.

• none: requires manual closing via button or JavaScript
• close-request: (default) pressing escape, pressing "back" on mobile, clicking a button with the request-close command
• any: this is basically close-request+ because allows clicking outside the dialog to close it

API

Props

Name	Type	Default	Required	Description
closedby	"close-request" | "none" | "any" | undefined	"close-request"	No	- none: requires manual closing via button or JavaScript - close-request: pressing escape, pressing "back" on mobile, clicking a button with the request-close command - any: close-request+ allows clicking outside the dialog to close it https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
open	boolean | undefined	false	No

Slots

Name	Type	Description
activator	{ binding: { commandfor: any; command: string; }; }
default	{ cancelBinding: { commandfor: any; command: string; type: "button"; }; }

Events

Name	Type	Description
update:open	[value: boolean]
cancel	[event: Event]
close	[event: Event]

Exposed

Name	Type	Description
close	() => void | undefined
id	any