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
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
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)
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
View HTML Source
<pf-clipboard-copy inline compact>2.3.4-2-redhat</pf-clipboard-copy>
Inline compact code
View HTML Source
<pf-clipboard-copy inline compact code>2.3.4-2-redhat</pf-clipboard-copy>
Inline compact with additional action
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
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.
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.
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