@patternfly/pfe-clipboard

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.