lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 13 Activity

实现响应式导航栏组件

Browse Source
This commit is contained in:
luorijun
2025-06-18 17:57:12 +08:00
parent ba7d22168d
commit 39f30fcfa9
29 changed files with 742 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/test/page.tsx Normal file
View File

@@ -0,0 +1,54 @@
import Wrap from '@/components/wrap'
import {NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport} from '@radix-ui/react-navigation-menu'
import Link from 'next/link'
export default function TestPage() {
return (
<div className="fixed left-0 top-0 w-full">
<Wrap>
<NavigationMenu>
<div className="flex">
<div className="flex-1">
</div>
<div className="flex-1">
<NavigationMenuList className="flex justify-around">
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link href="/test">Test 0 </Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>
Test 1
</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink asChild>
<Link href="/test">Test 1 Content</Link>
</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>
Test 2
</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink asChild>
<Link href="/test">Test 2 Content</Link>
</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild>
<Link href="/test">Test 3 </Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuIndicator className="w-full h-1 bg-green-500"/>
</NavigationMenuList>
</div>
</div>
<NavigationMenuViewport className="bg-blue-100"/>
</NavigationMenu>
</Wrap>
</div>
)
}