用于定位 浮动元素 并为其创建交互的 JavaScript 库。

智能锚点定位

将浮动元素锚定在另一个元素旁边,同时通过避免冲突确保其保持在视图中。 这使你可以最佳地定位工具提示、弹出框、或下拉菜单。

位置

将浮动元素相对于另一个元素放置。

单击圆点
CodeSandbox

移位

移动浮动元素以使其保持在视图中。

滚动容器
CodeSandbox

翻转

改变浮动元素的位置以使其保持在视图中。

向下滑动
CodeSandbox

尺寸

改变浮动元素的大小以使其保持在视图中。

滚动容器
CodeSandbox

箭头

动态定位中心感知的箭头元素。

滚动容器
CodeSandbox

与 React 交互

使用 React 构建你自己的 Floating UI 组件。 从简单的工具提示到选择菜单,你可以完全控制,同时确保完全可访问的 UI 体验。

工具提示

悬停或聚焦时显示与锚点元素相关信息的浮动元素。

弹出框

单击时显示锚定的交互式对话框的浮动元素。

选择菜单

单击时时显示可供选择的选项列表的浮动元素。

组合框

结合了输入和可供选择的可搜索选项列表的浮动元素。

下拉菜单

显示执行操作的按钮列表的浮动元素。

对话框

浮动窗口覆盖在 UI 上,使其下方的内容渲染惰性。

可摇树优化且与平台无关

除了 Web、React DOM、React Native 和 Vue 的官方绑定之外,Floating UI 还支持 <canvas>,并且每个模块都可以由打包器 完全进行摇树优化

computePosition()0.6 kB
shift()+0.6 kB
limitShift()+0.2 kB
flip()+0.8 kB
hide()+0.2 kB
offset()+0.1 kB
arrow()+0.5 kB
autoPlacement()+0.4 kB
size()+0.3 kB
inline()+0.6 kB
autoUpdate()+0.3 kB
DOM 平台+2.5 kB

安装

通过你的包管理器或 CDN 开始玩耍。

包管理器

使用 npm、Yarn 或 pnpm 安装。

立即开始

CDN

使用 jsDelivr CDN 安装。

立即开始