நிகழ்வு அட்டவணையும் தரவுக் கட்டமும் @needless-ui/react-இல் React கம்போனென்ட்களாகவும் கிடைக்கின்றன: Angular-இல் உள்ள அதே அம்சங்கள், விசைப்பலகை, அணுகல்தன்மை, அதே ஸ்டைல்ஷீட், அதே MIT உரிமம். மற்ற கம்போனென்ட்கள் வரவிருக்கின்றன. இவற்றுக்கு React 19 தேவை; Next.js App Router, Vite இரண்டிலும் இவை வேலை செய்கின்றன.
நிறுவுதல்
pnpm add @needless-ui/react @needless-ui/cssஸ்டைல்களை இம்போர்ட் செய்யுங்கள்
கம்போனென்ட்களுடன் ஸ்டைல்கள் வருவதில்லை. உங்கள் செயலியின் ஒரு CSS கோப்பிலிருந்து ஸ்டைல்ஷீட்டை ஒருமுறை இம்போர்ட் செய்யுங்கள்.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';லேயர்கள் Angular-இல் உள்ளபடியே வேலை செய்கின்றன: ரீசெட்கள் nui-க்கு முன் உள்ள லேயரில் இருக்கும்; Tailwind CSS இருந்தால், nui லேயர் Tailwind-இன் base-க்கும் அதன் utility-களுக்கும் இடையே வரும். தொடங்குதல் வழிகாட்டி இதைக் காட்டுகிறது.
ஒரு நிகழ்வு அட்டவணை
ஒவ்வொரு கம்போனென்ட்டுக்கும் தனி என்ட்ரி பாயின்ட் உண்டு. நீங்கள் அனுப்பும் events-ஐ நிகழ்வு அட்டவணை காட்டுகிறது; பயனர்கள் ஒரு நிகழ்வை நகர்த்தும்போதோ புதியதற்கு நேரம் தேர்ந்தெடுக்கும்போதோ உங்களுக்குத் தெரிவிக்கிறது: நிகழ்வுகளை வைத்திருப்பது நீங்கள்தான்.
ஒரு தரவுக் கட்டம்
columns-ஐக் கம்போனென்ட்டுக்கு வெளியே விவரியுங்கள்; அப்போது ஒவ்வொரு ரெண்டரிலும் கட்டம் தன் வேலையை மீண்டும் செய்யாது. ஒரு திருத்தம் புதிய வரிசைகளுடன் onRowsChange-ஐ அழைக்கிறது; Excel ஏற்றுமதி போன்ற மெத்தட்கள் கட்டத்தின் ref-இல் உள்ளன.
React-இன் சொற்களில் API
React கம்போனென்ட்கள் Angular கம்போனென்ட்களின் அதே விவரக்குறிப்புகளைப் பின்பற்றுகின்றன; அதனால் அவற்றின் API-கள் React-இன் சொற்களில் ஒத்துப்போகின்றன. நிகழ்வு அட்டவணையின், தரவுக் கட்டத்தின் API பக்கங்கள் ஒவ்வொரு பிராப்பையும் பட்டியலிடுகின்றன.
| Angular | React |
|---|---|
ஒரு மாடல், [(view)] | நிலை: onViewChange-உடன் view, அல்லது கம்போனென்ட்டே வைத்துக்கொள்ள defaultView |
ஓர் அவுட்புட், (eventClick) | ஒரு கால்பேக், onEventClick |
ஒரு டெம்ப்ளேட், <ng-template nuiSchedulerEvent> | வரையும் ஒரு ஃபங்ஷன், renderEvent |
ஒரு மெத்தட், scheduler.next() | ref-இல் உள்ள ஒரு மெத்தட், ref.current.next() |
children, மரத் தரவுக்கு | getChildren: React, children-ஐ எலிமென்ட்களுக்காக வைத்திருக்கிறது |
locale, இயல்பாக, செயலியின் LOCALE_ID | locale, இயல்பாக en-US |
சர்வர் ரெண்டரிங்
இரண்டு கம்போனென்ட்களும் சர்வரில் ரெண்டர் ஆகி, உலாவியில் ஹைட்ரேட் ஆகின்றன. பேக்கேஜ் அவற்றைக் கிளையன்ட் கம்போனென்ட்களாகக் குறிக்கிறது; அதனால் ஒரு Server Component, சீரியலைஸ் ஆகும் பிராப்களுடன் அவற்றை ரெண்டர் செய்யலாம்; nuiSchedulerFromIcs போன்ற உதவிச் செயல்பாடுகள் சர்வரில் இயங்குகின்றன. கால்பேக்குகள் உலாவிக்குக் கடந்து செல்ல முடியாது: அவற்றை ஏற்கும் கம்போனென்ட், மேலே உள்ள இரண்டையும் போல, உங்கள் சொந்தக் கிளையன்ட் கம்போனென்ட்டுக்குள் இருக்க வேண்டும்.
படிப்பவரைச் சார்ந்தவை உலாவிக்காகக் காத்திருக்கின்றன: நிகழ்வு அட்டவணையின் இப்போதைய நேரக் கோடு, இன்று எந்த நாள் என்பது. சர்வர் ரெண்டர் செய்யும்போது நிகழ்வு அட்டவணைக்கு defaultDate கொடுங்கள்; சர்வரின் இன்றைய நாள் படிப்பவருடையதாக இல்லாமல் இருக்கலாம்.