入门
¥Getting Started
Floating UI 是一个库，可帮助你创建 “浮动” 元素，例如工具提示、弹出窗口、下拉菜单等。
¥Floating UI is a library that helps you create “floating” elements such as tooltips, popovers, dropdowns, and more.
提供了两个主要功能：
¥Two key features are provided:
定位
¥Positioning
Floating UI 提供了一个定位功能工具包，可让你将绝对定位的浮动元素牢固地锚定在给定参考元素旁边。例如，即使页面滚动，弹出窗口也会浮动在其触发按钮旁边并保持锚定。
¥Floating UI provides a toolkit of positioning features that let you robustly anchor an absolutely-positioned floating element next to a given reference element. For example, a popover floats next to and remains anchored to its triggering button, even while the page scrolls.
它还提供了避免与视口冲突的功能，因为绝对定位通常会导致不必要的溢出，具体取决于定位参考的位置。
¥It also provides features to avoid collisions with the viewport, as absolute positioning often leads to unwanted overflow depending on the location of the positioning reference.
互动
¥Interactions
浮动元素具有多种不同且复杂的交互作用。例如，工具提示的交互（悬停或聚焦以打开标签）与组合框（聚焦和键入以选择选项）几乎没有共同之处，尽管它们都是 “浮动” 并将自身锚定到触发器。
¥Floating elements have a wide range of different and complex interactions. For example, a tooltip’s interactions (hover or focus to open a label) has little in common with a combobox (focus and type to select options) despite them both “floating” and anchoring themselves to a trigger.
Floating UI 的 React 包提供了一个由原始 Hooks 和组件组成的工具包，可让你构建具有复杂且可访问交互的可重用浮动组件。
¥Floating UI’s React package offers a toolkit of primitive Hooks and components that let you build reusable floating components with complex and accessible interactions.
设计
¥Design
Floating UI 被设计为高度模块化，因此一切都尽可能进行树形调整。你可以根据需要使用尽可能多或尽可能少的库，并且你的包大小将会适应。
¥Floating UI is designed to be highly modular, so everything is as tree-shakeable as possible. You can use as much or as little of the library as you want, and your bundle size will adapt.
Floating UI 的设计也非常灵活且可修改。你可以将它与任何框架一起使用，甚至可以在没有框架的情况下使用，或者在 React Native 等其他平台上使用。你还可以根据自己的需求对其进行自定义，并且不会感到自己所能实现的目标受到限制。
¥Floating UI is also designed to be flexible and hackable. You can use it with any framework, or even without a framework, or on other platforms like React Native. You can also customize it to your needs, and won’t feel limited in what you can achieve.
安装
¥Install
要安装 Floating UI，你可以使用 npm 或 CDN 等包管理器。不同的平台有不同的版本。
¥To install Floating UI, you can use a package manager like npm or a CDN. There are different versions available for different platforms.
普通
¥Vanilla
在 web 上使用普通 JavaScript（dom 指的是 文档对象模型 来处理 HTML/SVG 元素）。
¥Use on the web with vanilla JavaScript
(dom refers to the
Document Object Model
to work with HTML/SVG elements).
npm install @floating-ui/domReact
与 React 一起使用。
¥Use with React.
npm install @floating-ui/reactReact Native
与 React Native 一起使用。
¥Use with React Native.
npm install @floating-ui/react-nativeVue
与 Vue 一起使用。
¥Use with Vue.
npm install @floating-ui/vueCanvas 或其他平台
¥Canvas or other platforms
如果你的目标平台不是普通 DOM (web)、React 或 React Native，你可以创建自己的 平台。这允许你支持 Canvas/WebGL 或其他可以运行 JavaScript 的平台。
¥If you’re targeting a platform other than the vanilla DOM (web), React, or React Native, you can create your own Platform. This allows you to support things like Canvas/WebGL, or other platforms that can run JavaScript.
npm install @floating-ui/coreCDN
Floating UI 可以使用 ESM 或 UMD 格式通过 CDN 加载。
¥Floating UI can be loaded via CDN using ESM or UMD format.
ESM
import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.3/+esm';UMD
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.3"></script>所有导出将在 window.FloatingUIDOM 上可用。
¥All exports will be available on window.FloatingUIDOM.
从 Popper 迁移
¥Migration from Popper
如果你要从 Popper v2 转到 Floating UI，则有 此处提供迁移指南。
¥If you are coming to Floating UI from Popper v2, there is a migration guide available here.