LeiBox

日历惯性拖拽

日程卡片随拖拽速度拉伸、跟随,并在浮动状态中切换聚焦内容。

拖拽与聚焦六框架TypeScript

演示

按住日程卡片,拖到其他日期或时间。可打开完整预览,在更大的日历中体验。

打开完整预览

安装

npm install react react-dom

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

依赖

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

npm install react react-dom

代码

VelocityFocusDrag.tsx
正在加载代码…

使用示例

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

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

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

复刻提示词

正在加载提示词…

API 参考

属性类型默认值
options.height

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

number720
options.reducedMotion

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

boolean
LeiBox

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

© 2026 LeiBox,由 雷师傅

隐私政策

好发现,值得被收藏

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

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

联系与投稿

内容类型