floating-ui 快速上手3 行代码搞定浮动元素定位【免费下载链接】floating-uiA JavaScript library to position floating elements and create interactions for them.项目地址: https://gitcode.com/GitHub_Trending/fl/floating-uifloating-ui 是一个轻量级的浮动元素定位库。它把 tooltip、下拉菜单、弹出框这类浮层锚定到按钮旁并在贴近视口边缘时自动挪开避免被裁掉。React 版本还附带 hover、点击、键盘等交互钩子。为什么让 tooltip 贴着按钮这么难绝对定位的元素摆一次容易摆住很难。三类坑最常见碰撞浮层贴近视口边缘被裁掉跟随滚动、缩放窗口都会让位置漂移可访问性键盘焦点和悬停状态难管理floating-ui 的核心是computePosition一个根据锚点元素算出浮层坐标的异步函数。位置调整交给中间件middleware——说白了就是一个个改坐标的小函数flip在浮层溢出时换个方向摆放shift把它滑回可视范围内。边缘情况不用自己写。⚡ 3 步把 tooltip 定位到按钮旁不依赖框架。先装原生版本执行npm install floating-ui/dom然后计算坐标并写回样式const {x, y} await computePosition(reference, floating, { placement: bottom, middleware: [flip(), shift()], }); Object.assign(floating.style, { left: ${x}px, top: ${y}px, });需要跟随滚动和窗口变化时再加autoUpdate即可它会在恰当的时机自动重算位置。在 React 里接入浮层交互floating-ui/react把定位与交互都封装成了 hooks。useFloating负责算坐标再叠上useHover、useClick、useDismiss就是一个完整的工具提示。做下拉菜单时加useListNavigation方向键导航也有了。只想要定位、不要交互的话有体积更小的floating-ui/react-dom。const {refs, floatingStyles, context} useFloating({ placement: bottom, }); const {props: refProps} useHover(context);核心定位逻辑在 packages/core/React 交互实现见 packages/react/。一套定位库覆盖多个平台Web 原生floating-ui/domReactfloating-ui/reactVuefloating-ui/vueReact Nativefloating-ui/react-nativeCanvas/WebGL基于floating-ui/core自写适配层跨框架的差异只在适配层定位与碰撞行为保持一致。做可访问的 React 浮层或想在无框架项目里对齐一个 tooltip这套浮动定位方案可以直接拿来用。【免费下载链接】floating-uiA JavaScript library to position floating elements and create interactions for them.项目地址: https://gitcode.com/GitHub_Trending/fl/floating-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考