الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

React Virtuoso - قائمة مكونات المحاكاة الافتراضية الأكثر اكتمالا/عائلة الجدول/الشبكة للمكونات.

  • عناصر متغيرة الحجم خارج المربع ؛ لا يوجد أي قياسات يدوية أو ارتفاعات العناصر المتشددة ضرورية ؛
  • قائمة رسائل الدردشة واجهة المستخدم الجديدة ؛
  • وضع مجمعة مع رؤوس لزجة.
  • تخطيط الشبكة المستجيبة ؛
  • دعم الجدول ؛
  • التعامل التلقائي لتغيير حجم المحتوى ؛
  • رأس مخصص ، تذييل ، ومكونات قائمة فارغة ؛
  • العناصر الأعلى المثبتة ؛
  • تمرير لا نهاية له ، اضغط لتحميل المزيد ؛
  • أعلى فهرس العنصر الأعلى الأولي ؛
  • قم بالتمرير إلى طريقة الفهرس.

للحصول على أمثلة مباشرة والوثائق ، تحقق من موقع الوثائق.

الرعاة

إذا كنت تستخدم VIRTUOSO للعمل ، فقم برعايته. أي تبرع يساعد كثيرًا في تطوير المشروع وصيانته.

ابدأ 

npm install react-virtuoso
 import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Virtuoso } from 'react-virtuoso'

const App = ( ) => {
  return < Virtuoso style = { { height : '400px' } } totalCount = { 200 } itemContent = { index => < div > Item { index } </ div > } />
}

ReactDOM . render ( < App /> , document . getElementById ( 'root' ) )

قائمة الرسائل

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

الوضع المجمع

يعد مكون GroupedVirtuoso متغيرًا من Virtuoso "Flat" ، مع الاختلافات التالية:

  • بدلاً من totalCount ، يقوم المكون بتكليف groupCounts: number[] الخاصية ، والتي تحدد مقدار العناصر في كل مجموعة. على سبيل المثال ، سيجعل التمرير [20, 30] مجموعتين مع 20 و 30 عنصرًا لكل منهما ؛
  • بالإضافة إلى ذلك ، فإن خاصية itemContent ، يتطلب المكون خاصية groupContent إضافية ، مما يجعل رأس المجموعة . يتلقى رد الاتصال groupContent فهرس المجموعة القائمة على الصفر كمعلمة.

شبكة

يعرض مكون VirtuosoGrid نفس العناصر ذات الحجم في أعمدة متعددة. يتم التحكم في تحجيم التصميم والمواد من خلال خصائص فئة CSS ، والتي تتيح لك استخدام استعلامات الوسائط ، النطاق ، النسبة المئوية ، إلخ.

طاولة

يعمل مكون TableVirtuoso تمامًا مثل Virtuoso ، ولكن مع جداول HTML. وهو يدعم تمرير النوافذ ، والرؤوس اللاصقة ، والأعمدة اللاصقة ، ويعمل مع جدول React و Mui Table.

يعمل مع مكتبة واجهة المستخدم المفضلة لديك

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

الوثائق والتوثيق

للوثائق المتعمقة والأمثلة الحية للميزات المدعومة والعروض التوضيحية الحية ، تحقق من موقع الوثائق.

دعم المتصفح

لدعم المتصفحات القديمة ، قد تضطر إلى تحميل polyfill ResizeObserver قبل استخدام react-virtuoso : 

 import ResizeObserver from 'resize-observer-polyfill'
if (!window.ResizeObserver)
  window.ResizeObserver = ResizeObserver

مؤلف

بيتيو إيفانوف بيتيوسي.

المساهمة

إصلاحات وميزات جديدة

لتشغيل الاختبارات ، استخدم npm run test . يتم تشغيل مجموعة اختبار قائم على المتصفح من طرف إلى طرف مع npm run e2e ، حيث تكون الصفحات e2e/*.tsx والاختبارات e2e/*.test.ts

هناك طريقة مريحة لتصحيح شيء ما هي معاينة حالات الاختبار في المتصفح. للقيام بذلك ، قم بتشغيل npm run dev - سيتم تشغيل خادم مغرفة يتيح لك تصفح المكونات في مجلد examples .

رخصة

رخصة معهد ماساتشوستس للتكنولوجيا.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل