介绍 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-要应用于组件的类名。
宽度number-刮刮容器的宽度。
高度number-刮刮容器的高度。
minScratchPercentagenumber50被视为完成的刮开区域的最小百分比(值介于 0 到 100 之间)。
childrennode-要在跑马灯中显示的内容。
onComplete函数-刮开完成后调用的回调函数
gradientColorsstring[]-刮开效果的渐变颜色。

鸣谢