breakpoint

Source

<drab-breakpoint class="mb-4 block">
    <div data-content class="card inline-block px-3 py-2 font-mono text-sm">
        Loading
    </div>
</drab-breakpoint>

<drab-breakpoint breakpoint-custom="400" breakpoint-custom-2="700">
    <div data-content class="card inline-block px-3 py-2 font-mono text-sm">
        Loading
    </div>
</drab-breakpoint>

Overview

Displays the current breakpoint and window.innerWidth, based on the breakpoints provided. Defaults to TailwindCSS breakpoint sizes.

Provide alternate breakpoints by specifying breakpoint attributes:

<drab-breakpoint breakpoint-name="400"></drab-breakpoint>

Constructors

new Breakpoint()

new Breakpoint(): Breakpoint

Properties

#listenerController

private #listenerController: AbortController

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

Inherited from

Base.#listenerController

Source

src/package/base/index.ts:17

breakpoints

breakpoints: Breakpoints

Source

src/package/breakpoint/index.ts:19

Accessors

breakpoint

get breakpoint(): string

finds the current breakpoint

Returns

string

Source

src/package/breakpoint/index.ts:51

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

Methods

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Base.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

Base.destroy

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

Source

src/package/base/index.ts:167

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.