WebサイトのUIにさまざまなフローティング要素を実装するためのJavaScriptのライブラリ -Floating UI

Post on:2021年12月6日

Floating UIの特徴

Floating UIは、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどのフローティング要素を配置するためのJavaScriptライブラリです。

フローティング要素はコンテンツのフローを中断することなくUIの上に浮かぶため、配置するときに課題が発生します。Floating UIではフローティング要素がユーザーに表示されている間、特定の参照要素の隣に配置できるようにするプリミティブを公開します。機能にはオーバーフロー防止（または衝突認識）、配置反転などが含まれます。

軽量

ツリーシェイク用の高度にモジュール化されたアーキテクチャを備えた600バイトのコア。
ローレベル

ポジショニング動作の超きめ細かい制御。
ピュア

予測可能な副作用のない動作。
拡張

強力なミドルウェアシステム。
プラットフォームに依存しない

WebやReact NativeなどのJavaScript環境で動作します。

Floating UIのデモ

Floating UIで実装されたアクセシブルなツールチップ、ポップオーバー、ドロップダウンなどが楽しめます。

Floating UI: Placement

ツールチップのデモ、フローティング要素を12個のコア配置に配置します。

Floating UI: Shift

フローティング要素のオーバーフローを防ぐために、ビュー内のフローティング要素をシフトします。

Floating UI: Flip

空きスペースの心配はいりません、フローティング要素は最適な方向に配置されます。

Floating UIの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="https://unpkg.com/@floating-ui/core@0"></script>
<script src="https://unpkg.com/@floating-ui/dom@0"></script>

1 2	<script src="https://unpkg.com/@floating-ui/core@0"></script> <script src="https://unpkg.com/@floating-ui/dom@0"></script>

※リンク先で最新バージョンを取得し、そのバージョンを使用してください。

npm経由でインストールもできます。

npm install @floating-ui/dom

yarn add @floating-ui/dom

npm install @floating-ui/dom

yarn add @floating-ui/dom

Step 2: HTML

ツールチップの実装例です。
<button>と#tooltipの<div>の2つの要素をHTMLに記述し、CDNスクリプトを使用してFloating UIをロードします。

<!DOCTYPE html>
<html>
  <head>
    <title>Floating UI Tutorial</title>
  </head>
  <body>
    <button id="button" aria-describedby="tooltip">
      My button
    </button>
    <div id="tooltip" role="tooltip">My tooltip</div>

    <script src="https://unpkg.com/@floating-ui/core"></script>
    <script src="https://unpkg.com/@floating-ui/dom"></script>
    <script>
      // Your code will go here.
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Floating UI Tutorial</title>

</head>

<body>

My button

</button>

<div id="tooltip" role="tooltip">My tooltip</div>

// Your code will go here.

</script>

</body>

</html>

Step 3: CSS

#tooltipのスタイルにdisplay: none;を定義します。デザインは好きなようにスタイルできます。

#tooltip {
  display: none;
  /* ... ツールチップのスタイル ... */
}

#tooltip {

display: none;

/* ... ツールチップのスタイル ... */

}

Step 4: JavaScript

スクリプトを初期化し、実行します。

function update() {
  computePosition(button, tooltip, {
    // ... options ...
  }).then(({x, y, placement, middlewareData}) => {
    // ... positioning logic ...
  });
}

function showTooltip() {
  button.style.display = 'block';
  update();
}

function hideTooltip() {
  button.style.display = '';
}

const showEvents = ['mouseenter', 'focus'];
const hideEvents = ['mouseleave', 'blur'];

showEvents.forEach((e) =>
  button.addEventListener(e, showTooltip)
);
hideEvents.forEach((e) =>
  button.addEventListener(e, hideTooltip)
);