Clipboard required alpineJS
Copy to clipboard
@!jrmc.clipboard({ text: 'Copy to Clipboard', value: 'copied 1' })<div x-data="{
clipboardText: 'copied 1',
clipboardNotification: false,
copyToClipboard() {
navigator.clipboard.writeText(this.clipboardText);
this.clipboardNotification = true;
let that = this;
setTimeout(() => {
this.clipboardNotification = false;
}, 3000);
}
}">
<button value="copied 1" type="button" @click="copyToClipboard();" class="btn gap-2">
Copy to Clipboard <template x-if="!clipboardNotification">
Copy to Clipboard
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </template>
<template x-if="clipboardNotification">
Copy to Clipboard
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M22 11.1V6.9C22 3.4 20.6 2 17.1 2H12.9C9.4 2 8 3.4 8 6.9V8H11.1C14.6 8 16 9.4 16 12.9V16H17.1C20.6 16 22 14.6 22 11.1Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 17.1V12.9C16 9.4 14.6 8 11.1 8H6.9C3.4 8 2 9.4 2 12.9V17.1C2 20.6 3.4 22 6.9 22H11.1C14.6 22 16 20.6 16 17.1Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.08008 15L8.03008 16.95L11.9201 13.05" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
</button>
</div>Copy to clipboard - simple icon
@!jrmc.clipboard({ class: 'btn-circle btn-secondary', value: 'copied 2' })<div x-data="{
clipboardText: 'copied 2',
clipboardNotification: false,
copyToClipboard() {
navigator.clipboard.writeText(this.clipboardText);
this.clipboardNotification = true;
let that = this;
setTimeout(() => {
this.clipboardNotification = false;
}, 3000);
}
}">
<button value="copied 2" type="button" @click="copyToClipboard();" class="btn gap-2 btn-circle btn-secondary">
<template x-if="!clipboardNotification">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </template>
<template x-if="clipboardNotification">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M22 11.1V6.9C22 3.4 20.6 2 17.1 2H12.9C9.4 2 8 3.4 8 6.9V8H11.1C14.6 8 16 9.4 16 12.9V16H17.1C20.6 16 22 14.6 22 11.1Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 17.1V12.9C16 9.4 14.6 8 11.1 8H6.9C3.4 8 2 9.4 2 12.9V17.1C2 20.6 3.4 22 6.9 22H11.1C14.6 22 16 20.6 16 17.1Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.08008 15L8.03008 16.95L11.9201 13.05" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
</button>
</div>Copy to clipboard - custom
@jrmc.clipboard({ value: 'ok4' })
@slot('copy')
<span class="inline-flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
Copy to Clipboard
</span>
@end
@slot('copied')
<span class="inline-flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M4 12.6111L8.92308 17.5L20 6.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Copied to Clipboard
</span>
@end
@end
<div x-data="{
clipboardText: 'ok4',
clipboardNotification: false,
copyToClipboard() {
navigator.clipboard.writeText(this.clipboardText);
this.clipboardNotification = true;
let that = this;
setTimeout(() => {
this.clipboardNotification = false;
}, 3000);
}
}">
<button value="ok4" type="button" @click="copyToClipboard();" class="btn gap-2">
<template x-if="!clipboardNotification"> <span class="inline-flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
Copy to Clipboard
</span> </template>
<template x-if="clipboardNotification"> <span class="inline-flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M4 12.6111L8.92308 17.5L20 6.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Copied to Clipboard
</span>
</template>
</button>
</div>
