floating-ui_一个轻量前端工具包，用于定位浮动元素，同时智能地将它们保持在视图中

Web前端开发网

fly63.com

首页资源工具文章教程栏目

floating-ui

网站地址:https://floating-ui.com/

GitHub:https://github.com/floating-ui/floating-ui/tree/v2.2.0

网站描述:一个轻量前端工具包，用于定位浮动元素，同时智能地将它们保持在视图中

访问官网

GitHub

Floating UI 一个轻量前端工具包，用于定位浮动元素，同时智能地将它们保持在视图中。工具提示、弹出框、下拉菜单、菜单等功能

安装

npm或yarn

# With npm
npm i @popperjs/core

# With Yarn
yarn add @popperjs/core

cdn方式

<!-- Development version -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>

<!-- Production version -->
<script src="https://unpkg.com/@popperjs/core@2"></script>

使用

最简单的入门方法是从unpkg CDN导入，该CDN包含其所有功能。比如：

<!DOCTYPE html>
<title>Popper example</title>

<style>
  #tooltip {
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
  }
</style>

<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>

<script src="https://unpkg.com/@popperjs/core@^2.0.0"></script>
<script>
  const button = document.querySelector('#button');
  const tooltip = document.querySelector('#tooltip');

  // Pass the button, the tooltip, and some options, and Popper will do the
  // magic positioning for you:
  Popper.createPopper(button, tooltip, {
    placement: 'right',
  });
</script>

当然你也可以通过引入的方式使用它：

import { createPopper } from '@popperjs/core';

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

// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
createPopper(button, tooltip, {
  placement: 'right',
});

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/3616