智能锚点定位
将浮动元素锚定在另一个元素旁边,同时通过避免冲突确保其保持在视图中。 这使你可以最佳地定位工具提示、弹出框、或下拉菜单。
与 React 交互
使用 React 构建你自己的 Floating UI 组件。 从简单的工具提示到选择菜单,你可以完全控制,同时确保完全可访问的 UI 体验。
工具提示
悬停或聚焦时显示与锚点元素相关信息的浮动元素。
弹出框
单击时显示锚定的交互式对话框的浮动元素。
选择菜单
单击时时显示可供选择的选项列表的浮动元素。
Select...
组合框
结合了输入和可供选择的可搜索选项列表的浮动元素。
下拉菜单
显示执行操作的按钮列表的浮动元素。
对话框
浮动窗口覆盖在 UI 上,使其下方的内容渲染惰性。
可摇树优化且与平台无关
除了 Web、React DOM、React Native 和 Vue 的官方绑定之外,Floating UI 还支持 <canvas>
,并且每个模块都可以由打包器 完全进行摇树优化 :
computePosition()
+0.6 kBshift()
+0.6 kBlimitShift()
+0.2 kBflip()
+0.8 kBhide()
+0.2 kBoffset()
+0.1 kBarrow()
+0.5 kBautoPlacement()
+0.4 kBsize()
+0.3 kBinline()
+0.6 kBautoUpdate()
+0.3 kBDOM 平台
+2.5 kB