github / Clipboard Copy Element
Licence: mit
Copy element text content or input values to the clipboard.
Stars: ✭ 198
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Clipboard Copy Element
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+6037.88%)
Mutual labels: web-components, custom-elements
Nutmeg
Build, test, and publish vanilla Web Components with a little spice
Stars: ✭ 111 (-43.94%)
Mutual labels: web-components, custom-elements
Aybolit
Lightweight web components library built with LitElement.
Stars: ✭ 90 (-54.55%)
Mutual labels: web-components, custom-elements
Bolt
The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.
Stars: ✭ 186 (-6.06%)
Mutual labels: web-components, custom-elements
Swiss
🇨🇭Functional custom elements
Stars: ✭ 169 (-14.65%)
Mutual labels: web-components, custom-elements
Auto Check Element
An input element that validates its value with a server endpoint.
Stars: ✭ 85 (-57.07%)
Mutual labels: web-components, custom-elements
Vanilla Hamburger
Animated hamburger menu icons for modern web apps (1.8 KB) 🍔
Stars: ✭ 110 (-44.44%)
Mutual labels: web-components, custom-elements
File Input
A better <input type="file">
Stars: ✭ 59 (-70.2%)
Mutual labels: web-components, custom-elements
Custom Elements
All about HTML Custom Elements
Stars: ✭ 188 (-5.05%)
Mutual labels: web-components, custom-elements
Elm Canvas
A canvas drawing library for Elm
Stars: ✭ 124 (-37.37%)
Mutual labels: web-components, custom-elements
Markdown Toolbar Element
Markdown formatting buttons for text inputs.
Stars: ✭ 160 (-19.19%)
Mutual labels: web-components, custom-elements
Ion Phaser
A web component to use Phaser Framework with Angular, React, Vue, etc 🎮
Stars: ✭ 152 (-23.23%)
Mutual labels: web-components, custom-elements
Use Custom Element
Custom hook to bridge Custom Elements (Web Components) to React.
Stars: ✭ 77 (-61.11%)
Mutual labels: web-components, custom-elements
Shadow Dom In Depth
Everything you need to know about Shadow DOM
Stars: ✭ 191 (-3.54%)
Mutual labels: web-components, custom-elements
Task Lists Element
Drag and drop task list items.
Stars: ✭ 73 (-63.13%)
Mutual labels: web-components, custom-elements
Dataformsjs
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.
Stars: ✭ 95 (-52.02%)
Mutual labels: web-components, custom-elements
Details Dialog Element
A modal dialog that's opened with <details>.
Stars: ✭ 603 (+204.55%)
Mutual labels: web-components, custom-elements
Custom Elements Ts
Create native custom elements using Typescript
Stars: ✭ 52 (-73.74%)
Mutual labels: web-components, custom-elements
Image Crop Element
A custom element for cropping a square image. Returns x, y, width, and height.
Stars: ✭ 115 (-41.92%)
Mutual labels: web-components, custom-elements
Html Include Element
Easily include external HTML into your pages.
Stars: ✭ 143 (-27.78%)
Mutual labels: web-components, custom-elements
<clipboard-copy> element
Copy element text content or input values to the clipboard.
Installation
$ npm install --save @github/clipboard-copy-element
Usage
Script
Import as ES modules:
import '@github/clipboard-copy-element'
With a script tag:
<script type="module" src="./node_modules/@github/clipboard-copy-element/dist/index.js">
Markup
<clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">
Copy path
</clipboard-copy>
<div id="blob-path">src/index.js</div>
Data sources
Attribute
<clipboard-copy value="src/index.js">Copy</clipboard-copy>
Element content
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<div id="blob-path">src/index.js</div>
Form input
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<input id="blob-path" value="src/index.js">
Hyperlink href
<clipboard-copy for="blob-path">Copy full URL</clipboard-copy>
<a id="blob-path" href="/path/to#my-blob">Link text will not be copied</a>
Events
After copying to the clipboard, a clipboard-copy
event is dispatched from
the <clipboard-copy>
element:
document.addEventListener('clipboard-copy', function(event) {
const button = event.target
button.classList.add('highlight')
})
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge
Development
npm install
npm test
License
Distributed under the MIT license. See LICENSE for details.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].