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..." />;
}

掩码值

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

/** Masks a sensitive value until the reveal button is pressed. */
export function ClipboardTextMaskedDemo() {
  return (
    <div className="w-full max-w-xs">
      <ClipboardText className="w-full" text="sk_live_51H8_abc123" masked />
    </div>
  );
}

复制替代文本

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"

剪贴板文本字段的大小。

  • "sm" — 适用于紧凑 UI 的小型剪贴板文本
  • "base" — 默认剪贴板文本大小
  • "lg" — 用于突出显示的大型剪贴板文本
text*string-

要显示并复制到剪贴板的文本。

textToCopystring-

如果提供，此文本将复制到剪贴板，而不是 text 属性。

maskedboolean-

初始时对文本进行掩码处理，并提供显示或隐藏文本的控件。

classNamestring-

通过 cn() 合并的额外 CSS 类。

tooltipobject-

Tooltip 配置。悬停时显示提示，点击时锚定显示弹出通知。

labelsobject-

用于国际化的无障碍标签。