Clipboard Text
@cloudflare/kumo

Clipboard Text

一个带有复制到剪贴板按钮的文本组件。

0c239dd2
import { ClipboardText } from "@cloudflare/kumo";

export function ClipboardTextBasicDemo() {
  return <ClipboardText text="0c239dd2" />;
}

安装

批量导入

import { ClipboardText } from "@cloudflare/kumo";

按需导入

import { ClipboardText } from "@cloudflare/kumo/components/clipboard-text";

用法

import { ClipboardText } from "@cloudflare/kumo";

export default function Example() {
  return <ClipboardText text="Copy this text" />;
}

示例

短文本

abc123
import { ClipboardText } from "@cloudflare/kumo";

export function ClipboardTextShortDemo() {
  return <ClipboardText text="abc123" />;
}

API 密钥

sk_live_51H8...
import { ClipboardText } from "@cloudflare/kumo";

export function ClipboardTextApiKeyDemo() {
  return <ClipboardText text="sk_live_51H8..." />;
}

复制替代文本

sk_live_***********
import { ClipboardText } from "@cloudflare/kumo";

export function ClipboardTextAlternateTextToCopyDemo() {
  return (
    <ClipboardText
      text="sk_live_***********"
      textToCopy="sk_live_51H8_abc123"
    />
  );
}

长文本

https://example.com/very/long/url/path
import { ClipboardText } from "@cloudflare/kumo";

export function ClipboardTextLongDemo() {
  return <ClipboardText text="https://example.com/very/long/url/path" />;
}

带 Tooltip

悬停时显示”复制”Tooltip，点击时显示”已复制！“提示。

npx kumo add button
import { ClipboardText } from "@cloudflare/kumo";

/** With tooltip on hover showing "Copy", and anchored toast on click showing "Copied" */
export function ClipboardTextWithTooltipDemo() {
  return (
    <ClipboardText
      text="npx kumo add button"
      tooltip={{ text: "Copy", copiedText: "Copied!", side: "top" }}
    />
  );
}

API 参考

PropTypeDefaultDescription
size"sm" | "base" | "lg""lg"Size of the clipboard text field. - `"sm"` — Small clipboard text for compact UIs - `"base"` — Default clipboard text size - `"lg"` — Large clipboard text for prominent display
text*string-The text to display and copy to clipboard.
textToCopystring-If provided, this text will be copied to clipboard instead of the `text` prop.
classNamestring-Additional CSS classes merged via `cn()`.
tooltipobject-Tooltip config. Shows tooltip on hover, anchored toast on click.
labelsobject-Accessible labels for i18n.