Inline Copy Text 行内复制文本

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

/** 用于短标识符的紧凑复制控件。 */
export function InlineCopyTextBasicDemo() {
  return (
    <InlineCopyText
      labels={{ copyAction: "复制数据库 ID", copied: "已复制数据库 ID" }}
    >
      f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5
    </InlineCopyText>
  );
}

安装

统一导出

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

按需导出

import { InlineCopyText } from "@lark-ui/core/components/inline-copy-text";

用法

在表格单元格等密集界面中，可用 InlineCopyText 展示较短的标识和值。当值需要以只读、类似输入框的形式呈现，并始终显示复制按钮时，请使用 ClipboardText。

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

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

示例

资源行

在外层使用 Tailwind group，即可在整个行悬停或获得焦点时显示复制图标。

生产环境数据库

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

/** 位于紧凑、可悬停的资源行内的行内复制文本（InlineCopyText）。 */
export function InlineCopyTextResourceRowDemo() {
  return (
    <div className="group flex w-full max-w-xl items-center justify-between gap-4 rounded-lg bg-lark-base px-4 py-3 ring ring-lark-line">
      <span className="min-w-0 truncate text-sm text-lark-default">
        生产环境数据库
      </span>
      <InlineCopyText
        labels={{
          copyAction: "复制数据库 ID",
          copied: "已复制数据库 ID",
        }}
      >
        f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5
      </InlineCopyText>
    </div>
  );
}

富文本内容

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

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

/** 显示富文本内容，复制时复制其底层值。 */
export function InlineCopyTextRichContentDemo() {
  return (
    <InlineCopyText
      value="f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5"
      variant="body"
      labels={{ copyAction: "复制数据库 ID", copied: "已复制数据库 ID" }}
    >
      <span>
        数据库 ID：<strong>f86b3f10…</strong>
      </span>
    </InlineCopyText>
  );
}

API 参考

属性	类型	默认值	说明
labels	`InlineCopyTextLabels`	-	用于本地化的无障碍标签。
children	`ReactNode`	-	要展示的内容。除非提供 `value`，否则字符串子元素会被复制。
value	`string`	-	要复制的值。`children` 不是字符串时必填。
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 元素。支持标题（`"h1"`–`"h6"`）、块级文字（`"p"`、`"pre"`）、行内文字（`"span"`、`"code"`、`"em"`、`"strong"`、`"small"`、`"abbr"`、`"time"`）、表单相关（`"label"`、`"legend"`）、列表/定义（`"dt"`、`"dd"`、`"li"`），以及 `"figcaption"`。 - `"heading"` 变体可选（默认为 `"span"`）。请传入与该文字在文档大纲中层级相对应的标题元素。 - 已废弃的标题变体（`"heading1"`、`"heading2"`、`"heading3"`）必填。 - 正文变体（默认为 `"p"`）和等宽变体（默认为 `"span"`）可选。
truncate	`boolean`	-	是否用省略号截断溢出的文字。会添加 `truncate min-w-0` 类名。
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 变体。

Lark