@patternfly/pfe-clipboard v1.12.3
PatternFly Elements Clipboard
A button to copy the current URL to the system clipboard.
Read more about Clipboard in the PatternFly Elements Clipboard documentation
Installation
Load <pfe-clipboard>
via CDN:
<script src="https://unpkg.com/@patternfly/pfe-clipboard?module"></script>
Or, if you are using NPM, install it
npm install @patternfly/pfe-clipboard
Then once installed, import it to your application:
import '@patternfly/pfe-clipboard';
Usage
Default
<pfe-clipboard role="button" tabindex="0"></pfe-clipboard>
Copy text from an element on the page
Add a valid HTML selector to the target attribute, component will use document.querySelector
to find the first element that the selector fits.
We recommend using ID's.
<pfe-clipboard role="button" tabindex="0" copy-from="#copy-me"></pfe-clipboard>
<div id="copy-me">This text will get copied</div>
<pfe-clipboard role="button" tabindex="0" copy-from="body .copy-me"></pfe-clipboard>
<div class="copy-me">This text will get copied</div>
Copy arbitrary content
Set the attribute copy-from="property"
and set the property contentToCopy
on the component with what should be copied.
<!-- Markup on the page -->
<pfe-clipboard role="button" tabindex="0" copy-from="property" id="copyButton"></pfe-clipboard>
document.getElementById('copyButton').contentToCopy('Wakka wakka!');
Optionally hide the icon
<pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
Override the link text
<pfe-clipboard role="button" tabindex="0">
<span slot="label">hey you, copy this url!</span>
</pfe-clipboard>
Override the copied notification text
<pfe-clipboard role="button" tabindex="0">
<span slot="success">URL Copied to clipboard</span>
</pfe-clipboard>
Override the icon
<pfe-clipboard role="button" tabindex="0">
<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
</pfe-clipboard>
Override all slots
<pfe-clipboard role="button" tabindex="0">
<span slot="label">Copy this article URL</span>
<span slot="success">URL Copied to clipboard</span>
<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
</pfe-clipboard>
Specify the amount of seconds the copy success text should be visible
<pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
Accessibility
<pfe-clipboard>
implements many features of a standard button to provide an accessible
experience for all users. By default, role="button"
and tabindex="0"
are added to
inform assistive technology that <pfe-clipboard>
should be treated as a button. It listens for
mouse clicks as well as enter and space key presses per the recommendation of
w3.org.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago