Copy to Clipboard
Dokumentasi Clipboard.jsHow to use
Sisipkan script berikut, sebelum tag penutup </body>, agar bisa digunakan.
<script>
(function() {
// INITIALIZATION OF CLIPBOARD
// =======================================================
Nue.components.NueClipboard.init('.js-clipboard')
});
</script>
<!-- Input Group -->
<div class="input-group input-group-merge">
<input type="text" id="tooltipExample" class="form-control" value="I am a tooltip example">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard!"
data-nue-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#tooltipExample"
}'>
<i class="bi-clipboard"></i>
</a>
</div>
<!-- End Input Group -->
Change icons
<!-- Input Group -->
<div class="input-group input-group-merge">
<input type="text" id="iconExample" class="form-control" value="I am an icon example">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;"
data-nue-clipboard-options='{
"contentTarget": "#iconExample",
"classChangeTarget": "#iconExampleLinkIcon",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="iconExampleLinkIcon" class="bi-clipboard"></i>
</a>
</div>
<!-- End Input Group -->
Cut to clipboard
Tambahkan action="cut"
<div class="mb-4">
<textarea id="cutExample" class="form-control">Cut text example in textarea.</textarea>
</div>
<button class="js-clipboard btn btn-primary" data-bs-toggle="tooltip" title="Copy to clipboard!"
data-nue-clipboard-options='{
"action": "cut",
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#cutExample"
}'>
Cut to clipboard
</button>
Modal example
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Open modal
</button>
<!-- End Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Copy to Clipboard</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Input Group -->
<div class="input-group input-group-merge">
<input type="text" id="modalExample" class="form-control" value="I am a modal example">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard!"
data-nue-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#modalExample",
"container": "#exampleModal"
}'>
<i class="bi-clipboard"></i>
</a>
</div>
<!-- End Input Group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
type | Callback type. | null |
contentTarget | Content. | null |
classChangeTarget | Class to be changed. | null |
defaultClass | Default class for change target. | null |
successText | Add text when copy to clipboard is success. | null |
successClass | Add class when copy to clipboard is success. | null |
originalTitle | Default title for tooltip. | null |