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 prop 提供要复制的值。InlineCopyText 也接受 variant、size、bold、truncate、as 等 Text prop；不支持标题变体。
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 参考
| Prop | Type | Default | Description |
|---|---|---|---|
| labels | InlineCopyTextLabels | - | 用于本地化的无障碍标签。 |
| children | ReactNode | - | 要显示的内容。除非提供了 |
| value | string | - | 要复制的内容。当 |
| size | "xs" | "sm" | "base" | "lg" | - | 文本大小。支持的值取决于文本变体。 |
| bold | boolean | - | 是否使用中等字重。仅适用于正文文本变体。 |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label" | "dt" | "dd" | "li" | "figcaption" | "legend" | "pre" | "code" | "em" | "strong" | "small" | "abbr" | "time" | - | 要渲染的 HTML 元素。支持标题（
|
| truncate | boolean | - | 是否用省略号截断溢出的文本。添加 |
| 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 变体。 |