Skip to content

动机

¥Motivation

本页旨在解释为什么创建这个新包。

¥This page aims to explain why this new package was created.

看看新的 Popper v2 到 Floating UI 迁移指南。

¥Check out the new Popper v2 to Floating UI migration guide.

与 Popper 风格 API 的比较

¥Comparison with Popper-style API

Popper 是目前最流行的浮动元素定位开源解决方案，创建于 2016 年。在此之前是 Tether。

¥Popper is currently the most popular open source solution to position floating elements, created in 2016. Prior to that it was Tether.

Floating UI 是 Popper v2 的演变，旨在成为类似于 CSS 的较底层别解决方案，你可以在其中逐步添加属性以实现所需的定位行为。迁移指南也详细解释了这一点。

¥Floating UI is the evolution of Popper v2, and aims to be a lower-level solution similar to CSS in which you progressively add properties to achieve desired positioning behavior. The migration guide also explains this in detail.

差异总结如下：

¥The differences are summarized as follows:

  • 📱 跨平台：Floating UI 是跨平台的，而 Popper 只能使用 DOM 在 Web 上运行。Floating UI 通过正确的界面逻辑支持 React Native、Canvas、WebGL 等。

    ¥📱 Cross-platform: Floating UI is cross-platform, while Popper only runs on the web using the DOM. Floating UI supports React Native, Canvas, WebGL, and more with the right interface logic.

  • 🪶 较小尺寸：代码更小、更优化，默认情况下一切都是模块化的，因此可以进行树摇动。默认情况下，Popper 不可进行树摇动，即使启用树摇动格式，它也不是那么有效。使用 Floating UI，如果你不需要所有高级检查，你甚至可以将 DOM 平台 更改得更小以节省更多尺寸。

    ¥🪶 Smaller size: The code is smaller and more optimized, and everything is modular by default, and thus tree-shakeable. Popper is not tree-shakeable by default, and even when enabling the tree-shaking format it’s not as effective. With Floating UI, you can even change the DOM platform to be smaller to save even more size if you don’t need all the advanced checks.

  • 🎛️ 更直观的 API：Popper 的 API 很冗长，并且鼓励修改，这可能会导致配置困难且难以调试。Floating UI 纯粹，使用更符合人体工学。

    ¥🎛️ More intuitive API: Popper’s API is verbose and encourages mutation, which can be awkward to configure and hard to debug. Floating UI is pure with more ergonomic usage.

  • 🕹️ 控制反转：由于 computeStyles 和 applyStyles 的有态度的默认设置，围绕波普尔中 computeStyles 和 applyStyles 的性质存在许多问题。Floating UI 只是一个为你返回一些未四舍五入的数字的函数，你可以随意使用。

    ¥🕹️ Inversion of control: There were many issues opened surrounding the nature of computeStyles and applyStyles in Popper due to their opinionated defaults. Floating UI is just a function that returns some unrounded numbers for you, which you can use as you please.

  • 💪 改进的可扩展性：Popper 中的修饰符很难编写。requires、requiresIfExists、phase，需要检查其他修饰符的数据以编写正确的逻辑等。Floating UI 删除了所有这些，使编写自定义中间件变得更加容易。数组的顺序由你控制和配置。新架构还支持对中间件生命周期进行更精细的控制。

    ¥💪 Improved extensibility: Modifiers in Popper are hard to write. requires, requiresIfExists, phase, needing to check for other modifiers’ data to write the correct logic, etc. Floating UI removes all of it, making it much easier to write custom middleware. The order of the array is yours to control and configure. The new architecture also supports finer control over the middleware lifecycle.

  • 💎 更多功能：由于新的架构，新功能更容易支持，并且 Floating UI 已经提供了更多功能，例如 size() 和 inline() 中间件。重要的是，如果你不使用新功能，它们就会被淘汰，因此打包器用户不会产生规模成本。

    ¥💎 More features: New features are easier to support thanks to the new architecture, and Floating UI already offers more, like the size() and inline() middleware. Importantly, new features are tree-shaken away if you don’t use them, so there’s no size cost for bundler users.

  • 🔮 更可预测：Floating UI 不会执行任何 “magic” 操作，例如预配置中间件或添加事件监听器来更新位置。这意味着你可以从最基本的级别开始使用 Floating UI，而无需启用任何中间件。你可以根据需要添加功能，这使得库更具可预测性。

    ¥🔮 More predictable: Floating UI doesn’t perform any “magic”, like pre-configuring middleware or adding event listeners to update the position. This means you use Floating UI starting at its most fundamental level, without any middleware enabled already. You add features as you need them, which makes the library more predictable.

  • 🔒 默认强类型：TypeScript 是一等公民，因为代码库是用它编写的。Popper 默认情况下是松散类型的，因此你不会获得自动补齐提示以及类型系统的其他好处。

    ¥🔒 Strongly typed by default: TypeScript is a first-class citizen as the codebase is written in it. Popper is loosely typed by default, so you don’t get autocomplete hints among other benefits of the type system.

Floating UI 旨在成为组件库（如 Bootstrap 或 MUI）的理想解决方案，因为它具有底层且不固执的性质。

¥Floating UI aims to be an ideal solution for component libraries, like Bootstrap or MUI, due to its low-level and unopinionated nature.