dialog

import "drab/dialog/define";

html

<div class="grid gap-4">
	<drab-dialog click-outside-close>
		<button data-trigger type="button">Right</button>
		<dialog
			data-content
			class="bg-background backdrop:bg-muted/75 my-0 mr-0 ml-auto h-full max-h-screen w-full max-w-screen border-l p-6 backdrop:backdrop-blur sm:max-w-96"
		>
			<div class="mb-4 flex items-center justify-between">
				<h2 class="my-0">Dialog</h2>
				<button data-trigger class="ghost icon" aria-label="Close">
					<span class="icon-[lucide--x]"></span>
				</button>
			</div>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
				velit esse cillum dolore eu fugiat nulla pariatur.
			</p>
		</dialog>
	</drab-dialog>

	<drab-dialog remove-body-scroll>
		<button data-trigger type="button">Center</button>
		<dialog
			data-content
			class="bg-background backdrop:bg-muted/75 m-auto rounded-md border p-6 opacity-0 transition-[display,opacity] transition-discrete duration-500 backdrop:opacity-0 backdrop:backdrop-blur-lg backdrop:transition-[display,opacity] backdrop:transition-discrete backdrop:duration-500 open:opacity-100 open:backdrop:opacity-100 sm:max-w-96 starting:open:opacity-0 starting:open:backdrop:opacity-0"
		>
			<div class="mb-4 flex items-center justify-between">
				<h2 class="my-0">Dialog</h2>
				<button data-trigger class="ghost icon" aria-label="Close">
					<span class="icon-[lucide--x]"></span>
				</button>
			</div>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
				velit esse cillum dolore eu fugiat nulla pariatur.
			</p>
		</dialog>
	</drab-dialog>

	<drab-dialog remove-body-scroll click-outside-close>
		<button data-trigger type="button">Cover</button>
		<dialog
			data-content
			class="bg-muted/75 h-full min-h-full w-full min-w-full p-6 backdrop-blur-lg"
		>
			<article class="bg-background h-full w-full rounded border p-6">
				<div class="mb-4 flex items-center justify-between">
					<h2 class="my-0">Dialog</h2>
					<button data-trigger class="ghost icon" aria-label="Close">
						<span class="icon-[lucide--x]"></span>
					</button>
				</div>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
					eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
					minim veniam, quis nostrud exercitation ullamco laboris nisi ut
					aliquip ex ea commodo consequat. Duis aute irure dolor in
					reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
					pariatur.
				</p>
			</article>
		</dialog>
	</drab-dialog>
</div>

Overview

Defined in: dialog/index.ts:36

Provides triggers for the HTMLDialogElement.

Attributes

click-outside-close

By default, the HTMLDialogElement doesn’t close if the user clicks outside of it. Add a click-outside-close attribute to close when the user clicks outside.

If the dialog covers the full viewport and this attribute is present, the first child of the dialog will be assumed to be the content of the dialog and the dialog will close if there is a click outside of the first child element.

remove-body-scroll

Add the remove-body-scroll attribute to remove the scroll from document.body when the dialog is open.

Constructors

Constructor

new Dialog(): Dialog