使用美观的组件更快地交付
NextUI Pro

代码片段

代码片段是一个可用于显示单行或多行代码片段的组件。

Storybook@nextui-org/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
tooltipProps
TooltipProps
copyIcon
ReactNode
checkIcon
ReactNode
disableTooltip
boolean
false
disableCopy
boolean
false
hideCopyButton
boolean
false
hideSymbol
boolean
false
copyButtonProps
ButtonProps
disableAnimation
boolean
false
classNames
Partial<Record<'base' | 'content' | 'pre' | 'symbol' | 'copyButton' | 'checkIcon', string>>

代码片段事件

属性类型默认值
onCopy
(value: string | string[]) => void
滑块间隔符