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
-
Tooltip message to display when clicking the copy button
- DOM Property
clickTip
- Type
-
string
- Default
-
'Successfully copied to clipboard!'
hover-tip
-
Tooltip message to display when hover the copy button
- DOM Property
hoverTip
- Type
-
string
- Default
-
'Copy to clipboard'
accessible-text-label
-
Accessible label to use on the text input.
- DOM Property
accessibleTextLabel
- Type
-
string
- Default
-
'Copyable input'
accessible-toggle-label
-
Accessible label to use on the toggle button.
- DOM Property
accessibleToggleLabel
- Type
-
string
- Default
-
'Show content'
entry-delay
-
Delay in ms before the tooltip appears.
- DOM Property
entryDelay
- Type
-
number
- Default
-
300
exit-delay
-
Delay in ms before the tooltip disappears.
- DOM Property
exitDelay
- Type
-
number
- Default
-
1500
block
-
Flag to determine if inline clipboard copy should be block styling
- DOM Property
block
- Type
-
boolean
- Default
-
false
code
-
Flag to determine if clipboard copy content includes code
- DOM Property
code
- Type
-
boolean
- Default
-
false
expanded
-
Flag to determine if clipboard copy is in the expanded state
- DOM Property
expanded
- Type
-
boolean
- Default
-
false
expandable
-
Implies not
inline
.- DOM Property
expandable
- Type
-
boolean
- Default
-
false
readonly
-
Flag to show if the input is read only.
- DOM Property
readonly
- Type
-
boolean
- Default
-
false
inline
-
Implies not expandable. Overrules
expandable
.- DOM Property
inline
- Type
-
boolean
- Default
-
false
compact
-
Flag to determine if inline clipboard copy should have compact styling
- DOM Property
compact
- Type
-
boolean
- Default
-
false
value
-
String to copy
- DOM Property
value
- Type
-
string
- Default
-
''
Methods
copy()
-
Copy the current value to the clipboard.
Events
copy
-
when the text snippet is successfully copied.
Event Type:PfClipboardCopyCopiedEvent
CSS Custom Properties
CSS Property | Description | Default |
---|---|---|
--pf-c-clipboard-copy__toggle-icon--Transition |
.2s ease-in 0s
|
|
--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate |
90deg
|
|
--pf-c-clipboard-copy__expandable-content--PaddingTop |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-clipboard-copy__expandable-content--PaddingRight |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-clipboard-copy__expandable-content--PaddingBottom |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-clipboard-copy__expandable-content--PaddingLeft |
var(--pf-global--spacer--md, 1rem)
|
|
--pf-c-clipboard-copy__expandable-content--BackgroundColor |
var(--pf-global--BackgroundColor--light-100, #fff)
|
|
--pf-c-clipboard-copy__expandable-content--BorderTopWidth |
0
|
|
--pf-c-clipboard-copy__expandable-content--BorderRightWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-clipboard-copy__expandable-content--BorderBottomWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-clipboard-copy__expandable-content--BorderLeftWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-clipboard-copy__expandable-content--BorderColor |
var(--pf-global--BorderColor--100, #d2d2d2)
|
|
--pf-c-clipboard-copy__expandable-content--OutlineOffset |
calc(-1 * var(--pf-global--spacer--xs, 0.25rem))
|
|
--pf-c-clipboard-copy--m-inline--PaddingTop |
0
|
|
--pf-c-clipboard-copy--m-inline--PaddingBottom |
0
|
|
--pf-c-clipboard-copy--m-inline--PaddingLeft |
var(--pf-global--spacer--xs, 0.25rem)
|
|
--pf-c-clipboard-copy--m-inline--BackgroundColor |
var(--pf-global--BackgroundColor--200, #f0f0f0)
|
|
--pf-c-clipboard-copy__text--m-code--FontFamily |
var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)
|
|
--pf-c-clipboard-copy__text--m-code--FontSize |
var(--pf-global--FontSize--sm, 0.875rem)
|
|
--pf-c-clipboard-copy__actions-item--MarginTop |
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
|
|
--pf-c-clipboard-copy__actions-item--MarginBottom |
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
|
|
--pf-c-clipboard-copy__actions-item--button--PaddingTop |
var(--pf-global--spacer--xs, 0.25rem)
|
|
--pf-c-clipboard-copy__actions-item--button--PaddingRight |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-clipboard-copy__actions-item--button--PaddingBottom |
var(--pf-global--spacer--xs, 0.25rem)
|
|
--pf-c-clipboard-copy__actions-item--button--PaddingLeft |
var(--pf-global--spacer--sm, 0.5rem)
|
CSS Shadow Parts
None