Floating UI（浮层定位库)

Floating UI 是一个专门解决浮动元素定位问题的底层 JavaScript 库,前身是广为使用的 Popper.js,由 Federico Zivolo 等人主导演进而来。所谓浮动元素,指的是工具提示、下拉菜单、弹出框、悬浮卡片等需要相对某个参照元素精确摆放的界面部件。

概述

把一个浮层准确地放在按钮旁边看似简单,实际要应对视口边界、滚动容器、空间不足时翻转方向、被裁剪时移动位置等大量边界情况。Floating UI 把这些计算抽象为可组合的中间件(middleware),开发者按需拼装,便能得到稳健的定位结果。它不生成任何 UI,只负责计算坐标,因而体积小、可移植性强,可在浏览器、React Native 甚至 Canvas 场景使用。

核心原理

• 核心函数根据参照元素与浮层元素计算出建议的坐标与放置方向。
• 中间件机制:offset(偏移)、flip(翻转)、shift(平移避让)、arrow(箭头对齐)等按需组合。
• autoUpdate 在滚动或尺寸变化时自动重新计算,保持位置跟随。
• 提供 React 适配包与无障碍交互 Hook,便于构建可访问的浮层。

应用场景

凡是涉及浮层定位的组件都可能用到 Floating UI,例如工具提示、下拉选择、日期选择器、右键菜单、气泡引导等。许多组件库(包括部分无样式组件方案)在底层依赖它来保证浮层在各种布局下都不越界、不遮挡。

常见问题

问:Floating UI 和 Popper.js 是什么关系?答:Floating UI 是 Popper.js 的正式继任者,由同一批维护者重写,API 更现代、体积更小、适用平台更广,新项目推荐直接使用 Floating UI。

问:它会自带样式或箭头吗?答:不会。它只输出位置坐标和箭头应放置的坐标,具体的 DOM、样式和箭头元素需要开发者自行渲染。