前言
在开发现代 Web 应用程序时，响应式和动态 UI 经常是一个如何解决的问题。随着我们的应用程序变得越来越复杂，实现这一点的最佳方法往往难以找到。 不久前，我在 npm 包中发现了一种解决方案，叫做 @gustavnikolaj/frame-popper，它是一个小型工具，在 UI 布局、交互性和动态性方面提供了很大的帮助。 在本文中，我将向您介绍如何使用这个工具，并提供一些示例代码来帮助您了解如何在您的应用程序中使用它
简介
@gustavnikolaj/frame-popper 是一个 JavaScript 库，用于在 Web 应用程序中动态定位和对齐元素。它基于 Popper.js 库，但针对 iframe 和其他复杂布局进行了优化。该库的主要功能包括：
- 对于任何包含文本、图片或表格的 DOM 元素，动态的根据指定参考元素的位置，算出要在什么位置显示该元素，以及该元素与参考元素的对齐方式。
- 以及可选的其他配置选项，例如自定义进入/离开动画效果以及基于感应器的位置修复机制。
安装
要在您的应用程序中使用 @gustavnikolaj/frame-popper，您需要做以下两件事：
第一步：安装库
可以使用 npm 或 yarn 安装 @gustavnikolaj/frame-popper ：
npm install @gustavnikolaj/frame-popper
或者使用 yarn：
yarn add @gustavnikolaj/frame-popper
第二步：将库添加到您的代码中
您可以在 React 或 Vue 中轻松使用 @gustavnikolaj/frame-popper，但它也适用于任何编写 JavaScript 的 Web 应用。从您的代码中按如下方式导入库：
import FramePopper from '@gustavnikolaj/frame-popper';
用法
@gustavnikolaj/frame-popper 的使用非常简单，您可以根据需要配置一些选项。 我们将在下面的例子中讲述每一个不同的选项。
基本使用
以基础示例开始。 我们将创建一个包含一个链接和一个 div，当光标悬停在链接上时，它们将通过 @gustavnikolaj/frame-popper 对齐和定位。 我们需要在 React 中使用 @gustavnikolaj/frame-popper 作为可调用元素，并引用虚拟 DOM 中的链接和 div。
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
------ ----------- ---- ------------------------------
-------- --- -- -
----- ------- - -------------
----- ------ - -------------
------ -
-----
--
--------
-------------
-
------ ------
----
------------
------------------
------------------------
-
---- ------------------ ----- -------------
--------------
------
--
-在这个例子中，我们将 FramePopper 组件的 target 属性设置为链接的 ref 对象，这意味着链接本身将成为 FramePopper 在其下方显示的气泡的参考元素； placement 属性确定气泡应放置在参考元素的上方或下方； 最后，我们在内部定义要在气泡中显示的内容，并将其传递给 FramePopper。
根据内容自动设置大小
默认情况下，@gustavnikolaj/frame-popper 将气泡大小设置为与目标元素相同的大小。但有时您希望气泡的大小根据气泡内的内容自动调整大小。通过给组件传递 allowAutoSizing={true} 属性，可以轻松启用此行为
-- -------------------- ---- -------
------------
------------------
------------------------
---------------
-
---- -------------
-------- ----- -----------
-------- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- --------------
------
--------------在这个例子中，气泡将基于其内容自动调整大小，从而使其完全包含要在其中显示的文本和元素。
使用观察器进行定位修正
尽管@gustavnikolaj/frame-popper 会自动将元素定位在其参考元素的附近，但在复杂的布局中，有时可能需要调整这些位置。 对于这种情况，您可以使用 observers 配置选项，该选项允许您定义一个观察器函数，该函数将在组件每次重新渲染时运行，以对气泡的位置进行微调：
-- -------------------- ---- -------
------------
------------------
------------------------
------------
-
----- ------
------- -------
-------- -----
--------- -------------- ------------ --------------- -- -
-------------------- ---------- ----------------
------ ---------------
-
-
--
-
---- ------------------ ----- -------------
--------------在这个例子中，我们定义了一个观察器函数的数组，该数组包含一个“ dom”观察器，它会观察窗口，并在每次重新渲染组件时运行。 该观察器将其当前的位置和偏移量传递给一个回调函数，该回调函数可以对气泡位置进行微调并返回新的偏移量。 在这个例子中，我们简单地将原始偏移量返回回来，但您可以根据需要更改它。
配置动画效果
默认情况下，@gustavnikolaj/frame-popper 并不会提供任何动画效果以平滑地过渡气泡的进入或离开。您可以通过提供 Enter/Leave 动画类或者回调函数来配置动画效果来使其更加平滑。
-- -------------------- ---- ------- ----- ------- - ----------------------- ----- -------- - ------------------------ ----- ------------ - ---------- --------- -- ------- - ------- - --------- ------------ ------------------ ------------------------ ---------------------- - ---- ------------------ ----- ------------- --------------
在这个例子中，我们使用 animate 配置属性，通过传递一个进入/离开类的字符串来启用淡入/淡出动画。 animate 属性可以接受三种类型的值：
- 一个字符串容器，由空格分隔的 enter 和 leave 类，以适用于所有组件的总动画效果。
- 两个类名的 Function 以返回值在需要的时刻应用新效果，第一个参数的对象包含以下属性：
showing表示组件是否现在是显示的inPlace表示组件是否已经正确定位，例如 如果该组件被重新挂接，则它可能不是正确定位
- 对象，它的
enter和leave属性都可以是字符串或者函数。
自定义弹出元素的样式
您可能需要在气泡中的元素中添加自定义样式，以使其更适合您的应用程序主题。使用 innerClassName 定义类名，然后将它们附加到您希望自定义的元素上即可
<FramePopper
placement='bottom'
target={refLink.current}
innerClassName='test-styles'
>
<div ref={refDiv}>Hello Frame Popper!</div>
</FramePopper>在这个例子中，我们通过 innerClassName 属性传递一个自定义 CSS 类名。 在 FramePopper 中使用类名时，它将自动应用于气泡包含的所有元素中，以便您可以定义要更改的样式属性。
结论
@gustavnikolaj/frame-popper 是一个小型但强大的工具，适用于现代 Web 应用程序中的布局和交互性问题。本文提供了一些有用的示例代码和技巧，以帮助您在自己的应用程序中使用此库。无论您是使用 React、Vue 还是原始 JavaScript 进行编写，使用 @gustavnikolaj/frame-popper 都可以大大加快开发速度，并提供您需要的布局和界面元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f01817a403f2923b035bcca