智能锚点定位
将浮动元素锚定在另一个元素旁边,同时通过避免冲突确保其保持在视图中。 这使你可以最佳地定位工具提示、弹出框、或下拉菜单。
基本 UI
一个建立在 Floating UI 之上的新型无头 React 组件库,它提供了一组无头浮动组件(以及其他组件)——工具提示、弹出窗口、菜单、选择、预览卡、对话框、toast 等。
与 React 交互
使用 Floating UI 的 React 组件和钩子工具包构建高级浮动组件。
工具提示
悬停或聚焦时显示与锚点元素相关信息的浮动元素。
弹出框
单击时显示锚定的交互式对话框的浮动元素。
选择菜单
单击时时显示可供选择的选项列表的浮动元素。
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