Installation
Clipboard behavior is provided by KtUI’s native
KTClipboard
component (shipped with Metronic via KtUI).
Require Assets
To use native clipboard behavior, include KtUI assets (as shown below).
Clipboard.js is not required
.
<!DOCTYPE html>
<html>
<head>
<!--Core styles-->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<h1>
Hello world!
</h1>
<!--Core bundle script-->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!--KtUI vendor script -->
<script src="/dist/assets/vendors/ktui/ktui.min.js">
</script>
<!--Custom script -->
<script src="/dist/assets/pages/plugins/clipboard/default.js">
</script>
</body>
</html>
Copy Value
Click the copy button to copy the input value below.
class KTExampleClipboardCopyValue {
static init() {
const button = document.getElementById('clipboard_1_button');
const icon = button.querySelector('i');
button.addEventListener('kt.clipboard.success', () => {
// Exit label update when already in progress
if (icon.classList.contains('ki-copy-success')) {
return;
}
// Update button label
icon.classList.add('ki-copy-success');
icon.classList.add('!text-success');
icon.classList.remove('ki-copy');
// Revert button label after 3 seconds
setTimeout(() => {
icon.classList.remove('ki-copy-success');
icon.classList.remove('!text-success');
icon.classList.add('ki-copy');
}, 3000);
});
}
}
KTDom.ready(() => {
KTExampleClipboardCopyValue.init();
});
<div class="kt-input">
<input id="clipboard_1_target" placeholder="Copy to clipboard" type="text" value="hwewe4654fdd5sdfh"/>
<button class="kt-btn kt-btn-icon" data-kt-clipboard="true" data-kt-clipboard-target="#clipboard_1_target" id="clipboard_1_button">
<i class="ki-outline ki-copy">
</i>
</button>
</div>
Cut Value
Apply
data-kt-clipboard-action="cut"
attribute to cut
the input value below.
class KTExampleClipboardCutValue {
static init() {
const button = document.getElementById('clipboard_2_button');
const icon = button.querySelector('i');
button.addEventListener('kt.clipboard.success', () => {
// Exit label update when already in progress
if (icon.classList.contains('ki-copy-success')) {
return;
}
// Update button label
icon.classList.remove('ki-copy');
icon.classList.add('ki-copy-success');
icon.classList.add('text-success');
// Revert button label after 3 seconds
setTimeout(() => {
icon.classList.remove('ki-copy-success');
icon.classList.add('ki-copy');
icon.classList.remove('text-success');
}, 3000);
});
}
}
KTDom.ready(() => {
KTExampleClipboardCutValue.init();
});
<div class="kt-input">
<input id="clipboard_2_target" placeholder="Copy to clipboard" type="text" value="hwewe4654fdd5sdfh"/>
<button class="kt-btn kt-btn-icon kt-btn-ghost kt-btn-sm -me-2" data-kt-clipboard="true" data-kt-clipboard-action="cut" data-kt-clipboard-target="#clipboard_2_target" id="clipboard_2_button">
<i class="ki-outline ki-copy">
</i>
</button>
</div>
Predefined Value
Add the
data-kt-clipboard-text
attribute to the action button
below and it will copy the value set on click.
class KTExampleClipboardPredefinedValue {
static init() {
// Select element
const target = document.getElementById('clipboard_3_target');
target.addEventListener('kt.clipboard.success', () => {
const currentLabel = target.innerHTML;
// Exit label update when already in progress
if (target.innerHTML === 'Copied!') {
return;
}
// Update button label
target.innerHTML = 'Copied!';
// Revert button label after 3 seconds
setTimeout(() => {
target.innerHTML = currentLabel;
}, 3000);
});
}
}
KTDom.ready(() => {
KTExampleClipboardPredefinedValue.init();
});
<button class="kt-btn kt-btn-primary" data-kt-clipboard="true" data-kt-clipboard-text="Just because you can doesn't mean you should — clipboard.js" id="clipboard_3_target">
Copy to clipboard
</button>
Copy Text
Add the attribute
data-kt-clipboard-target
to an action button with the static element's id to get it working.
This is a sample static text string to copy!
class KTExampleClipboardCopyText {
static init() {
// Select elements
const target = document.getElementById('clipboard_4_target');
const button = document.getElementById('clipboard_4_button');
const icon = button.querySelector('i');
button.addEventListener('kt.clipboard.success', () => {
// Exit label update when already in progress
if (icon.classList.contains('ki-copy-success')) {
return;
}
// Update button label
icon.classList.remove('ki-copy');
icon.classList.add('ki-copy-success');
target.classList.add('text-success');
// Revert button label after 3 seconds
setTimeout(() => {
icon.classList.remove('ki-copy-success');
icon.classList.add('ki-copy');
target.classList.remove('text-success');
}, 3000);
});
}
}
KTDom.ready(() => {
KTExampleClipboardCopyText.init();
});
<div class="flex flex-col items-center justify-center gap-5">
<div class="font-semibold text-md rounded-lg border border-input border-dashed p-6" id="clipboard_4_target">
This is a sample static text string to copy!
</div>
<button class="kt-btn kt-btn-icon kt-btn-primary" data-kt-clipboard="true" data-kt-clipboard-target="#clipboard_4_target" id="clipboard_4_button">
<i class="ki-outline ki-copy">
</i>
</button>
</div>
