片段

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

Storybook@heroui/snippetSourceStyles source

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

使用

尺寸

颜色

变体

自定义符号

不显示复制按钮

你可以通过将 hideCopyButton 属性设置为 true 来隐藏复制按钮。

自定义工具提示

你可以使用 tooltipProps 属性定制工具提示。

注：有关 Tooltip props 的更多信息，请访问 Tooltip 页面。

多行

自定义图标

你可以使用 copyIcon 和 checkIcon 属性定制复制和已复制图标。

插槽

  • base：片段的基本插槽，它是主容器。
  • content：<pre/> 插槽的包装器。
  • pre：片段的 <pre/> 插槽，用于包裹代码。
  • symbol：符号包装器插槽。
  • copyButton：复制按钮插槽。
  • copyIcon：复制图标插槽。
  • checkIcon：检查图标插槽。

API

Snippet属性

PropTypeDefault
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>>

Snippet事件

PropTypeDefault
onCopy
(value: string | string[]) => void
Slider 滑块Spacer 间距