Clipboard Text 剪贴板文本
@lark-ui/core

Clipboard Text 剪贴板文本

带有一键复制按钮的文本组件。

0c239dd2
import { ClipboardText } from "@lark-ui/core";

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

安装

统一导出

import { ClipboardText } from "@lark-ui/core";

按需导出

import { ClipboardText } from "@lark-ui/core/components/clipboard-text";

用法

import { ClipboardText } from "@lark-ui/core";

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

示例

短文本

abc123
import { ClipboardText } from "@lark-ui/core";

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

API 密钥

sk_live_51H8...
import { ClipboardText } from "@lark-ui/core";

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

脱敏值

••••••••
import { ClipboardText } from "@lark-ui/core";

/** 在点击显示按钮之前遮蔽敏感值。 */
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 "@lark-ui/core";

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

长文本

https://example.com/very/long/url/path
import { ClipboardText } from "@lark-ui/core";

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

带工具提示

悬停时显示“Copy”工具提示，点击时显示“Copied!”轻提示。

npx lark-ui add button
import { ClipboardText } from "@lark-ui/core";

/** 悬停时显示「复制」工具提示，点击时显示锚定到触发元素的「已复制」轻提示 */
export function ClipboardTextWithTooltipDemo() {
  return (
    <ClipboardText
      text="npx lark-ui add button"
      tooltip={{ text: "复制", copiedText: "已复制！", side: "top" }}
    />
  );
}

API 参考

属性类型默认值说明
size"sm" | "base" | "lg""lg"剪贴板文本的尺寸。 - `"sm"` — 适合紧凑界面的小型剪贴板文本 - `"base"` — 默认剪贴板文本尺寸 - `"lg"` — 适合突出展示的大型剪贴板文本
text*string-要展示并复制到剪贴板的文本。
textToCopystring-如果提供，则复制这段文本到剪贴板，而不是 `text` 属性的内容。
maskedboolean-初始时掩码显示文本，并提供显示或隐藏的控件。
classNamestring-通过 `cn()` 合并的额外 CSS 类名。
tooltipobject-工具提示配置。悬停时显示工具提示，点击时显示锚定在元素上的轻提示。
labelsobject-用于国际化的无障碍标签。