dialog
<div class="mb-4">
<drab-dialog
click-outside-close
animation-keyframe-from-transform="translateX(100%)"
animation-keyframe-to-transform="translateX(0)"
>
<button data-trigger type="button" class="button button-primary">
Right
</button>
<dialog
data-content
class="card my-0 mr-0 h-full max-h-dvh w-full max-w-[100vw] rounded-none border-none 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
type="button"
class="button button-ghost"
title="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
fill-rule="evenodd"
d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
clip-rule="evenodd"
/>
</svg>
</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>
</div>
<drab-dialog
remove-body-scroll
animation-keyframe-from-transform="scale(.95) translateY(3%)"
animation-keyframe-from-opacity="0"
animation-keyframe-to-transform="scale(1) translateY(0)"
animation-keyframe-to-opacity="1"
>
<button data-trigger type="button" class="button button-primary">
Center
</button>
<dialog data-content class="card 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
type="button"
class="button button-ghost"
title="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
fill-rule="evenodd"
d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
clip-rule="evenodd"
/>
</svg>
</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>
Overview
Provides triggers and animations for the HTMLDialogElement.
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.
remove-body-scroll
Add the remove-body-scroll attribute to remove the scroll from document.body when the dialog is open.
Hierarchy
↳
Dialog
Constructors
constructor
• new Dialog(): Dialog
Returns
Overrides
Defined in
src/package/dialog/index.ts:22
Properties
#listenerController
• Private #listenerController: AbortController
To clean up event listeners added to document when the element is removed.
Inherited from
Defined in
Accessors
#removeBodyScroll
• get #removeBodyScroll(): boolean
Remove scroll from the body when open with the remove-body-scroll attribute.
Returns
boolean
Defined in
src/package/dialog/index.ts:32
animationOptions
• get animationOptions(): KeyframeAnimationOptions
Returns
KeyframeAnimationOptions
An object containing the values of each animation-option attribute
Inherited from
Animate.animationOptions
Defined in
src/package/animate/index.ts:46
dialog
• get dialog(): HTMLDialogElement
The HTMLDialogElement within the element.
Returns
HTMLDialogElement
Defined in
src/package/dialog/index.ts:27
event
• get event(): keyof HTMLElementEventMap
Event for the trigger to execute.
For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.
Returns
keyof HTMLElementEventMap
Default
"click";
Inherited from
Animate.event
Defined in
• set event(value): void
Parameters
| Name | Type |
|---|---|
value | keyof HTMLElementEventMap |
Returns
void
Inherited from
Animate.event
Defined in
keyframes
• get keyframes(): Keyframe[]
Returns
Keyframe[]
Inherited from
Animate.keyframes
Defined in
src/package/animate/index.ts:128
Methods
animateElement
▸ animateElement(animateOptions?): Promise<void>
Parameters
| Name | Type | Description |
|---|---|---|
animateOptions | Object | animates this.content() by default |
animateOptions.element? | HTMLElement | - |
animateOptions.options? | KeyframeAnimationOptions | - |
Returns
Promise<void>
Description
Animates a particular element using the web animations API.
- Disables animation if the user prefers reduced motion.
- Sets default options
- Uses the keyframes provided from
this.keyframes - Waits for the animation to complete
- Sets the start and end styles based on the first and last keyframe
Inherited from
Defined in
src/package/animate/index.ts:76
close
▸ close(): Promise<void>
HTMLDialogElement.close() with animation.
Returns
Promise<void>
Defined in
src/package/dialog/index.ts:48
connectedCallback
▸ connectedCallback(): void
Returns
void
Inherited from
Defined in
destroy
▸ destroy(): void
Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.
Returns
void
Inherited from
Defined in
disconnectedCallback
▸ disconnectedCallback(): void
Returns
void
Inherited from
Defined in
getContent
▸ getContent<T>(instance?): T
Type parameters
| Name | Type |
|---|---|
T | extends HTMLElement = HTMLElement |
Parameters
| Name | Type | Description |
|---|---|---|
instance | () => T | The instance of the desired element, ex: HTMLDialogElement. Defaults to HTMLElement. |
Returns
T
The element that matches the content selector.
Default
this.querySelector("[data-content]");
Inherited from
Defined in
getTrigger
▸ getTrigger<T>(): NodeListOf<T>
Type parameters
| Name | Type |
|---|---|
T | extends HTMLElement = HTMLElement |
Returns
NodeListOf<T>
All of the elements that match the trigger selector.
Default
this.querySelectorAll("[data-trigger]");
Inherited from
Defined in
mount
▸ mount(): void
Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.
The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.
Returns
void
Overrides
Defined in
src/package/dialog/index.ts:68
safeListener
▸ safeListener<K, T>(type, listener, element?, options?): void
Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.
Type parameters
| Name | Type |
|---|---|
K | extends keyof DocumentEventMap |
T | extends Window | Document | HTMLElement = HTMLElement |
Parameters
| Name | Type |
|---|---|
type | K |
listener | (this: T, ev: DocumentEventMap[K]) => any |
element | T |
options | AddEventListenerOptions |
Returns
void
Inherited from
Defined in
show
▸ show(): Promise<void>
HTMLDialogElement.showModal() with animation.
Returns
Promise<void>
Defined in
src/package/dialog/index.ts:37
swapContent
▸ swapContent(revert?, delay?): void
Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
revert | boolean | true | Swap back to old content |
delay | number | 800 | Wait time before swapping back |
Returns
void
Inherited from
Defined in
toggle
▸ toggle(): Promise<void>
show or close depending on the dialog’s open attribute.
Returns
Promise<void>
Defined in
src/package/dialog/index.ts:63
triggerListener
▸ triggerListener<T, K>(listener, type?, options?): void
Type parameters
| Name | Type |
|---|---|
T | extends HTMLElement |
K | extends keyof HTMLElementEventMap |
Parameters
| Name | Type | Description |
|---|---|---|
listener | (this: T, e: HTMLElementEventMap[K]) => any | Listener to attach to all of the trigger elements. |
type | K | - |
options? | AddEventListenerOptions | - |
Returns
void