floating ui

Anda dapat mendukung UI mengambang dalam berbagai cara di Open Collective.

Mengapa

Elemen mengambang benar -benar diposisikan, biasanya berlabuh ke elemen UI lain. Memastikan elemen mengambang tetap berlabuh di sebelah elemen lain bisa menjadi tantangan, terutama dalam konteks tata letak yang unik seperti pengguliran wadah.

Posisi absolut juga dapat menyebabkan masalah ketika elemen mengambang terlalu dekat dengan tepi viewport dan menjadi dikaburkan, juga dikenal sebagai tabrakan. Ketika tabrakan terjadi, posisi harus disesuaikan untuk memastikan elemen mengambang tetap terlihat.

Lebih lanjut, elemen mengambang seringkali interaktif, yang dapat meningkatkan masalah aksesibilitas yang kompleks saat merancang interaksi pengguna.

Floating UI menawarkan satu set fitur tingkat rendah untuk membantu Anda menavigasi tantangan ini dan membangun komponen UI mengambang yang dapat diakses.

Memasang

Untuk menginstal UI mengambang, Anda dapat menggunakan manajer paket seperti NPM atau CDN. Ada berbagai versi yang tersedia untuk platform yang berbeda.

Vanila

Gunakan di web dengan vanilla javascript.

npm install @floating-ui/dom

Anda dapat memulai dengan membaca tutorial, yang mengajarkan Anda cara menggunakan perpustakaan dengan membangun tooltip dasar, atau Anda dapat langsung masuk ke dokumentasi API.

Bereaksi

Gunakan dengan React Dom atau React Native.

Bereaksi dom

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

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

Bereaksi asli

npm install @floating-ui/react-native

Vue

Gunakan dengan vue.

npm install @floating-ui/vue

Kanvas atau platform lain

Jika Anda menargetkan platform selain vanilla DOM (Web), bereaksi, atau bereaksi asli, Anda dapat membuat platform Anda sendiri. Ini memungkinkan Anda untuk mendukung hal -hal seperti Canvas/WebGL, atau platform lain yang dapat menjalankan JavaScript.

npm install @floating-ui/core

Berkontribusi

Proyek ini adalah monorepo yang ditulis dalam TypeScript menggunakan ruang kerja PNPM. Situs web ini menggunakan SSG Next.js dan Tailwind CSS untuk gaya.

• Garpu dan klon repo
• Instal dependensi di direktori root dengan pnpm install
• Bangun file Dist Paket Awal dengan pnpm run build

Tempat pengujian

Dom

pnpm run --filter @floating-ui/dom dev di root akan meluncurkan @floating-ui/dom pengembangan tes visual di http://localhost:1234 . Taman bermain menggunakan React untuk menulis setiap rute uji, dibundel oleh vite.

Setiap rute memiliki tangkapan layar yang diambil dari halaman oleh penulis naskah untuk memastikan semua fungsi bekerja seperti yang diharapkan; Ini adalah cara yang mudah, andal dan tingkat tinggi untuk menguji logika penentuan posisi.

Di bawah wadah utama adalah kontrol UI untuk menyalakan keadaan dan opsi tertentu. Setiap kombinasi negara diuji secara visual melalui snapshot untuk menutupi sebanyak mungkin.

Bereaksi

pnpm run --filter @floating-ui/react dev di root akan meluncurkan @floating-ui/react pengembangan tes di http://localhost:1234 .

Kredit

Bentuk mengambang pada gambar spanduk dibuat oleh artis luar biasa @artstar3d, @killnicole dan @liiiiiiii di figma - lihat karya mereka!

Lisensi

Mit