如何使用浮动 UI 创建工具提示

在软件开发中，良好的用户体验通常是构建软件时要考虑的最重要的事情之一。您不必让用户猜测如何使用您的软件应用程序；这可能会影响您的应用程序的可用性，这不是您想要的。

大多数用户都很不耐烦，他们可能没有足够的耐心去探索和了解您的应用程序是如何工作的，但是通过工具提示，您可以像导游一样轻松地引导他们浏览您的应用程序。

今天，我们将讨论如何使用浮动 UI 轻松构建工具提示。

工具提示

工具提示是小但信息丰富的弹出窗口，当用户将鼠标悬停在、单击或聚焦于某个元素时会出现。某些工具提示可能不需要用户触发它们；相反，它们可以在用户第一次访问您的应用程序时充当指南，自动提供上下文和说明。

浮动界面

浮动 UI 是一个令人惊叹的库，它使您能够创建很棒的工具提示，可以根据屏幕尺寸轻松调整其位置。您不必担心响应能力，浮动 UI 会为您处理这个问题。

有时，创建高效的工具提示可能会很耗时，它涉及到一些您可能会觉得无聊的步骤，这就是为什么您必须使用像 Floating UI 这样的库。

理解本文所需的先决条件

1. React js 基础知识。
2. 对 javascript 的基本了解。
3. 您的计算机上必须安装 Node js（React 应用程序才能运行）
4. 最后，像 Google Chrome 这样的网络浏览器。

让我们安装浮动 UI

我们必须在 React js 应用程序中安装 Floating UI。我们可以通过运行此命令来做到这一点。

npm install @floating-ui/react

我们需要从 Floating UI 库中导入大量函数，这些函数将使我们能够轻松创建工具提示。

`
导入{
使用点击，
使用浮动，
使用互动，
翻转，
偏移量，
使用关闭，
} 来自 '@floating-ui/react';

`

解构使用Floating

`
常量 {
参考文献：calendar1Refs，
floatStyles：calendar1FloatingStyles，
上下文：calendar1Context，
} = useFloating({
打开： isOpen1,
onOpenChange: setIsOpen1,
位置：'底部'，
中间件：[
翻转（{
FallbackPlacements: ['右'],
}),

偏移量({ mainAxis: 20, crossAxis: 70 }),
],
});
`

参考文献

这使我们能够轻松地将工具提示与其参考连接起来。我们的参考应该是这样的。

<i
      className="fa-light fa-calendar cursor-pointer text-gray-500"
            ref={calendar1Refs.setReference}
           ></i>

我们的工具提示应该如下所示。

{isOpen1 && (
            <div
             className="absolute z-10 bg-white"
             ref={calendar1Refs.setFloating}

            >
             <Calendar onChange={handleSelectDate1} />
            </div>
           )}The difference here is that our tooltip reference has “setReference” while our tooltip has “setFloating”. This will enable them to be connect, making sure that the tooltip floats around it`s reference.

浮动样式

floatingStyles 是一个包含 CSS 样式的对象，它确定浮动元素（如工具提示）相对于其参考元素的确切位置和尺寸。

{isOpen2 && (
          <div
           className="z-[9999]"
           ref={calendar1Refs.setFloating}
          >



<p><strong>Context</strong></p>

<p>In Floating UI, context (like calendar1Context in this case) provides a way to manage and share state and interactions across multiple hooks. This helps us to share events like click, hover etc. It also helps to dismiss the interactions seamlessly, ensuring that each tooltip or floating element behaves consistently.<br>
</p>

<pre class="brush:php;toolbar:false">const click1 = useClick(calendar1Context);
 const dismissCalendar1ToolTip = useDismiss(calendar1Context);

开放

open 属性对于工具提示的可见性非常重要。它帮助我们根据组件的内部状态管理工具提示的可见性。

我们首先创建一个默认值为 false 的 useState，以便我们可以隐藏工具提示，直到用户单击它。此 useState 跟踪工具提示当前是否打开。

const [isOpen, setIsOpen] = useState(false);

onOpenChange

这个回调帮助我们更新setIsOpen值。因此，每当用户点击或触发事件时，我们都会将 isOpen 中的 false 值设置为 true，反之亦然。

放置

这有助于确定相对于其引用的工具提示的放置位置。我们可以决定将工具提示放置在这些位置中的任何一个；

1. 底部
2. 底端
3. 底部开始
4. 左
5. 左端
6. 左开始
7. 对
8. 右端
9. 右开始
10. 顶
11. 高端
12. 顶级开始

翻转

如果指定方向没有足够的空间，中间件数组内的翻转中间件会自动调整浮动元素的位置。在这里，如果下面没有足够的空间，它将尝试使用后备放置（['bottom-end']）来定位它。我们可以根据可用空间选择任何我们想要的位置。

middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

    ],

偏移

该中间件在引用和浮动元素之间创建间距。 mainAxis: 20 在主方向上创建 20px 间隙（在本例中位于参考下方），而 crossAxis: 50 沿垂直轴创建 50px 偏移。

middleware: [
   offset({ mainAxis: 20, crossAxis: 50 }),
  ],

这就是配置的样子

const [isOpen, setIsOpen] = useState(false);
 const {
  refs: calendar1Refs,
  floatingStyles: calendar1FloatingStyles,
  context: calendar1Context,
 } = useFloating({
  open: isOpen,
  onOpenChange: setIsOpen,
  placement: 'bottom-end',

  middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

   offset({ mainAxis: 20, crossAxis: 50 }),
  ],
 });

 const click = useClick(calendar1Context);
 const dismissImageToolTip = useDismiss(calendar1Context);

 const {
  getReferenceProps: calendar1TooltipReference,
  getFloatingProps: calendar1TooltipFloatingProps,
 } = useInteractions([click, dismissImageToolTip]);

演示

点击此链接观看演示视频。

从视频中，您可以清楚地看到，如果空间不足以容纳我们的工具提示，它会调整其位置。它使用我们定义的fallbackPlacements的位置。

结论

浮动 UI 提供了一种强大而灵活的方式来在 React 应用程序中实现工具提示。凭借其自动定位和丰富的自定义选项，您可以创建工具提示来增强应用程序的用户体验，同时在不同设备和屏幕尺寸上保持可靠的功能。

它涉及很多功能和对象，例如； refs、floatingStyles、context、用于状态管理的 useState、onOpenChange、放置、翻转和偏移。

通过遵循本指南，您现在已经掌握了在 React 应用程序中实现响应式且用户友好的工具提示的知识。尝试不同的配置和中间件，为您的用户创建完美的工具提示体验。

编码愉快？

以上是如何使用浮动 UI 创建工具提示的详细内容。更多信息请关注PHP中文网其他相关文章！