A button to copy some text to the system clipboard, made with webcomponents.
npm i -S @bicycle-codes/copy-buttonSee bicycle-codes.github.io/copy-button for an example with the default CSS.
This looks at a css variable --success-color, which determines the color the checkmark that is displayed after you copy something.
There are several options.
Import this file. It depends on tonic and clipboard-copy, so you will need to provide them somehow, either through a bundler or importmap.
You must use an ID attribute, because the CopyButton element contains state.
import Tonic from '@bicycle-codes/tonic'
import { CopyButton, SuccessSvg, CopySvg } from '@bicycle-codes/copy-button'
import '@bicycle-codes/copy-button/style.css'
function ButtonExample () {
// this needs an ID attribute
return this.html`
<copy-button class="copy example" id="example"></copy-button>
`
}
Tonic.add(ButtonExample)
Tonic.add(CopyButton)
Tonic.add(SuccessSvg)
Tonic.add(CopySvg)First copy the bundled file to a location that is accessible to your web server:
cp ./node_modules/@bicycle-codes/copy-button/dist/index.bundle.js ./public/copy-button.jsThen link to the bundled file, and you can use as an html element.
<body>
<copy-button></copy-button>
</div>
<script type="module" src="./copy-button.js"></script>Copy the bundled and minified file to a location that is accessible to your web server:
cp ./node_modules/@bicycle-codes/copy-button/dist/index.bundle.min.js ./public/copy-button.min.jsLink to the minified file in HTML:
<body>
<copy-button></copy-button>
</div>
<script type="module" src="./copy-button.min.js"></script>Override the variable --success-color to customize the color.
.copy-button {
--success-color: green;
}Create a button like this
