Overview
initClipboard initializes clipboard copy functionality on buttons with a
data-clipboard-target attribute. After copying, the button icon changes to a checkmark
for a configurable duration before reverting.
Signature
initClipboard(context: string | HTMLElement, delay?: number): void
| Parameter | Type | Default | Description |
|---|---|---|---|
context |
string | HTMLElement |
- | Button element with data-clipboard-target attribute, or a context element containing such buttons. |
delay |
number |
3000 |
Duration (ms) to show the checkmark icon before reverting. |
Example
Click the copy button next to the input. The icon changes to a checkmark for 3 seconds.
<div id="copySection">
<div class="input-group">
<input id="emailField" type="text" class="form-control form-control-solid" value="name@example.com" readonly>
<button class="btn btn-icon btn-light" data-clipboard-target="#emailField">
<i class="ki-duotone ki-copy fs-2"><span class="path1"></span><span class="path2"></span></i>
</button>
</div>
</div>
import {initializers} from 'metronic-extension';
const {initClipboard} = initializers;
// Initialize all clipboard buttons within the container
initClipboard('#copySection');
// Or initialize a single button with custom delay (5 seconds)
initClipboard('#copyBtn', 5000);