LeiBox

弹性面板缩放

把手靠近时显现,拖动时同向弯曲;超过面板宽度边界后弹性拉伸,松手回弹。

拖拽与聚焦六框架TypeScript

演示

拖动面板左边缘调整宽度。聚焦后可用方向键、Home 或 End;双击或按 Escape 重置。

打开完整预览

安装

npm install react react-dom

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

依赖

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

npm install react react-dom

代码

ElasticPanelResize.tsx
正在加载代码…

使用示例

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

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

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

复刻提示词

正在加载提示词…

API 参考

属性类型默认值
options.height

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

number1000
options.reducedMotion

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

boolean
LeiBox

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

© 2026 LeiBox,由 雷师傅

隐私政策

好发现,值得被收藏

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

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

联系与投稿

内容类型