CopyButton 复制按钮
CopyButton 把一段文字放进剪贴板。复制成功后显示两秒对勾,再换回复制图标。不给标签时只显示图标。
演示
基础用法
没有子元素时按钮只显示图标,名称取自语言包的“复制”。
带标签
子元素作为图标旁的可见标签。
尺寸
高度与同尺寸的 Button 一致。
用函数提供文字
text 可以是函数,点击时才调用,所以能读到最新的值。剪贴板接受后以复制的文字调用 onCopy;失败时以错误调用 onError。
禁用
无障碍
CopyButton 是原生的 button type="button",空格和回车都能复制。只有图标时,用语言包的“复制”(或你的 aria-label)命名;带标签时由标签命名。复制成功后,名称在 copiedDuration 内变为语言包的“已复制”,读屏软件能听到结果。图标对辅助技术隐藏。
Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
text | string | (() => string) | 必填 | 要复制的文字,或在点击时返回文字的函数。 | 未发布 |
onCopy | (text: string) => void | undefined | 剪贴板接受后以复制的文字调用。 | 未发布 |
onError | (error: unknown) => void | undefined | 剪贴板不可用或拒绝时调用。 | 未发布 |
copiedDuration | number | 2000 | 已复制状态持续的毫秒数。 | 未发布 |
size | small | medium | large | medium | 按钮尺寸。 | 未发布 |
icon | ReactNode | 复制图标 | 替换复制图标。 | 未发布 |
copiedIcon | ReactNode | 对勾图标 | 替换复制成功后的对勾。 | 未发布 |
children | ReactNode | undefined | 可见标签;不传时只显示图标。 | 未发布 |
aria-label | string | 只有图标时为语言包的“复制” | 空闲时按钮的名称;复制成功后读作语言包的“已复制”。 | 未发布 |
disabled | boolean | false | 禁用按钮。 | 未发布 |
CopyButton 也接受原生 button 属性和 ref。可以通过 --r-copy-button-* token 调整样式。