Floating UI - Create tooltips, popovers, dropdowns, and more (floating-ui.com)

智能锚定位

将浮动元素锚定在另一个元素旁边，同时通过避免碰撞确保它保持在视野中。这使您可以以最佳方式定位工具提示、弹出窗口或下拉列表。

开始使用

浮动 UI 是一个库，可帮助您创建“浮动” 工具提示、弹出框、下拉列表等元素。

提供了两个关键功能：

定位

浮动 UI 提供了一个定位功能工具包，让您可以稳健地锚定绝对定位的浮动元素在给定的引用元素旁边。例如，弹出窗口会浮动并保持锚定在其触发按钮上，即使页面滚动。

它还提供了避免与视口发生冲突的功能，因为绝对定位通常会导致不必要的溢出取决于定位参照的位置。

相互作用

浮动元素具有多种不同和复杂的相互作用。例如，工具提示的交互（悬停或焦点打开标签）与组合框几乎没有共同之处（聚焦和键入以选择选项），尽管它们都是“浮动的” 并将自己锚定在扳机上。

Floating UI 的 React 包提供了一个原始 Hooks 工具包以及允许您构建可重用浮动组件的组件具有复杂且可访问的交互。

设计

浮动 UI 被设计为高度模块化，因此一切都是尽可能摇晃树木。您可以尽可能多地或尽可能少地使用随心所欲地使用库，您的捆绑包大小将随之调整。

浮动 UI 也被设计为灵活且可破解。您可以将它与任何框架一起使用，甚至在没有框架的情况下使用，或者在其他平台，如 React Native。您也可以将其自定义为您的需求，并且不会在您可以实现的目标上感到受到限制。

安装

要安装浮动 UI，可以使用 npm 或一个 CDN。有不同的版本可用于不同的版本平台。

香草

用于蹼使用普通 JavaScript （指 dom文档对象模型使用 HTML/SVG 元素）。

npm install @floating-ui/dom

反应

与反应.

npm install @floating-ui/react

注意

存在上述软件包的较小替代方案，它仅包装没有任何定位功能相互作用：@floating-ui/dom

# Positioning only (smaller size)npm install @floating-ui/react-dom

React 原生

与React 原生.

npm install @floating-ui/react-native

Vue 的

与Vue 的.

npm install @floating-ui/vue

Canvas 或其他平台

如果您的目标是原版 DOM （web）以外的平台， React 或 React Native，您可以创建自己的平台.这使您可以支持事物比如 Canvas/WebGL，或其他可以运行 JavaScript 的平台。

npm install @floating-ui/core

CDN域名

浮动 UI 可以使用 ESM 或 UMD 格式通过 CDN 加载。

环境安全管理

import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.7/+esm';

UMD的

<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.6.4"></script><script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.7"></script>

所有出口将在 window.FloatingUIDOM.

从 Popper 迁移

如果你从 Popper v2 来到 Floating UI，有一个此处提供迁移指南.

[

](https://floating-ui.com/docs/tutorial)