Inline Copy Text - Kumo 中文文档

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

/** Compact copy control for a short identifier. */
export function InlineCopyTextBasicDemo() {
  return (
    <InlineCopyText
      labels={{ copyAction: "Copy database ID", copied: "Database ID copied" }}
    >
      f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5
    </InlineCopyText>
  );
}

安装

批量导入

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

细粒度导入

import { InlineCopyText } from "@cloudflare/kumo/components/inline-copy-text";

用法

在表格单元格等密集界面中展示短标识符和值时，请使用 InlineCopyText。若要让值显示在类似只读输入框的字段中、并始终带有可见的复制按钮，请使用 ClipboardText。

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

export default function Example() {
  return (
    <InlineCopyText
      labels={{ copyAction: "Copy database ID", copied: "Database ID copied" }}
    >
      f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5
    </InlineCopyText>
  );
}

示例

资源行

外层的 Tailwind group 可在整行被悬停或其中获得焦点时显示复制图标。

Production database

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

/** Inline copy text inside a dense, hoverable resource row. */
export function InlineCopyTextResourceRowDemo() {
  return (
    <div className="group flex w-full max-w-xl items-center justify-between gap-4 rounded-lg bg-kumo-base px-4 py-3 ring ring-kumo-line">
      <span className="min-w-0 truncate text-sm text-kumo-default">
        Production database
      </span>
      <InlineCopyText
        labels={{
          copyAction: "Copy database ID",
          copied: "Database ID copied",
        }}
      >
        f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5
      </InlineCopyText>
    </div>
  );
}

富内容

字符串子元素默认会被复制。当子元素不是字符串时，请通过必需的 value 属性提供要复制的值。InlineCopyText 还接受 Text 的属性，如 variant、size、bold、truncate 和 as;不支持标题变体。

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

/** Display rich content while copying its underlying value. */
export function InlineCopyTextRichContentDemo() {
  return (
    <InlineCopyText
      value="f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5"
      variant="body"
      labels={{ copyAction: "Copy database ID", copied: "Database ID copied" }}
    >
      <span>
        Database ID: <strong>f86b3f10…</strong>
      </span>
    </InlineCopyText>
  );
}

API 参考

属性	类型	默认值	说明
labels	`InlineCopyTextLabels`	-	Accessible labels for localization.
children	`ReactNode`	-	Content to display. String children are copied unless `value` is provided.
value	`string`	-	The value to copy. Required when `children` is not a string.
size	`"xs" \| "sm" \| "base" \| "lg"`	-	Text size. Supported values depend on the text variant.
bold	`boolean`	-	Whether to use medium font weight. Only applies to body text variants.
as	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "label" \| "dt" \| "dd" \| "li" \| "figcaption" \| "legend" \| "pre" \| "code" \| "em" \| "strong" \| "small" \| "abbr" \| "time"`	-	The HTML element to render. Accepts headings (`"h1"`–`"h6"`), block text (`"p"`, `"pre"`), inline text (`"span"`, `"code"`, `"em"`, `"strong"`, `"small"`, `"abbr"`, `"time"`), form-related (`"label"`, `"legend"`), list/definition (`"dt"`, `"dd"`, `"li"`), and `"figcaption"`. - Optional for `"heading"` (defaults to `"span"`). Pass the heading element that reflects this text's place in the document outline. - Required for deprecated heading variants (`"heading1"`, `"heading2"`, `"heading3"`). - Optional for body variants (defaults to `"p"`) and monospace variants (defaults to `"span"`).
truncate	`boolean`	-	Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes.
disabled	`boolean`	-	-
name	`string`	-	-
type	`"submit" \| "reset" \| "button"`	-	-
className	`string`	-	-
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-
variant	`"body" \| "secondary" \| "success" \| "error" \| "mono" \| "mono-secondary"`	`"mono-secondary"`	Text style variant. Supports every Text variant except heading variants.