Skip to content
Versions v3 v2 v1

Clipboard Copy

The clipboard copy component allows users to quickly and easily copy content to their clipboard.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Installation

npm install @patternfly/elements

Usage

Read-only

View HTML Source
<pf-clipboard-copy readonly value="This is read-only"></pf-clipboard-copy>

Expanded

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.
View HTML Source
<pf-clipboard-copy expandable>
Got a lot of text here, need to see all of it?
Click that arrow on the left side and check out the resulting expansion.
</pf-clipboard-copy>

Read-only expanded

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.
View HTML Source
<pf-clipboard-copy expandable readonly>
Got a lot of text here, need to see all of it?
Click that arrow on the left side and check out the resulting expansion.
</pf-clipboard-copy>

Read-only expanded by default

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

asodifna osdif

View HTML Source
<pf-clipboard-copy expandable readonly expanded>
<p>Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</p>
<p>asodifna osdif</p>
</pf-clipboard-copy>

JSON object (pre-formatted code)

{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}
View HTML Source
<pf-clipboard-copy code expandable expanded>
{ "menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
</pf-clipboard-copy>

Inline compact

2.3.4-2-redhat
View HTML Source
<pf-clipboard-copy inline compact>2.3.4-2-redhat</pf-clipboard-copy>

Inline compact code

2.3.4-2-redhat
View HTML Source
<pf-clipboard-copy inline compact code>2.3.4-2-redhat</pf-clipboard-copy>

Inline compact with additional action

2.3.4-2-redhat
View HTML Source
<pf-clipboard-copy inline compact>2.3.4-2-redhat
<pf-button slot="actions" label="Action" plain variant="primary">
<pf-icon icon="play"></pf-icon>
</pf-button>
</pf-clipboard-copy>

Inline compact in sentence

Basic

Lorem ipsum 2.3.4-2-redhat

View HTML Source
<p>Lorem ipsum <pf-clipboard-copy inline compact>2.3.4-2-redhat</pf-clipboard-copy></p>

Long copy string

Lorem ipsum dolor sit amet, consectetur adipiscing elit. https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.

View HTML Source
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <pf-clipboard-copy inline compact>https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890</pf-clipboard-copy> 
Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris,
ullamcorper pharetra lacus nibh vitae enim.</p>

Long copy string in block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.

View HTML Source
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<pf-clipboard-copy compact block>https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890</pf-clipboard-copy>
Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris,
ullamcorper pharetra lacus nibh vitae enim.
</p>

Slots

Default Slot

Place content to copy here, or use the value attribute

actions

Place additional action buttons here

Attributes

click-tip
DOM Property
clickTip
Type
string
Default
'Copied'
hover-tip
DOM Property
hoverTip
Type
string
Default
'Copy'
text-label
DOM Property
textAriaLabel
Type
string
Default
'Copyable input'
toggle-label
DOM Property
toggleAriaLabel
Type
string
Default
'Show content'
entry-delay
DOM Property
entryDelay
Type
number
Default
300
exit-delay
DOM Property
exitDelay
Type
number
Default
1500
block
DOM Property
block
Type
boolean
Default
false
code
DOM Property
code
Type
boolean
Default
false
expanded
DOM Property
expanded
Type
boolean
Default
false
expandable

Implies not inline.

DOM Property
expandable
Type
boolean
Default
false
readonly
DOM Property
readonly
Type
boolean
Default
false
inline

Implies not expandable. Overrules expandable.

DOM Property
inline
Type
boolean
Default
false
compact
DOM Property
compact
Type
boolean
Default
false
value
DOM Property
value
Type
string
Default
''

Methods

copy()

Copy the current value to the clipboard.

Events

None

CSS Custom Properties

None

CSS Shadow Parts

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify