oleg
/
alpine-clipboard


			
				
					
						
						
							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>