Floating UI介绍

Floating UI是一个低级库，用于定位浮动元素，如工具提示、弹出窗口、下拉菜单等。因为这些类型的元素漂浮在UI的顶部，而不会中断内容的流动，所以在定位它们时就出现了挑战。

Floating.jpg

在给定的参考元素旁边旁边出现在用户最佳的视图中。功能包括预防溢出（或碰撞意识），放置翻转等等。

小:600字节核心，高度模块化架构，用于摇树
** 低级:超粒度控制定位行为*
纯:可预测的，无副作用的行为
** 可扩展:强大的中间件系统**
平台无关*:运行在任何提供测量api的JavaScript环境，包括web和React Native

Installation

To use it on the web:

npm install @floating-ui/dom

yarn add @floating-ui/dom

Quick start

import {computePosition} from '@floating-ui/dom';

const referenceElement = document.querySelector('#button');
const floatingElement = document.querySelector('#tooltip');

function applyStyles({x = 0, y = 0, strategy = 'absolute'}) {
  Object.assign(floatingElement.style, {
    position: strategy,
    left: `${x}px`,
    top: `${y}px`,
  });
}

applyStyles();

computePosition(referenceElement, floatingElement, {
  placement: 'right',
}).then(applyStyles);

Visit the docs for detailed information.

React

• React DOM
• React Native (*experimental)

Components

目前，浮动UI专注于定位浮动元素，但正在开发一个包，该包公开更高级的原语，以便更容易地构建这些元素。

Inspiration

浮动UI是这个领域的库的进化，就像Popper和Tether，由前者的合著者和Tippy.js的创建者开发。很多代码是从Popper 2的代码库中分叉出来的，并适应了新的API。

Contributing

这个项目是一个使用npm工作区用TypeScript编写的monorepo。该网站使用Next.js SSG和Tailwind CSS进行样式化

*使用`npm install'在根目录中安装依赖项

*root中的npm Run Dev将启动@floating-ui/dom开发

http：// localhost：1234/spec`的视觉测试。你可以四处摆弄

在packages/dom/test/visual/spec/中测试文件。重新加载页面查看您的变化。

License