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/中测试文件。重新加载页面查看您的变化。
网友评论