推出 Magic UI Pro - 50+ 个区块和模板,助您在几分钟内构建精美着陆页。

命令面板

搜索要运行的命令...

文档
刮开揭示

刮开揭示

ScratchToReveal 组件提供互动刮刮乐效果,可自定义尺寸和动画,揭示下方隐藏内容。

安装

用法

import { ScratchToReveal } from "@/components/magicui/scratch-to-reveal";
<ScratchToReveal width={300} height={300} minScratchPercentage={50}>
  Scratch To Reveal
</ScratchToReveal>

属性

属性类型默认值描述
classNamestring-应用于组件的类名。
widthnumber-刮刮乐容器的宽度。
heightnumber-刮刮乐容器的高度。
minScratchPercentagenumber50被视为完成的刮开区域的最小百分比(值介于0到100之间)。
children节点-要在跑马灯中显示的内容。
onComplete函数-刮开完成后调用的回调函数
gradientColorsstring[]-刮刮乐效果的渐变颜色。

鸣谢