Skip to content
Lenso UI

Snippet

Snippet 从 HeroUI v2 到 v3 的迁移指南。

Snippet 组件在 HeroUI v3 中已移除。请使用原生 HTML 元素配合 Tailwind CSS，并通过 Clipboard API 自行实现复制能力。

主要变化

1. 组件移除

v2： 来自 @lenso/ui 的 <Snippet> 组件
v3： 原生 HTML 元素（<pre>、<code>）+ 手动实现复制逻辑

2. 功能对照

v2 的 Snippet 具备以下能力，需要在 v3 中分别替代：

v2 功能v3 替代说明
复制按钮Button + Clipboard API使用 navigator.clipboard.writeText()
复制提示Tooltip 组件使用 v3 的 Tooltip
符号前缀手动渲染将符号作为文本内容输出
多行支持数组映射对字符串数组做 map
变体（flat、solid、bordered、shadow）Tailwind 类使用背景 / 边框等工具类
颜色（default、primary 等）Tailwind 类使用颜色相关工具类
尺寸（sm、md、lg）Tailwind 字号使用 text-sm、text-base、text-lg
圆角Tailwind 圆角使用 rounded-* 类

结构变化

在 v2 中，Snippet 是带内置复制能力的包装组件：

import { Snippet } from "@lenso/ui";
export default function App() {  return (    <Snippet symbol="$">      npm install @lenso/ui    </Snippet>  );}

在 v3 中，请使用原生 HTML 元素并手动实现复制：

import { Button, Tooltip } from "@lenso/ui";import { useState } from "react";
export default function App() {  const [copied, setCopied] = useState(false);
  const handleCopy = async () => {    await navigator.clipboard.writeText("npm install @lenso/ui");    setCopied(true);    setTimeout(() => setCopied(false), 2000);  };
  return (    <div className="flex items-center gap-2 rounded-lg bg-default-100 px-3 py-1.5">      <pre className="text-sm font-mono">        <span className="text-default-500">$ </span>        npm install @lenso/ui      </pre>      <Tooltip>        <Button          isIconOnly          aria-label="Copy"          size="sm"          variant="ghost"          onPress={handleCopy}        >          {copied ? "✓" : "📋"}        </Button>        <Tooltip.Content>{copied ? "Copied!" : "Copy to clipboard"}</Tooltip.Content>      </Tooltip>    </div>  );}

迁移示例

多行 Snippet

<Snippet symbol="$">  {[    "npm install @lenso/ui",    "yarn add @lenso/ui",    "pnpm add @lenso/ui"  ]}</Snippet>

样式选项

{/* With variants */}<Snippet variant="bordered" color="primary">  npm install @lenso/ui</Snippet>
{/* Without symbol */}<Snippet hideSymbol>  npm install @lenso/ui</Snippet>
{/* Without copy button */}<Snippet hideCopyButton>  npm install @lenso/ui</Snippet>

创建可复用的 Snippet 组件（推荐）

Snippet 类需求很常见，下面是一个完整的可复用组件示例：

import { Snippet } from "@lenso/ui";
<Snippet  symbol="$"  variant="bordered"  color="primary"  size="md">  npm install @lenso/ui</Snippet>

总结

  1. 组件已移除：v3 不再提供 Snippet 组件。
  2. 导入调整：移除 import { Snippet } from "@lenso/ui"。
  3. 使用原生元素：改用原生 <pre>、<code> 等元素。
  4. 手动复制：使用 Clipboard API 实现复制。
  5. 样式：直接用 Tailwind CSS 类表达变体、颜色、尺寸。
  6. Tooltip：复制按钮的提示请使用 v3 Tooltip。
  7. Button：复制按钮请使用 v3 Button。

迁移步骤

  1. 移除导入：从 @lenso/ui 的导入中删除 Snippet。
  2. 替换组件：将所有 <Snippet> 替换为原生 HTML 结构。
  3. 实现复制：使用 navigator.clipboard.writeText() 等方法。
  4. 添加复制按钮：使用 v3 的 Button 与 Tooltip。
  5. 应用样式：用 Tailwind CSS 表达变体、颜色、尺寸。
  6. 处理多行：多行场景对数组做映射渲染。
  7. （可选） 在应用中封装可复用的 Snippet 组件。

Clipboard API 说明

Clipboard API 需要：

  • HTTPS（本地开发可使用 localhost）
  • 用户手势触发（不能自动调用）
  • 现代浏览器支持

如需兼容旧浏览器，可采用回退方案：

const handleCopy = async (text: string) => {  try {    await navigator.clipboard.writeText(text);  } catch (error) {    // 旧版浏览器回退    const textArea = document.createElement("textarea");    textArea.value = text;    textArea.style.position = "fixed";    textArea.style.opacity = "0";    document.body.appendChild(textArea);    textArea.select();    document.execCommand("copy");    document.body.removeChild(textArea);  }};