floating ui

Sie können die schwimmende Benutzeroberfläche auf verschiedene Weise auf offenem Kollektiv unterstützen.

Warum

Schwimmende Elemente sind absolut positioniert und in einem anderen UI -Element typischerweise verankert. Die Gewährleistung eines schwimmenden Elements bleibt neben einem anderen Element eine Herausforderung, insbesondere in einzigartigen Layout -Kontexten wie Scrollen -Containern.

Die absolute Positionierung kann auch zu Problemen führen, wenn das schwimmende Element zu nahe am Rand des Ansichtsfensters liegt und verdeckt wird, auch als Kollision bezeichnet. Wenn eine Kollision auftritt, muss die Position eingestellt werden, um sicherzustellen, dass das schwimmende Element sichtbar bleibt.

Darüber hinaus sind schwimmende Elemente häufig interaktiv, was beim Entwerfen von Benutzerinteraktionen komplexe Probleme mit der Zugänglichkeit aufwirft.

Die schwebende UI bietet eine Reihe von Funktionen auf niedriger Ebene, mit denen Sie diese Herausforderungen steuern und zugängliche schwimmende UI-Komponenten aufbauen können.

Installieren

Um die schwimmende Benutzeroberfläche zu installieren, können Sie einen Paketmanager wie NPM oder ein CDN verwenden. Für verschiedene Plattformen stehen verschiedene Versionen zur Verfügung.

Vanille

Verwenden Sie im Web mit Vanille -JavaScript.

npm install @floating-ui/dom

Sie können entweder das Tutorial lesen, in dem Sie die Verwendung der Bibliothek durch Erstellen eines grundlegenden Tooltips beibringen, oder Sie können direkt in die API -Dokumentation springen.

Reagieren

Verwendung bei React DOM oder React Native.

Reagieren dom

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

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

Reagieren Sie nativ

npm install @floating-ui/react-native

Vue

Verwendung mit Vue.

npm install @floating-ui/vue

Leinwand oder andere Plattformen

Wenn Sie eine andere Plattform als die Vanilla DOM (Web), React oder React Native ansprechen, können Sie Ihre eigene Plattform erstellen. Auf diese Weise können Sie Dinge wie Leinwand/WebGL oder andere Plattformen unterstützen, die JavaScript ausführen können.

npm install @floating-ui/core

Beitragen

Dieses Projekt ist ein Monorepo, das mit PNPM -Arbeitsbereichen in TypeScript geschrieben wurde. Die Website verwendet das CSS von Next.js SSG und Tailwind für das Styling.

• Gabel und klonen Sie das Repo
• Installieren Sie die Abhängigkeiten im Root -Verzeichnis mit pnpm install
• Erstellen Sie das erste Paket -DIST -Dateien mit pnpm run build

Testgründe

Dom

pnpm run --filter @floating-ui/dom dev im root startet die visuellen Tests @floating-ui/dom unter http://localhost:1234 . Auf dem Spielplatz werden die von VITE gebündelten Testroute reagiert.

Jede Route hat Screenshots der Seite durch Dramatiker gemacht, um sicherzustellen, dass alle Funktionen wie erwartet funktionieren. Dies ist eine einfache, zuverlässige und hochrangige Möglichkeit, die Positionierungslogik zu testen.

Unterhalb des Hauptcontainers befinden sich UI -Steuerelemente, um bestimmte Zustand und Optionen einzuschalten. Jede einzelne Zustandskombination wird visuell über die Schnappschüsse getestet, um so weit wie möglich abzudecken.

Reagieren

pnpm run --filter @floating-ui/react dev im root startet die @floating-ui/react Entwicklungstests unter http://localhost:1234 .

Credits

Die schwimmenden Formen im Bannerbild werden von den erstaunlichen Künstlern @artStar3d, @killnicole und @liiiiiiii über Figma hergestellt. Schauen Sie sich ihre Arbeit an!

Lizenz

MIT