InfiniteMenu组件
发表于:2026-05-21 | 分类: Next.js16教程
字数统计: 165 | 阅读时长: 1分钟 | 阅读量: 0
安装:
1
pnpm dlx jsrepo@latest add https://reactbits.dev/r/InfiniteMenu-TS-TW
配置:
  • 需要在文件的开头标识”use client”;
  • 全屏固定定位:
1
<div className='relative w-full min-h-dvh h-dvh h-screen '>
  • 垂直居中:
1
2
3
4
5
6
7
8
absolute
font-black
[font-size:4rem]
left-1/2
top-1/2
transform
-translate-y-1/2
-translate-x-1/2
导入StarBorder组件:
1
2
3
4
5
6
7
8
9
10
<StarBorder
as='button'
className=' text-4xl'
color='red'
thickness='1'
speed='3s'>
<span className='text-3xl text-white'>
&nbsp; ✨ 点击跳转 &nbsp;&nbsp;
</span>
</StarBorder>
使用:
1
2
3
<div className='absolute w-full min-h-dvh h-dvh h-screen opacity-50'>
<InfiniteMenu items={navs} scale={0.3} />
</div>
上一篇:
StarBorder组件
下一篇:
MagicRings