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

WebサイトのUIにフローティング要素、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどを実装するJavaScriptのライブラリを紹介します。

フローティング要素の実装で問題となる配置の向きや衝突やオーバーフローなどにも対応しており、アクセシブルなフローティング要素を実装できます。

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

Floating UI
Floating UI -GitHub

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: 外部ファイル

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

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

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

Step 2: HTML

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

Step 3: CSS

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

Step 4: JavaScript

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

さらに詳しい情報は、ドキュメントをご覧ください。

サイトのキャプチャ

Floating UIのドキュメント

sponsors

top of page

©2022 coliss