الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

React-keyview

تثبيت

عبر NPM 

 npm i react-keyview

عن طريق الغزل 

 yarn add react-keyview

عبر CDN (UNPKG) 

 https://unpkg.com/react-keyview@latest

مكتبة UMD مكشوفة باسم ReactKeyView 

 const KV = ReactKV ;

ملحوظة. لا توفر هذه الحزمة أي موارد ورقة الأنماط ، والمكونات قابلة للتخصيص للغاية. كما أنه يدعم تقديم جانب الخادم

العروض التوضيحية

  • قائمة
  • طاولة
  • شبكة

الاستخدام

يمكنك استيراد أي مكون تريده كتصدير مسمى من "React-KeyView" ، على سبيل المثال. 

 import { Grid , Table } from "react-keyview" ;

أو يمكنك استيراد المكونات التي تحتاجها مباشرة مباشرة ، مثل ذلك. 

 import Grid from "react-keyview/build/Grid" ;
import Table from "react-keyview/build/Table" ;

وحدات UMD لديها بادئة ReactKV ، على سبيل المثال. 

 const Grid = ReactKVGrid ;
const List = ReactKVList ;

قائمة 

 function renderRow ( rowIndex , currentIndex ) {
  return < div > { rowIndex } </ div > ;
}

< List renderRow = { this . renderRow } count = { YOUR_DATA . length } visibleCount = { 5 } rowHeight = { 50 } /> ;
دعم يكتب وصف
Renderrow وظيفة يجعل صف واحد
عدد رقم عدد العناصر
Roheight رقم ارتفاع الصف
VisiBlecount رقم عدد العناصر المرئية
دوم هدف تمرير السمات إلى عنصر HTML

طاولة 

 function renderHeader ( item ) {
  return item ;
}
function renderRowColumn ( i , j ) {
  var getRowColumn = DATA [ i ] [ header [ j ] ] ;
  return < td key = { UNIQUE_KEY } > { getRowColumn } </ td > ;
}

function renderRow ( rowIndex , currentIndex , col ) {
  return < tr key = { UNIQUE_KEY } > { col } </ tr > ;
}

< Table
  header = { header }
  renderHeader = { this . renderHeader }
  renderRow = { this . renderRow }
  columnCount = { 3 }
  count = { YOUR_DATA . length }
  visibleCount = { 5 }
  rowHeight = { 50 }
  renderRowColumn = { this . renderRowColumn }
/> ;
دعم يكتب وصف
VisiBlecount رقم عدد الصفوف المرئية
عدد رقم عدد الصفوف
رأس صفيف يجب أن تكون مجموعة من الأوتار
Renderheader وظيفة عدد الأعمدة المرئية
Renderrow وظيفة تقدم الصف
RenderrowColumn وظيفة يجعل أعمدة الصف
دوم هدف تمرير السمات إلى عنصر HTML

شبكة 

 function renderer ( { rowIndex , columnIndex , yIndex , xIndex } ) {
  return (
    < td key = { UNIQUE_KEY } >
      Item { columnIndex } , { rowIndex }
    </ td >
  ) ;
}

< Grid
  renderer = { this . renderer }
  visibleRows = { 6 }
  rowCount = { 100 }
  rowWidth = { 30 }
  columnCount = { 100 }
  visibleColumns = { 6 }
  columnHeight = { 50 }
/> ;
دعم يكتب وصف
ColumnCount رقم عدد الأعمدة
VisiBleColumns رقم عدد الأعمدة المرئية
rowcount رقم عدد الخطوط
visiblerows رقم عدد الصفوف المرئية
العارض وظيفة يعرض الصف والعمود
دوم هدف تمرير السمات إلى عنصر HTML
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل