popover

Source

<drab-popover
    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
        popovertarget="popover"
        type="button"
        class="button button-primary"
    >
        Show
    </button>
    <div data-content id="popover" popover class="card sm:max-w-96">
        <div class="mb-4 flex items-center justify-between">
            <h3 class="my-0">Popover</h3>
            <button
                data-trigger
                popovertarget="popover"
                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>This works without JavaScript.</p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
</drab-popover>

Overview

Provides animations for the Popover API.

This component can be deprecated once it can be animated with CSS only, currently only available in Chrome.

Constructors

new Popover(): Popover

Properties

#listenerController

private #listenerController: AbortController

To clean up event listeners added to document when the element is removed.

Inherited from

Animate.#listenerController

Source

src/package/base/index.ts:17

Accessors

animationOptions

get animationOptions(): KeyframeAnimationOptions

Returns

KeyframeAnimationOptions

An object containing the values of each animation-option attribute

Source

src/package/animate/index.ts:46

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.

Default

"click";

set event(value): void

Parameters

• value: keyof HTMLElementEventMap

Returns

keyof HTMLElementEventMap

Source

src/package/base/index.ts:30

keyframes

get keyframes(): Keyframe[]

Returns

Keyframe[]

Source

src/package/animate/index.ts:128

open

get open(): boolean

Whether the popover is open or closed. This doesn’t get set automatically on the element like with the HTMLDialogElement.

set open(value): void

Parameters

• value: boolean

Returns

boolean

Source

src/package/popover/index.ts:21

Methods

animateElement()

animateElement(animateOptions): Promise<void>

Parameters

• animateOptions= undefined

animates this.content() by default

• animateOptions.element?: HTMLElement

• animateOptions.options?: KeyframeAnimationOptions

Returns

Promise<void>

Inherited from

Animate.animateElement

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

Source

src/package/animate/index.ts:76

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Animate.connectedCallback

Source

src/package/base/index.ts:155

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

Animate.destroy

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Animate.disconnectedCallback

Source

src/package/base/index.ts:167

hide()

hide(): Promise<void>

HTMLElement.hidePopover() with animation.

Returns

Promise<void>

Source

src/package/popover/index.ts:41

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.