ソフトウェア開発では、通常、ソフトウェアを構(gòu)築する際に優(yōu)れたユーザー エクスペリエンスを考慮することが最も重要なことの 1 つです。ソフトウェア アプリケーションの使用方法をユーザーに推測させる必要はありません。これはアプリケーションの使いやすさに影響を與える可能性があり、望んでいることではありません。

ほとんどのユーザーはせっかちで、アプリがどのように動作するかを探索して確認するほど忍耐力がないかもしれませんが、ツールチップを使用すると、ツアー ガイドのようにアプリケーションを簡単に案內(nèi)できます。

今日は、フローティング UI を使用してツールチップを簡単に作成する方法について説明します。

ツールチップ

ツールチップは、ユーザーが要素の上にマウスを移動したり、要素をクリックしたり、フォーカスしたりすると表示される、小さいですが有益なポップアップです。一部のツールチップでは、ユーザーがトリガーする必要がない場合があります。代わりに、ユーザーが初めてアプリケーションにアクセスするときのガイドとして機能し、コンテキストと手順を自動的に提供します。

フローティング UI

フローティング UI は、畫面サイズに基づいて位置を簡単に調(diào)整できる素晴らしいツールチップを作成できる素晴らしいライブラリです。応答性について心配する必要はありません。フローティング UI が自動的に処理します。

効率的なツールチップの作成には時間がかかり、退屈に感じるかもしれない手順がいくつか含まれるため、フローティング UI などのライブラリを使用する必要があります。

この記事を理解するために必要な前提條件

1. React js の基礎(chǔ)知識
2. JavaScript の基本的な理解
3. (React アプリケーションを?qū)g行するには) コンピューターに Node js がインストールされている必要があります
4. そして最後に、Google Chrome のような Web ブラウザです。

フローティング UI をインストールしましょう

React js アプリケーションに Floating UI をインストールする必要があります。このコマンドを?qū)g行することでそれを行うことができます。

npm install @floating-ui/react

フローティング UI ライブラリから多くの関數(shù)をインポートする必要があります。これらの関數(shù)を使用すると、ツールチップを簡単に作成できます。

`
インポート {
使用クリック、
useFloating、
useInteractions、
フリップ、
オフセット、
useDismiss、
} '@floating-ui/react' から;

`

デストラクチャ useFloating

`
const {
參照: カレンダー1參照、
floatStyles: Calendar1FloatingStyles,
コンテキスト: カレンダー1コンテキスト、
} = useFloating({
開く: isOpen1,
onOpenChange: setIsOpen1,
配置: 'ボトムエンド'、
ミドルウェア: [
フリップ({
fallbackPlacements: ['right']、
})、

offset({ 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);

開く

開いたプロップは、ツールチップの可視性にとって非常に重要です。これは、コンポーネントの內(nèi)部狀態(tài)に基づいてツールチップの表示/非表示を管理するのに役立ちます。

まず、デフォルト値 false で useState を作成し、ユーザーがツールチップをクリックするまでツールチップを非表示にできるようにします。この useState は、ツールチップが現(xiàn)在開いているかどうかを追跡します。

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

onOpenChange

このコールバックは、setIsOpen 値を更新するのに役立ちます。したがって、ユーザーがクリックするかイベントをトリガーするたびに、isOpen の false 値を true に設(shè)定し、その逆も同様です。

配置

これは、參照に関連してツールチップをどこに配置するかを決定するのに役立ちます。ツールチップをこれらの位置のいずれかに配置することを決定できます。

1. 下
2. ボトムエンド
3. ボトムスタート
4. 左
5. 左端
6. 左スタート
7. そうです
8. 右端
9. 右スタート
10. トップ
11. トップエンド
12. トップスタート

反転

指定された方向に十分なスペースがない場合、ミドルウェア配列內(nèi)のフリップミドルウェアは、浮動要素の位置を自動的に調(diào)整します。ここで、下に十分なスペースがない場合は、フォールバック配置 (['bottom-end']) を使用して配置しようとします?？栅攻讴`スに応じて好きな位置を選択できます。

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

    ],

オフセット

このミドルウェアは、參照と浮動要素の間にスペースを作成します。 mainAxis: 20 は主方向 (この場合は基準の下) に 20 ピクセルのギャップを作成し、crossAxis: 50 は垂直軸に沿って 50 ピクセルのオフセットを作成します。

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

構(gòu)成は次のようになります

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]);

デモ

このリンクをクリックしてデモビデオをご覧ください。

ビデオから、ツールチップを含めるのに十分なスペースがない場合、ツールチップがその位置を調(diào)整することがはっきりとわかります。定義した fallbackPlacements の位置を使用します。

結(jié)論

フローティング UI は、React アプリケーションにツールチップを?qū)g裝する強力かつ柔軟な方法を提供します。自動配置と豊富なカスタマイズ オプションにより、さまざまなデバイスや畫面サイズにわたって信頼性の高い機能を維持しながら、アプリケーションのユーザー エクスペリエンスを向上させるツールチップを作成できます。

これには、次のような非常に多くの関數(shù)とオブジェクトが含まれます。 refs、floatingStyles、context、狀態(tài)管理用の useState、onOpenChange、配置、反転、オフセット。

このガイドに従うことで、React アプリケーションに応答性の高いユーザーフレンドリーなツールチップを?qū)g裝するための知識が得られます。さまざまな構(gòu)成とミドルウェアを試して、ユーザーにとって完璧なツールチップ エクスペリエンスを作成してください。

コーディングは楽しいですか?

以上がフローティング UI でツールチップを作成する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。