mobile-bottom-navbar - 适用于 Next.js 应用的移动端底部导航
为 Next.js 应用提供支持角色过滤、子菜单、手风琴式“更多”菜单、状态持久化和动画交互的移动端底部导航系统。
标签
更新于: 2026-10-04能力
典型输入
典型输出
该技能可以做什么
- 渲染移动端底部导航
- 按角色过滤导航
- 检测当前导航项
- 展开子菜单网格
- 显示手风琴式更多菜单
- 持久化导航状态
- 为导航交互添加动画
- 支持 iOS 安全区域
输入
- Next.js 应用
- 导航菜单结构
- 用户角色权限
- 当前路径
- 自定义图标
- 主题定制设置
输出
- 移动端底部导航界面
- 子菜单下拉界面
- 手风琴式更多菜单界面
- 当前导航指示器
- 持久化的导航状态
- 响应式布局变化
要求
- Next.js 14 或更高版本
- App Router
- TypeScript
- Zustand
- Framer Motion
- lucide-react
- clsx 和 tailwind-merge
- shadcn/ui Sheet 组件
- shadcn/ui Accordion 组件
- shadcn/ui Scroll Area 组件