Clipboard Zwischenablage
Einführung
Die Clipboard-Komponente ist ein schreibgeschützter Textcontainer, der mit einem Aktionstrigger zum Kopieren in die Zwischenablage gekoppelt ist. Sie verfügt über eingebaute, responsive visuelle Indikator-Zustandsänderungen (kopiert/nicht kopiert), um Benutzern beim Kopieren von Terminalbefehlen, API-Schlüsseln, Tokens oder Links sofortiges Feedback zu geben.
Die Clipboard ist vollständig als clipboard-Block im Page Builder integriert, sodass Inhaltsautoren und Entwickler beschreibende Labels, Kopierwerte, Aktions-Timeouts und Farbthemen direkt im CMS konfigurieren können.
Verwendung
Diese Beispiele veranschaulichen, wie Inhaltsredakteure Copy-to-Clipboard-Elemente binden und strukturieren.
1. Standard-Code-Klonbefehl
Ein Standard-Terminalcode oder Git-Clone-Befehls-Snippet, begleitet von einem visuellen Kopier-Trigger.
{
"type": "clipboard",
"label": "Clone Command",
"value": "git clone https://github.com/honojs/honox",
"interactive": true
}
2. API-Schlüssel-Zwischenablage mit benutzerdefiniertem Timeout (Lila-Theme)
Zeigt eine benutzerdefinierte farbige Plattformkonfiguration mit einem schnelleren, benutzerdefinierten Status-Reset-Timeout von 1500 Millisekunden.
{
"type": "clipboard",
"label": "Production API Key",
"value": "pk_live_51HxF4pE2",
"colorPalette": "purple",
"timeout": 1500,
"interactive": true
}
3. Kompakte schreibgeschützte Konfiguration
Ideal zum Einbetten kompakter URLs oder System-IDs in enge Dashboard-Sidebars oder kompakte Metadaten-Layouts.
{
"type": "clipboard",
"label": "Endpoint URL",
"value": "https://api.acme.com/v1/deploy",
"size": "sm",
"interactive": true
}
Eigenschaften
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / Unterstützte Optionen |
|---|---|---|---|
Label-Text (label) | string | - | Der visuelle Textüberschrift, der direkt über dem schreibgeschützten Eingabefeld gerendert wird. |
Kopierwert (value) | string | - | Der tatsächliche Textwert, der bei Trigger-Klick in die System-Zwischenablage des Benutzers kopiert wird. |
Timeout-Verzögerung (timeout) | number | 3000 | Dauer in Millisekunden, für die der visuelle "Kopiert"-Haken aktiv bleibt, bevor er zurückgesetzt wird. |
Farbschema (colorPalette) | select | "green" | Visueller Farbakzent, der auf den Kopier-Trigger angewendet wird, wenn er auf aktiv umschaltet. • Optionen: blue, green, red, purple, orange, amber, cyan, slate. |
Größenstufe (size) | select | "md" | Steuert Gesamthöhe, Innenabstand und Textskalierung. • Optionen: "sm", "md", "lg". |
Interaktiv erzwingen (interactive) | boolean | true | Hydratisiert als Preact-interaktive Insel auf der Client-Seite, damit Klickaktionen das sofortige Kopieren auslösen. |
Entwicklerhinweise & Barrierefreiheit
- Barrierefreies Label & Status-Ansagen: Unter der Haube behandelt diese Komponente die Screenreader-Barrierefreiheit nativ:
- Der Kopier-Button-Trigger erhält lokalisierte
aria-label-Updates (Wechsel zwischen"Copy to clipboard"/"Copied to clipboard"), sodass Screenreader Statusänderungen sofort ansagen.
- Der Kopier-Button-Trigger erhält lokalisierte
- Select-on-Focus & schreibgeschützte Eingaben: Das Eingabefeld bleibt fokussierbar (
readOnlystattdisabled). Bei Fokus wird automatisch der gesamte innere Text ausgewählt, damit Tastatur-Benutzer Inhalte manuell mitCtrl+CoderCmd+Ckopieren können. - Aktive Zustands-Marker: Ein
data-copied-Attribut wird beim Aktivieren dynamisch auf den äußeren Container und alle Nachfolger-Teile gespiegelt, was benutzerdefiniertes CSS-Styling während des Kopierens erleichtert.