Clipboard

Clipboard component.

# Basic Usage

<x-clipboard text="TallStackUI" />
 
<!-- Or -->
 
<x-clipboard>
    TallStackUI
</x-clipboard>

# Button at Left

<x-clipboard text="TallStackUI" left />

# Label & Hint

Library

Copy the name of the library

<x-clipboard label="Library" hint="Click to copy the library name" text="TallStackUI" />

# Secret Content

An option to transform the input in a password type.

Library

Copy the name of the library

<x-clipboard text="TallStackUI" secret />

# Events

<x-clipboard x-on:copy="alert(`Copied: ${$event.detail.text}`)">
    TallStackUi
</x-clipboard>

Event	Detail	Fired when
`copy`	`{ text }`	The text is copied

# Icon Style

<x-clipboard text="TallStackUI" icon />
 
<!-- Or -->
 
<x-clipboard icon>
    TallStackUI
</x-clipboard>

The icon style does not support label and hint.

# Using Different Icons

<x-clipboard text="TallStackUI"
             icon
             :icons="['copy' => 'pencil', 'copied' => 'check']"/>
 
<!-- or -->
 
<x-clipboard ... :icon="['copy' => 'pencil', 'copied' => 'check']"/>

# Copying Programmatically

An option to copy text using a JavaScript API.

<x-button x-on:click="$tsui.copy('TallStackUI')">
    Copy
</x-button>

// $tsui.copy resolves to a boolean reporting whether the copy succeeded.
const copied = await $tsui.copy('TallStackUI');
 
// It also dispatches the `ts-ui:copy` event on window with the copied text.
window.addEventListener('ts-ui:copy', (event) => {
    alert(`Copied: ${event.detail.text}`); // 'Copied: TallStackUI'
});

Both paths require a user gesture

Clipboard content is written with navigator.clipboard.writeText() . In insecure contexts, the component uses execCommand instead. Common examples include http://myapp.test and local IP addresses opened from another device. The write must happen during a user interaction and cannot run from a timer or after an API response.