floating ui

Vous pouvez prendre en charge l'interface utilisateur flottante de diverses manières sur un collectif ouvert.

Pourquoi

Les éléments flottants sont absolument positionnés, généralement ancrés à un autre élément d'interface utilisateur. Assurer un élément flottant reste ancré à côté d'un autre élément peut être difficile, en particulier dans des contextes de mise en page uniques comme les conteneurs de défilement.

Le positionnement absolu peut également causer des problèmes lorsque l'élément flottant est trop proche du bord de la fenêtre et devient obscurci, également appelé collision. Lorsqu'une collision se produit, la position doit être ajustée pour garantir que l'élément flottant reste visible.

De plus, les éléments flottants sont souvent interactifs, ce qui peut soulever des problèmes d'accessibilité complexes lors de la conception des interactions utilisateur.

L'interface utilisateur flottante propose un ensemble de fonctionnalités de bas niveau pour vous aider à naviguer dans ces défis et à construire des composants d'interface utilisateur flottants accessibles.

Installer

Pour installer une interface utilisateur flottante, vous pouvez utiliser un gestionnaire de packages comme NPM ou un CDN. Il existe différentes versions disponibles pour différentes plates-formes.

Vanille

Utilisez sur le Web avec Vanilla Javascript.

npm install @floating-ui/dom

Vous pouvez soit commencer par lire le tutoriel, qui vous apprend à utiliser la bibliothèque en construisant une infraction de base, soit vous pouvez sauter directement dans la documentation de l'API.

Réagir

Utiliser avec React Dom ou React Native.

Réagir DOM

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

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

React natif

npm install @floating-ui/react-native

Vue

Utiliser avec Vue.

npm install @floating-ui/vue

Toile ou autres plateformes

Si vous ciblez une plate-forme autre que la vanille DOM (Web), React ou React Native, vous pouvez créer votre propre plate-forme. Cela vous permet de prendre en charge des choses comme Canvas / WebGL, ou d'autres plates-formes qui peuvent exécuter JavaScript.

npm install @floating-ui/core

Contributif

Ce projet est un monorepo écrit en typescript à l'aide d'espaces de travail PNPM. Le site Web utilise Next.js SSG et Tailwind CSS pour le style.

• Fourche et cloner le repo
• Installer les dépendances dans Root Directory avec pnpm install
• Créer des fichiers de distrants initiaux avec pnpm run build

Terrains de test

Dom

pnpm run --filter @floating-ui/dom dev in the Root lancera les tests visuels de développement @floating-ui/dom sur http://localhost:1234 . Le terrain de jeu utilise React pour écrire chaque itinéraire de test, emballé par Vite.

Chaque itinéraire a des captures d'écran prises de la page par dramaturge pour s'assurer que toutes les fonctionnalités fonctionnent comme prévu; Il s'agit d'un moyen facile, fiable et de haut niveau de tester la logique de positionnement.

Sous le conteneur principal se trouvent des commandes d'interface utilisateur pour activer certains états et options. Chaque combinaison d'état est testée visuellement via les instantanés pour couvrir autant que possible.

Réagir

pnpm run --filter @floating-ui/react dev in the Root lancera les tests de développement @floating-ui/react sur http://localhost:1234 .

Crédits

Les formes flottantes de l'image de bannière sont faites par les artistes incroyables @ artStar3d, @killnicole et @liiiiiiii sur Figma - consultez leur travail!

Licence

Mit