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

智能锚点定位

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

位置

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

单击圆点
CodeSandbox

移位

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

滚动容器
CodeSandbox

翻转

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

向下滑动
CodeSandbox

尺寸

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

滚动容器
CodeSandbox

箭头

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

滚动容器
CodeSandbox

基本 UI

一个建立在 Floating UI 之上的新型无头 React 组件库,它提供了一组无头浮动组件(以及其他组件)——工具提示、弹出窗口、菜单、选择、预览卡、对话框、toast 等。

与 React 交互

使用 Floating UI 的 React 组件和钩子工具包构建高级浮动组件。

工具提示

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

弹出框

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

选择菜单

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

组合框

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

下拉菜单

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

对话框

浮动窗口覆盖在 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 安装。

立即开始