Examples
Inline compact code in sentence
Code-styled inline copy embedded in a sentence.
npm install
Inline compact with additional action
A second action button follows the copy action.
oc new-app httpd-example
Documentation
Clipboard copy props
Parameters accepted by
{#include components/forms/clipboard-copy ... /}. Model mode: pass
clipboardCopy=<ClipboardCopy> built in Java instead — the Java tab on each
example shows the builder.
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id. |
* text
|
String | The value shown + copied. Kept as a String param (not a content slot) — see the Divergence note below. |
readonly / expandable /
inline / code /
block
|
boolean |
Layout modifiers. expandable shows a chevron toggle;
inline uses compact in-flow rendering.
|
expandedText
|
String |
Used with expandable=true — full multi-line content shown when expanded.
|
Usage
Browser support. The component uses navigator.clipboard.writeText() —
supported in all modern browsers but requires HTTPS or localhost.
Pick the layout. Inline for short snippets ("run npm install").
Standard for tokens / URLs. Expandable for long config blocks where the headline alone is meaningful.
Divergence from PF React (and the rest of our library). Most of our text-bearing components
migrated their text param to a content slot for parity with PF's
children; clipboard-copy keeps text as a
String param. The default and expandable variants put the value into
<input value="…"> — an attribute that requires a primitive string. PF React's
children
works there only because React stringifies children when assigned to
value={children}; Qute has no equivalent slot-to-string mechanism (no built-in
{#capture} directive). Keeping text as a String is the
only shape that works uniformly across all three variants. The inline variant could use a slot in
isolation, but a split API (slot in one mode, param in two) is more confusing than a uniform param.