如何使用浮動 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中文網其他相關文章！