v2.1.0

Components
Clipboard

Third-Party Plugins

Tailwind CSS Clipboard

Clipboard components are tools designed to facilitate the copying and pasting of data within an application. They ensure seamless data transfer and storage, enhancing user efficiency and interaction.

Requires JS

Note that this component requires the use of the third-party Clipboard plugin.

How to use

Install Clipboard

Install clipboard via npm
```
npm i clipboard
```
Add the Clipboard JavaScript

Include the JavaScript <script> near the end of your </body> tag:
```
<script src="./node_modules/clipboard/dist/clipboard.min.js"></script>
```
Add the Clipboard JavaScript

Include the JavaScript <script> near the end of your </body> tag:
<script> // INITIALIZATION OF CLIPBOARD // ======================================================= (function() { window.addEventListener('load', () => { const $clipboards = document.querySelectorAll('.js-clipboard-example'); $clipboards.forEach((el) => { const isToggleTooltip = HSStaticMethods.getClassProperty(el, '--is-toggle-tooltip') === 'false' ? false : true; const clipboard = new ClipboardJS(el, { text: (trigger) => { const clipboardText = trigger.dataset.clipboardText; if (clipboardText) return clipboardText; const clipboardTarget = trigger.dataset.clipboardTarget; const $element = document.querySelector(clipboardTarget); if ( $element.tagName === 'SELECT' || $element.tagName === 'INPUT' || $element.tagName === 'TEXTAREA' ) return $element.value else return $element.textContent; } }); clipboard.on('success', () => { const $default = el.querySelector('.js-clipboard-default'); const $success = el.querySelector('.js-clipboard-success'); const $successText = el.querySelector('.js-clipboard-success-text'); const successText = el.dataset.clipboardSuccessText || ''; const tooltip = el.closest('.hs-tooltip'); const $tooltip = HSTooltip.getInstance(tooltip, true); let oldSuccessText; if ($successText) { oldSuccessText = $successText.textContent $successText.textContent = successText } if ($default && $success) { $default.style.display = 'none' $success.style.display = 'block' } if (tooltip && isToggleTooltip) HSTooltip.show(tooltip); if (tooltip && !isToggleTooltip) $tooltip.element.popperInstance.update(); setTimeout(function () { if ($successText && oldSuccessText) $successText.textContent = oldSuccessText; if (tooltip && isToggleTooltip) HSTooltip.hide(tooltip); if (tooltip && !isToggleTooltip) $tooltip.element.popperInstance.update(); if ($default && $success) { $success.style.display = ''; $default.style.display = ''; } }, 800); }); }); }) })() </script>
```
                    
                  
```

Basic usage

Basic usage of Clipboard with text.

npm install preline

Copy from Input

Copy input text to clipboard.

Tooltip example that shows the success message only.

Tooltip example how to change the text.

Modal example of Clipboard.