floating ui

Puede apoyar la interfaz de usuario flotante de varias maneras en Open Collective.

Por qué

Los elementos flotantes están absolutamente posicionados, típicamente anclados a otro elemento UI. Asegurar que un elemento flotante permanezca anclado junto a otro elemento puede ser un desafío, especialmente en contextos de diseño únicos como los contenedores de desplazamiento.

El posicionamiento absoluto también puede causar problemas cuando el elemento flotante está demasiado cerca del borde de la ventana escolar y se oscurece, también conocida como colisión. Cuando se produce una colisión, la posición debe ajustarse para garantizar que el elemento flotante permanezca visible.

Además, los elementos flotantes a menudo son interactivos, lo que puede plantear problemas de accesibilidad complejos al diseñar interacciones del usuario.

La interfaz de usuario flotante ofrece un conjunto de características de bajo nivel para ayudarlo a navegar estos desafíos y construir componentes de interfaz de usuario flotantes accesibles.

Instalar

Para instalar UI flotante, puede usar un Administrador de paquetes como NPM o un CDN. Hay diferentes versiones disponibles para diferentes plataformas.

Vainilla

Úselo en la web con Vanilla JavaScript.

npm install @floating-ui/dom

Puede comenzar leyendo el tutorial, que le enseña cómo usar la biblioteca construyendo una información básica de herramientas, o puede saltar directamente a la documentación de la API.

Reaccionar

Use con React DOM o React Native.

Reaccionar dom

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

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

Reaccionar nativo

npm install @floating-ui/react-native

Vue

Úselo con Vue.

npm install @floating-ui/vue

Lienzo u otras plataformas

Si está apuntando a una plataforma que no sea la Vanilla DOM (Web), Reaccion o Reaccion Native, puede crear su propia plataforma. Esto le permite admitir cosas como Canvas/WebGL u otras plataformas que pueden ejecutar JavaScript.

npm install @floating-ui/core

Que contribuye

Este proyecto es un Monorepo escrito en TypeScript utilizando espacios de trabajo PNPM. El sitio web está utilizando Next.js SSG y Tailwind CSS para el estilo.

• Bifurcarse y clonar el repositorio
• Instalar dependencias en el directorio raíz con pnpm install
• Cree archivos DIST de paquete inicial con pnpm run build

Probar motivos

Domina

pnpm run --filter @floating-ui/dom dev en la raíz lanzará las pruebas visuales de desarrollo @floating-ui/dom en http://localhost:1234 . El patio de recreo usa React para escribir cada ruta de prueba, incluido por Vite.

Cada ruta tiene capturas de pantalla tomadas de la página por dramaturgo para garantizar que todas las funcionalidades funcionen como se esperaba; Esta es una forma fácil, confiable y de alto nivel de probar la lógica de posicionamiento.

Debajo del contenedor principal están los controles de la interfaz de usuario para activar ciertos estados y opciones. Cada combinación de estado se prueba visualmente a través de las instantáneas para cubrir tanto como sea posible.

Reaccionar

pnpm run --filter @floating-ui/react dev en la raíz lanzará las pruebas de desarrollo @floating-ui/react en http://localhost:1234 .

Créditos

Las formas flotantes en la imagen de banner están hechas por los increíbles artistas @artstar3d, @killnicole y @liiiiiiii en figma, ¡mira su trabajo!

Licencia

MIT