Clipboard 剪贴板
Forms
智能自动检测
简介
Clipboard 组件是一个只读文本容器，配有一个复制到剪贴板操作触发器。它内置响应式的视觉指示器状态变化（已复制/未复制），以便在用户复制终端命令、API 密钥、令牌或链接时提供即时反馈。
Clipboard 已作为 clipboard 区块完整集成到 Page Builder 中，内容作者和开发者可以直接在 CMS 内轻松配置描述性标签、复制值、操作超时和配色主题。
用法
以下示例展示了内容编辑者如何绑定并结构化复制到剪贴板元素。
1. 标准代码克隆命令
一条标准终端代码或 Git 克隆命令片段，配有一个可视复制触发器。
{
"type": "clipboard",
"label": "Clone Command",
"value": "git clone https://github.com/honojs/honox",
"interactive": true
}
2. 带自定义超时的 API 密钥剪贴板（紫色主题）
展示一个自定义配色的平台配置，其更快的自定义状态重置超时设置为 1500 毫秒。
{
"type": "clipboard",
"label": "Production API Key",
"value": "pk_live_51HxF4pE2",
"colorPalette": "purple",
"timeout": 1500,
"interactive": true
}
3. 紧凑只读配置
非常适合在紧凑的仪表盘侧边栏或紧凑元数据布局中嵌入简短 URL 或系统 ID。
{
"type": "clipboard",
"label": "Endpoint URL",
"value": "https://api.acme.com/v1/deploy",
"size": "sm",
"interactive": true
}
属性
| 属性 | CMS 字段类型 | 默认值 | 说明 / 可选项 |
|---|---|---|---|
标签文本 (label) | string | - | 直接渲染在只读输入框上方的可视文本标题。 |
复制值 (value) | string | - | 点击触发器时实际复制到用户系统剪贴板的文本值。 |
超时延迟 (timeout) | number | 3000 | “已复制”对勾状态在恢复之前保持激活状态的持续时间（毫秒）。 |
配色主题 (colorPalette) | select | "green" | 切换为激活状态时应用于复制触发器的视觉色彩强调。 • 选项： blue、green、red、purple、orange、amber、cyan、slate。 |
尺寸刻度 (size) | select | "md" | 控制整体高度、内边距与文本缩放。 • 选项： "sm"、"md"、"lg"。 |
强制交互 (interactive) | boolean | true | 作为 Preact 交互式岛屿进行客户端水合，确保点击操作触发即时复制。 |
开发者说明与无障碍
- 无障碍标签与状态通告： 在底层，该组件原生处理屏幕阅读器的无障碍支持：
- 复制按钮触发器会接收本地化的
aria-label更新（在"Copy to clipboard"/"Copied to clipboard"之间切换），确保屏幕阅读器立即通告状态变化。
- 复制按钮触发器会接收本地化的
- 聚焦选中与只读输入： 输入字段保持可聚焦（
readOnly而非disabled）。聚焦时，它会自动选中其完整内部文本，以便键盘用户可以使用Ctrl+C或Cmd+C手动复制内容。 - 激活状态标记： 激活时，
data-copied属性会动态镜像到外层容器及所有后代部件上，便于在复制期间进行自定义 CSS 样式设置。