cnd-components-mcp/componentData/components/CndCopy/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 基本使用
```tsx preview
import React from "react";
import { Copy } from "@ali/cnd";

const Demo = () => {
  const message = "this is a message";
  return <Copy text={message}>{message}</Copy>;
};

export default Demo;
```
## showIcon
```tsx preview
import React from "react";
import { Copy } from "@ali/cnd";

const Demo = () => {
  const message = "this is a message";
  return (
    <Copy text={message} showIcon>
      {message}
    </Copy>
  );
};

export default Demo;
```
## 自定义 icon 样式
```tsx preview
import React from "react";
import { Copy, Icon } from "@ali/cnd";

const Demo = () => {
  const message = "this is a message";
  return (
    <Copy
      text={message}
      showIcon
      icon={
        &lt;&gt;
          &lt;span&gt;一键复制&lt;/span&gt;
          &lt;Icon className="ml-4" type="copy" size="xs" /&gt;
        &lt;/&gt;
      }
    >
      {message}
    &lt;/Copy&gt;
  );
};

export default Demo;
```
## 内容过多
```tsx preview
import React from "react";
import { Copy, Icon } from "@ali/cnd";

const Demo = () => {
  const message = "集成Truncate组件，当内容过多时，进行溢出隐藏设置";
  return (
    <Copy
      text={message}
      showIcon
      truncateProps={{
        threshold: 20,
      }}
    >
      {message}
    &lt;/Copy&gt;
  );
};

export default Demo;
```