floating-ui是一个专门制造Tooltip、popover之类的支撑库。

文档阅读

  • Getting Started

    • 此料库提供以下关键功能
      • Anchored positioning primitives
        • 通过JS提供锚定位置功能，并支持冲突检测
      • User interaction primitives
        • 遵循WAI-ARIA
        • 此功能只支持React DOM
    • Install
      • Vanilla DOM positioning
        • npm install @floating-ui/dom
      • React DOM positioning
        • npm install @floating-ui/react-dom
      • React DOM interactions and positioning
        • npm install @floating-ui/react-dom-interactions
      • React Native positioning
        • npm install @floating-ui/react-native
      • Canvas or other platforms
        • npm install @floating-ui/core
    • CDN
      • ESM
        • import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.0.4/+esm';
      • UMD
        • <script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.0.1"></script>
        • <script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.0.4"></script>
      • Package entry points
        • 用process.env.NODE_ENV来判断是否开发环境，开发环境会打出多余的log
          • 文中带了一个Rollup 的示例

  • Tutorial

    • Before proceeding
      • 只提供底层功能，提供锚定的定位，可以看作是对CSS特性的【缺陷修补】
        • 没有预置的样式
        • 用户交互仅提供给React用户
      • Setting up
        • 创建一个按键以及突示
      • Styling
        • 给突示上样式
      • Making the tooltip “float”
        • 将图示的position设为absolute，其widt设为max-content
      • Positioning
        • 使用computePosition来计算按键和突示的位置关系
          • 此方法返回一个Promise，可以使用then来计算样式
      • Placements
        • 默认为’bottom'，可以在computePosition指定其他
          • 有-start和-end位置变化方式
      • Our first problem
        • 如果使用top摆放，可能看不见突示
      • Middleware
        • Middleware是一片段代码，在computePosition()返回结果之前执行
        • flip()middleware可以在合适的情况下自动使用’bottom'
        • Shift middleware
          • 如果突示里面塞了太多内容，显示可能会超出视界
          • shift()可以自动帮助处理此情况
          • shift()还支持填充等参数
        • Offset middleware
          • offset()可以增加按键和突示之间的偏移
        • Arrow middleware
          • 增加给突示增加指向部分
          • arrow()提供了middlewareData，可以从中得到箭头相应的坐标
      • Functionality
        • 决定好图示的样式之后，就可以为其添加用户交互功能了
      • Misc
        • autoUpdate可以提供在滚动以及缩放的时候自动更新功能

  • autoUpdate

    • 配置浮动元素的自动更新
      • 返回一个cleanup调用体，须在浮动窗口消失时调用
    • Options
      • ancestorScroll
      • ancestorResize
      • elementResize
      • animationFrame

  • Motivation

    • Comparison with Popper-style API
      • https://popper.js.org/是当前最流行的此方面的开源库，在这之前是https://tetherjs.dev/docs/welcome/
      • Floating UI是针对Popper v2的演进
      • 差异是
        • 跨平台，能够应用于web以外的平台
        • 尺寸更小，支持摇树
        • 用编口更直观
        • 控制反转，用于解决computeStyles以及applyStyles所带来的问题
        • 提供扩展性
        • 更多特性
        • 更可预测
        • 采用TypeScript

  • Migrating from Popper 2 to Floating UI

    • 略

博文关注

https://floating-ui.com/docs/getting-started https://blog.logrocket.com/popper-vs-floating-ui/ https://juejin.cn/post/7131632210813124638