LeiBox

玻璃标签栏展开菜单

四项磨砂标签栏连续展开为六宫格菜单,选中块通透滑动,加号旋转为关闭按钮。

面板形变六框架TypeScript

演示

点击标签切换选中项,按 + 展开六宫格菜单。支持键盘和触屏,菜单操作使用本地演示状态。

打开完整预览

安装

npm install react react-dom

将代码包中的四个文件放在同一目录。样式和字体已包含,由所选框架的构建工具编译入口文件。

依赖

上方安装命令会自动添加这些依赖。如果手动复制源码,请自行安装。

npm install react react-dom

代码

GlassTabMenu.tsx
正在加载代码…

使用示例

App.tsx
import { GlassTabMenu } from "./GlassTabMenu";

export default function App() {
  return <GlassTabMenu />;
}

共用原生核心处理交互,各框架独立挂载、更新和销毁实例。

复刻提示词

正在加载提示词…

API 参考

属性类型默认值
options.height

场景的建议高度,内容较多时布局会相应延展。

number1080
options.reducedMotion

覆盖系统的减少动态效果偏好,同时保留完整交互状态。

boolean
LeiBox

雷师傅的 UI 灵感与组件收藏箱,收集值得留下的界面、交互和设计细节。

© 2026 LeiBox,由 雷师傅

隐私政策

好发现,值得被收藏

发来 UI 参考、组件链接或收藏建议。请附上原始来源,让创作者的付出被看见。

投稿内容经查看后再收录。

联系与投稿

内容类型