代码片段
代码片段是一个可以用来显示单行或多行代码片段的组件。
安装
npx nextui-cli@latest add snippet
以上命令仅用于单个安装。如果@nextui-org/react已全局安装，则可以跳过此步骤。
导入
用法
尺寸
颜色
变体
自定义符号
无复制
您可以通过将 hideCopyButton 属性设置为 true 来隐藏复制按钮。
自定义工具提示
您可以使用 tooltipProps 属性自定义工具提示。
注意：有关
Tooltip属性的更多信息，请访问 Tooltip 页面。
多行
自定义图标
您可以使用 copyIcon 和 checkIcon 属性来自定义复制和已复制图标。
插槽
- base: 代码片段的基座插槽，它是主要容器。
- content: 这是
<pre/>插槽的包装器。 - pre: 代码片段的
<pre/>插槽。它用于包裹代码。 - symbol: 符号包装器插槽。
- copyButton: 复制按钮插槽。
- copyIcon: 复制图标插槽。
- checkIcon: 选中图标插槽。
API
代码片段属性
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| children | ReactNode | ReactNode[] | 代码片段的内容。 | - |
| size | sm | md | lg | 代码片段的大小。 | md |
| radius | none | sm | md | lg | 代码片段的圆角。 | lg |
| symbol | string | ReactNode | 在代码片段之前显示的符号。 | $ |
| timeout | number | 重置剪贴板之前等待的毫秒数。 | 2000 |
| codeString | string | 要复制的代码字符串。如果传递了 codeString，它将被复制，而不是 children。 | - |
| tooltipProps | TooltipProps | 工具提示的属性。 | - |
| copyIcon | ReactNode | 复制图标。 | - |
| checkIcon | ReactNode | 检查图标。 | - |
| disableTooltip | boolean | 是否禁用工具提示。 | false |
| disableCopy | boolean | 是否禁用复制按钮。 | false |
| hideCopyButton | boolean | 是否隐藏复制按钮。 | false |
| hideSymbol | boolean | 是否隐藏符号。 | false |
| copyButtonProps | ButtonProps | 复制按钮的属性。 | - |
| disableAnimation | boolean | 是否禁用动画。 | false |
| classNames | Record<"base"｜"content"｜"pre"｜"symbol"｜"copyButton"｜"checkIcon", string> | 允许为代码片段插槽设置自定义类名。 | - |
代码片段事件
| 属性 | 类型 | 描述 |
|---|---|---|
| onCopy | (value: string ｜ string[]) => void; | 代码复制时调用的处理程序。 |
