| 123456789101112131415161718192021222324252627282930313233 |
- <!DOCTYPE html>
- <head>
- <title>Alpine Clipboard</title>
- <script src="//unpkg.com/alpinejs" defer></script>
- </head>
- <body>
- <div x-data="{ input: '' }">
- <input x-model="input">
- <button type="button" @click="await $clipboard(input)">Copy to Clipboard</button>
- </div>
- <div x-data="{}">
- <button type="button" @click="$clipboard(() => 'Testing')">Copy 'Testing' to Clipboard</button>
- </div>
- <div x-data="{ items: ['foo', 'bar'] }">
- <template x-for="item in items">
- <p x-text="item"></p>
- </template>
- <button type="button" @click="$clipboard(items)">Copy the JSON representation of `items` to your clipboard</button>
- </div>
- <div x-data="{ text: 'boo' }">
- <button x-clipboard="text">This uses clipboard directive to copy the text "boo" to your clipboard.</button>
- <button x-clipboard.raw="Here is some raw text to copy to the clipboard.">
- This will let you copy any raw text in the directive.
- </button>
- </div>
- <script src="../dist/alpine-clipboard.js"></script>
- </body>
|
