drab - share

import "drab/share/define";

<drab-share value="https://drab.robino.dev">
	<button data-trigger type="button" class="gap-1.5">
		Share
		<span data-content>
			<!-- up-arrow-on-square -->
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
				class="size-5"
			>
				<path
					fill-rule="evenodd"
					d="M13.75 7h-3V3.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L6.2 4.74a.75.75 0 0 0 1.1 1.02l1.95-2.1V7h-3A2.25 2.25 0 0 0 4 9.25v7.5A2.25 2.25 0 0 0 6.25 19h7.5A2.25 2.25 0 0 0 16 16.75v-7.5A2.25 2.25 0 0 0 13.75 7Zm-3 0h-1.5v5.25a.75.75 0 0 0 1.5 0V7Z"
					clip-rule="evenodd"
				/>
			</svg>
		</span>
		<template data-swap>
			<!-- clipboard-document-check -->
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
				class="size-5"
			>
				<path
					fill-rule="evenodd"
					d="M18 5.25a2.25 2.25 0 0 0-2.012-2.238A2.25 2.25 0 0 0 13.75 1h-1.5a2.25 2.25 0 0 0-2.238 2.012c-.875.092-1.6.686-1.884 1.488H11A2.5 2.5 0 0 1 13.5 7v7h2.25A2.25 2.25 0 0 0 18 11.75v-6.5ZM12.25 2.5a.75.75 0 0 0-.75.75v.25h3v-.25a.75.75 0 0 0-.75-.75h-1.5Z"
					clip-rule="evenodd"
				/>
				<path
					fill-rule="evenodd"
					d="M3 6a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm6.874 4.166a.75.75 0 1 0-1.248-.832l-2.493 3.739-.853-.853a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.154-.114l3-4.5Z"
					clip-rule="evenodd"
				/>
			</svg>
		</template>
	</button>
</drab-share>

Overview

Defined in: share/index.ts:8

Uses the Navigator API to share a url. If share is not supported, falls back to copy the text instead.

Constructors

new Share(): Share

Defined in: share/index.ts:9

Accessors

event

Set Signature

set event(value): void

Defined in: base/index.ts:46

value

Set Signature

set value(value): void

Defined in: base/copy/index.ts:19

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

copy()

copy(text): Promise<void>

Defined in: base/copy/index.ts:27

Copies the text.

destroy()

destroy(): void

Defined in: base/index.ts:178

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

mount()

mount(): void

Defined in: share/index.ts:34

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.