@substrate-system/copy-button
v0.3.7
Published
Copy button made with web components
Downloads
105
Readme
copy button
A button to copy some text to the system clipboard, made with webcomponents, with no dependencies.
install
npm i -S @substrate-system/copy-buttondemonstration
See substrate-system.github.io/copy-button for an example.
globals
This depends on @substrate-system/a11y for a .visually-hidden class. Install and import that module as well.
npm i -S @substrate-system/a11yThis looks at css variables --success-color and --copy-color which determines the color of the success checkmark and copy icon.
use
Include this package, then use the tag <copy-button> in HTML.
Example without a build step
Copy the files
Copy files so they are accessible by your web server.
JS
cp ./node_modules/@substrate-system/copy-button/dist/index.min.js public/copy-button.jsCSS
cp ./node_modules/@substrate-system/copy-button/dist/style.min.css public/copy-button.cssUse in HTML
<head>
<!-- style -->
<link rel="stylesheet" href="./copy-button.css">
</head>
<body>
<!-- use the tag -->
<copy-button payload="example text"></copy-button>
<!-- include the script -->
<script src="/copy-button.js" type="module"></script>
</body>With a JS build step
We expose several import options
// default, unminified
import '@substrate-system/copy-button'
// minified
import '@substrate-system/copy-button/min'
// style
import '@substrate-system/copy-button/style.css'
// style, minifed
import '@substrate-system/copy-button/min/style.css'In vite, for example, import like this
import '@substrate-system/copy-button'
import '@substrate-system/copy-button/style.css'
// or minified css
import '@substrate-system//copy-button/min/style.css'CSS
Override the variables --success-color and --copy-color to customize the color.
.copy-button {
--success-color: green;
--copy-color: blue;
}Create a button like this
