1. Plugins
  2. Copy Markup

Plugins

Tailwind CSS Copy Markup

Copy input, select or other markups.

Copy Markup

Installation

To get started, install Copy Markup plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/copy-markup

Example

Add input fields.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <div id="hs-wrapper-for-copy">
                          <input id="hs-content-for-copy" type="text" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm text-gray-800 focus:z-10 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500" placeholder="Enter Name">
                        </div>

                        <button type="button" data-hs-copy-markup='{
                            "targetSelector": "#hs-content-for-copy",
                            "wrapperSelector": "#hs-wrapper-for-copy",
                            "limit": 3
                          }' id="hs-copy-content">
                          Add Name
                        </button>

Data Options

Name Description Options Default value
data-hs-copy-markup Activate a Copy Markup by specifying on an element. Should be added to the button (trigger). — —
:targetSelector Specifies the target element to copy. The value must be a valid selector. string —
:wrapperSelector Specifies which element should be used for copying. The value must be a valid selector. string —
:limit Specifies how many items you can copy until the button is disabled. number null

Methods

The HSCopyMarkup object is contained within the global window object

Method Description
Public methods
delete(target) Remove the element associated to the target.
  • target should be a Node
Static methods
HSCopyMarkup.getInstance(target, isInstance) Returns the element associated to the target.
  • target should be a Node or string (valid selector)
  • isInstance boolean. Returns the instance instead of Node if true

Open item (public method).

                      
                        const copyMarkup = new HSCopyMarkup(document.querySelector('#copy-markup'));
                        const deleteBtn = document.querySelector('#delete-btn');

                        deleteBtn.addEventListener('click', () => {
                          copyMarkup.delete(document.querySelector('#copy-markup-item-1'));
                        });

Open item (mixed).

                      
                        const { element } = HSCopyMarkup.getInstance('#copy-markup', true);
                        const deleteBtn = document.querySelector('#delete-btn');

                        deleteBtn.addEventListener('click', () => {
                          element.delete(document.querySelector('#copy-markup-item-1'));
                        });

Events

Method Description Returned value
on:copy Called when target element was copied. Copied element
on:delete Called when target element was deleted. Deleted element

Call any function on copy example.

                      
                        const el = HSCopyMarkup.getInstance('#copy-markup');

                        el.on('copy', (copiedElement) => {...});

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Plugins UI Mockups
Check out Preline UI Components