floating ui

Open Collectiveでさまざまな方法でフローティングUIをサポートできます。

なぜ

フローティング要素は絶対に配置され、通常は別のUI要素に固定されています。特にコンテナのスクロールなどのユニークなレイアウトコンテキストでは、別の要素の横にフローティング要素が固定されたままであることを確認することができます。

絶対的なポジショニングは、浮遊要素がビューポートの端に近すぎて衝突としても知られている場合に問題を引き起こす可能性があります。衝突が発生した場合、フローティング要素が表示されるように位置を調整する必要があります。

さらに、フローティング要素はインタラクティブであることがよくあり、ユーザーインタラクションを設計するときに複雑なアクセシビリティの問題を引き起こす可能性があります。

フローティングUIは、これらの課題をナビゲートし、アクセス可能なフローティングUIコンポーネントを構築するのに役立つ一連の低レベル機能を提供します。

インストール

フローティングUIをインストールするには、NPMやCDNなどのパッケージマネージャーを使用できます。さまざまなプラットフォームで利用できるさまざまなバージョンがあります。

バニラ

Vanilla JavaScriptを使用してWebで使用します。

npm install @floating-ui/dom

基本的なツールチップを構築してライブラリを使用する方法を教えるチュートリアルを読むことから始めることができます。または、APIドキュメントにすぐにジャンプすることができます。

反応します

React DomまたはReact Nativeで使用します。

domを反応させます

 # Positioning + interactions
npm install @floating-ui/react

# Positioning only (smaller size)
npm install @floating-ui/react-dom

ネイティブの反応

npm install @floating-ui/react-native

vue

Vueで使用します。

npm install @floating-ui/vue

キャンバスまたはその他のプラットフォーム

Vanilla Dom（Web）、React、またはReact Native以外のプラットフォームをターゲットにしている場合は、独自のプラットフォームを作成できます。これにより、Canvas/WebGL、またはJavaScriptを実行できる他のプラットフォームなどのものをサポートできます。

npm install @floating-ui/core

貢献

このプロジェクトは、PNPMワークスペースを使用してTypeScriptで書かれたモノレポです。ウェブサイトは、スタイリングにnext.js SSGとTailwind CSSを使用しています。

• レポをフォークしてクローンします
• pnpm install付きのルートディレクトリに依存関係をインストールします
• pnpm run buildを使用して、初期パッケージDISTファイルをビルドします

テスト場

dom

pnpm run --filter @floating-ui/dom dev in the rootはhttp://localhost:1234で@floating-ui/dom開発ビジュアルテストを起動します。遊び場はReactを使用して、Viteにバンドルされた各テストルートを書き込みます。

各ルートには、すべての機能が期待どおりに機能するように、Playwrightがページで撮影したスクリーンショットがあります。これは、配置ロジックをテストする簡単で信頼性が高く、高レベルの方法です。

メインコンテナの下には、特定の状態とオプションをオンにするためのUIコントロールがあります。状態のすべての組み合わせは、スナップショットを介して視覚的にテストされ、可能な限りカバーされます。

反応します

pnpm run --filter @floating-ui/react dev in the rootはhttp://localhost:1234で@floating-ui/react開発テストを起動します。

クレジット

バナー画像の浮かぶ形状は、figmaの驚くべきアーティスト @artstar3d、 @killnicole、@liiiiiiiiによって作られています。彼らの作品をチェックしてください！

ライセンス

mit