تنزيل floating ui - تنزيل رمز مصدر floating ui

floating ui

شفرة المصدر الأخرى

@floating-ui

تنزيل

دوبت

يمكنك دعم واجهة المستخدم العائمة بعدة طرق على الجماعي المفتوح.

لماذا

يتم وضع العناصر العائمة على الإطلاق ، وعادة ما ترتكز على عنصر واجهة مستخدم آخر. يمكن أن يكون ضمان وجود عنصر عائم مرسومًا بجوار عنصر آخر أمرًا صعبًا ، خاصة في سياقات التخطيط الفريدة مثل تمرير الحاويات.

يمكن أن يسبب تحديد المواقع المطلقة أيضًا مشاكل عندما يكون العنصر العائم قريبًا جدًا من حافة منفذ العرض ويصبح غامضًا ، والمعروف أيضًا باسم الاصطدام. عند حدوث تصادم ، يجب ضبط الموضع لضمان بقاء العنصر العائم مرئيًا.

علاوة على ذلك ، غالبًا ما تكون العناصر العائمة تفاعلية ، والتي يمكن أن تثير مشكلات إمكانية الوصول المعقدة عند تصميم تفاعلات المستخدم.

تقدم Floating UI مجموعة من الميزات ذات المستوى المنخفض لمساعدتك على التنقل في هذه التحديات وبناء مكونات واجهة المستخدم العائمة التي يمكن الوصول إليها.

ثَبَّتَ

لتثبيت واجهة المستخدم العائمة ، يمكنك استخدام مدير الحزمة مثل NPM أو CDN. هناك إصدارات مختلفة متاحة للمنصات المختلفة.

الفانيليا

استخدم على الويب مع الفانيليا جافا سكريبت.

npm install @floating-ui/dom

يمكنك إما أن تبدأ من خلال قراءة البرنامج التعليمي ، الذي يعلمك كيفية استخدام المكتبة عن طريق إنشاء تلميح أدوات أساسي ، أو يمكنك القفز مباشرة إلى وثائق API.

رد فعل

استخدم مع React DOM أو React Native.

رد فعل دوم

 # 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

المساهمة

هذا المشروع عبارة عن monorepo مكتوب في TypeScript باستخدام مساحات عمل PNPM. يستخدم موقع الويب NEXT.JS SSG و Tailwind CSS للتصميم.

شوكة واستنساخ الريبو
تثبيت التبعيات في دليل الجذر مع pnpm install
قم بإنشاء ملفات DIST الأولية مع pnpm run build

أسباب الاختبار

دوم

سيتم تشغيل pnpm run --filter @floating-ui/dom dev في الجذر الاختبارات المرئية لتطوير @floating-ui/dom على http://localhost:1234 . يستخدم الملعب رد فعل لكتابة كل مسار اختبار ، مجمعة بواسطة Vite.

يحتوي كل مسار على لقطات تم التقاطها من الصفحة من قبل الكاتب المسرحي لضمان عمل جميع الوظائف كما هو متوقع ؛ هذه طريقة سهلة وموثوقة وعالية المستوى لاختبار منطق تحديد المواقع.

يوجد أسفل الحاوية الرئيسية عناصر التحكم في واجهة المستخدم لتشغيل حالة وخيارات معينة. يتم اختبار كل مجموعة من الحالة بصريًا عبر اللقطات لتغطية أكبر قدر ممكن.