หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

React Virtuoso - รายการเรนเดอร์การจำลองเสมือนจริงที่สมบูรณ์แบบที่สุด/ตาราง/กริดตระกูลของส่วนประกอบ

  • รายการขนาดตัวแปรนอกกรอบ ไม่จำเป็นต้องมีการวัดด้วยตนเองหรือความสูงของรายการที่ผ่านการเข้ารหัส
  • รายการข้อความแชท ui ใหม่ ;
  • โหมดจัดกลุ่มด้วยส่วนหัวเหนียว
  • เค้าโครงกริดที่ตอบสนอง;
  • การสนับสนุนตาราง;
  • การจัดการปรับขนาดเนื้อหาโดยอัตโนมัติ
  • ส่วนหัวที่กำหนดเองส่วนท้ายและส่วนประกอบรายการว่าง
  • รายการด้านบนที่ตรึงไว้
  • การเลื่อนที่ไม่มีที่สิ้นสุดกดเพื่อโหลดมากขึ้น;
  • ดัชนีรายการส่วนใหญ่อันดับต้น ๆ
  • เลื่อนไปที่วิธีการดัชนี

สำหรับตัวอย่างและเอกสารสดตรวจสอบเว็บไซต์เอกสาร

ผู้สนับสนุน

หากคุณใช้ 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 ถูกสร้างขึ้นโดยเฉพาะสำหรับการสนทนาของมนุษย์/chatbot นอกเหนือจากการเรนเดอร์เสมือนจริงแล้วส่วนประกอบจะเปิดเผย API การจัดการข้อมูลที่จำเป็นซึ่งให้การควบคุมที่จำเป็นเกี่ยวกับตำแหน่งการเลื่อนเมื่อมีการโหลดข้อความเก่า ๆ ข้อความใหม่จะมาถึงและเมื่อผู้ใช้ส่งข้อความ ตำแหน่งสกรอลล์สามารถอัปเดตได้ทันทีหรือด้วยภาพเคลื่อนไหวสกรอลล์ที่ราบรื่น

โหมดจัดกลุ่ม

ส่วนประกอบ GroupedVirtuoso เป็นตัวแปรของ "flat" Virtuoso โดยมีความแตกต่างต่อไปนี้:

  • แทนที่จะเป็น totalCount ส่วนประกอบจะเปิดเผย groupCounts: number[] คุณสมบัติซึ่งระบุจำนวนรายการในแต่ละกลุ่ม ตัวอย่างเช่นการผ่าน [20, 30] จะแสดงผลสองกลุ่มที่มี 20 และ 30 รายการแต่ละรายการ
  • นอกจากนี้ยังมีคุณสมบัติ itemContent ส่วนประกอบต้องใช้คุณสมบัติ groupContent เพิ่มเติมซึ่งทำให้ ส่วนหัวของกลุ่ม การติดต่อกลับ groupContent ได้รับดัชนีกลุ่มที่อิงกับศูนย์เป็นพารามิเตอร์

กริด

ส่วนประกอบ VirtuosoGrid แสดง รายการขนาดเดียวกัน ในหลายคอลัมน์ เค้าโครงและการปรับขนาดรายการถูกควบคุมผ่านคุณสมบัติคลาส CSS ซึ่งช่วยให้คุณใช้การสืบค้นสื่อความกว้างต่ำเปอร์เซ็นต์ ฯลฯ

โต๊ะ

ส่วนประกอบ TableVirtuoso ทำงานเหมือนกับ Virtuoso แต่มีตาราง HTML รองรับการเลื่อนหน้าต่างส่วนหัวเหนียวคอลัมน์เหนียวและทำงานร่วมกับตารางปฏิกิริยาและตาราง MUI

ใช้งานได้กับห้องสมุด UI ที่คุณเลือก

คุณสามารถปรับแต่งมาร์กอัปตามความต้องการของคุณ - ตรวจสอบการสาธิตรายการ UI รายการวัสดุ หากคุณต้องการสนับสนุนการจัดลำดับใหม่ให้ตรวจสอบตัวอย่างแบบ HOC ที่ตอบสนองได้

เอกสารและการสาธิต

สำหรับเอกสารเชิงลึกและตัวอย่างสดของคุณสมบัติที่รองรับและการสาธิตสดตรวจสอบเว็บไซต์เอกสาร

การสนับสนุนเบราว์เซอร์

เพื่อรองรับเบราว์เซอร์มรดกคุณอาจต้องโหลด polyfill resizeobserver ก่อนที่จะใช้ react-virtuoso : 

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

ผู้เขียน

PETYO IVANOV @Petyosi

การบริจาค

การแก้ไขและคุณสมบัติใหม่

ในการเรียกใช้การทดสอบให้ใช้ npm run test ชุดทดสอบเบราว์เซอร์แบบ end-to-end นั้นสามารถเรียกใช้งานได้ด้วย npm run e2e โดยที่หน้าเป็น e2e/*.tsx และการทดสอบ e2e/*.test.ts

วิธีที่สะดวกในการดีบักบางอย่างคือการดูตัวอย่างกรณีทดสอบในเบราว์เซอร์ ในการทำเช่นนั้นให้เรียกใช้ npm run dev - มันจะเปิดตัวเซิร์ฟเวอร์ทัพพีที่ให้คุณเรียกดูส่วนประกอบในโฟลเดอร์ examples

ใบอนุญาต

ใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด