Dialog

Displays modal dialog content using the native <dialog> element.

Open and close are controlled with command, commandfor, and id, without JavaScript. DialogContent always outputs closedby="any" by default.

Usage


<div data-unitone-layout="dialog">
	<div data-unitone-layout="dialog-trigger">
		<button command="show-modal" commandfor="dialog-example-content">
			Open dialog
		</button>
	</div>
	<dialog
		id="dialog-example-content"
		data-unitone-layout="dialog-content"
		closedby="any"
	>
		<div data-unitone-layout="decorator -gap:1 -padding:1s" style="--unitone--background--color: var(--unitone--color--background)">
			<p>The content of the Dialog.</p>
			<div>
				<button command="request-close" commandfor="dialog-example-content">
					Close
				</button>
			</div>
		</div>
	</dialog>
</div>

Props

`DialogTrigger`

Use any wrapper element you want, and place a clickable element with command="show-modal" and commandfor="{id}" inside it.

`DialogContent`

Renders a native <dialog> element.

id is required for commandfor.
closedby="any" is set by default.
Place a clickable element with command="request-close" and commandfor="{id}" inside it when you want an explicit close button.