Тайлбар байхгүй

Ryan Chandler b445807d5c chore: docs		4 жил өмнө
.github	9dadd11a40 chore: workflows for npm	4 жил өмнө
dist	95260b41a3 chore: examples	4 жил өмнө
examples	95260b41a3 chore: examples	4 жил өмнө
src	95260b41a3 chore: examples	4 жил өмнө
tests	04f744f95c fix(rename AlpinePlugin to AlpineClipboard)	4 жил өмнө
.gitignore	fa5989466c init	4 жил өмнө
LICENSE.md	fa5989466c init	4 жил өмнө
README.md	b445807d5c chore: docs	4 жил өмнө
jest.config.js	fa5989466c init	4 жил өмнө
package-lock.json	66de1e84c5 1.0.0	4 жил өмнө
package.json	66de1e84c5 1.0.0	4 жил өмнө
rollup.config.js	95260b41a3 chore: examples	4 жил өмнө
rollup.ie11.config.js	2d2b70b67a feature: modern bundle	4 жил өмнө

✨ Help support the maintenance of this package by sponsoring me.

Alpine Clipboard

Copy text to the user's clipboard.

Since v2.0, this package only supports Alpine v3.x. If you're still using Alpine 2.x, please use v1.0 of this package.

About

This plugin adds a new $clipboard magic property to all of your Alpine components that can be used to copy any piece of data to the user's clipboard.

Installation

CDN

Include the following <script> tag at the end of your <body>:

<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-clipboard@1.x.x/dist/alpine-clipboard.js"></script>

NPM

npm install @ryangjchandler/alpine-clipboard

Add the $clipboard magic property to your project by importing the package before Alpine.js.

import "@ryangjchandler/alpine-clipboard"
// import "alpinejs"

Legacy Browser Support

If you need to support legacy browsers, you can import the alpine-clipboard.ie11.js file instead.

CDN

<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-clipboard@1.x.x/dist/alpine-clipboard.ie11.js"></script>

NPM

import "@ryangjchandler/alpine-clipboard/src/index.ie11.js"
// import "alpinejs"

Usage

To copy some data to the clipboard, invoke $clipboard from an event handler in your component.

<div x-data="{ input: '' }">
    <input x-model="input">
    <button type="button" @click="$clipboard(input)">Copy to Clipboard</button>
</div>

`Object` and `Array`

Since you can pass any properties through to the $clipboard function, if you pass through an Object or Array, it will be run through JSON.stringify before being copied to the clipboard.

<div x-data="{ items: ['foo', 'bar'] }">
    <button type="button" @click="$clipboard(items)">Copy to Clipboard</button>
</div>

The clipboard will now contain ["foo","bar"].

Versioning

This projects follow the Semantic Versioning guidelines. This means that there could be breaking changes on minor version changes, up until v1.x is reached.

For example, 0.1 -> 0.2 might introduce a breaking change.

License

Licensed under the MIT license, see LICENSE.md for details.

README.md