react complex tree
2.4.6
Komponen Pohon yang Tidak Dapat Diakses dengan Multi-Pilih dan Drag-And-Drop
Lihat dokumentasi resmi untuk melihat lebih banyak contoh dan dokumentasi yang lebih komprehensif. Banyak masalah atau pertanyaan umum tercakup dalam halaman FAQ.
Changelog tersedia di https://rct.lukasbach.com/docs/changelog. Periksa catatan rilis v2 saat bermigrasi dari v1.x ke v2.x.
Pengembangan pohon reaksi-kompleks didukung oleh komunitas. Terima kasih khusus kepada:
Cari tahu cara mendukung pengembangan pohon reaksi-kompleks.
Untuk mulai menggunakan React Complex Tree, instal ke proyek Anda sebagai ketergantungan melalui
npm install react-complex-tree
yarn add react-complex-tree
lalu impor dan tambahkan struktur pohon Anda
import { UncontrolledTreeEnvironment , Tree , StaticTreeDataProvider } from 'react-complex-tree' ;
< UncontrolledTreeEnvironment
dataProvider = { new StaticTreeDataProvider ( longTree . items , ( item , data ) => ( { ... item , data } ) ) }
getItemTitle = { item => item . data }
viewState = { { } }
>
< Tree treeId = "tree-1" rootItem = "root" treeLabel = "Tree Example" / >
< / UncontrolledTreeEnvironment > ;Detail lebih lanjut di Panduan Memulai. Panduan tentang cara mengintegrasikan data dengan penyedia data pohon statis juga merupakan titik awal yang baik untuk memahami cara mengintegrasikan data dengan React Complex Tree.
Tidak beropini
React Complex Tree tidak membuat asumsi apa pun tentang estetika desain web Anda atau teknologi apa pun yang Anda gunakan. Render sepenuhnya terserah Anda, dan setiap node yang ditulis ke DOM dapat dikustomisasi. Default yang masuk akal yang ditata dengan kelas CSS yang mudah disesuaikan disediakan untuk memudahkan integrasi.
Dapat diakses
Struktur pohon sesuai dengan spesifikasi W3C untuk pohon yang dapat diakses. Ini mendukung pembaca layar dan mengimplementasikan semua interaksi keyboard umum sehingga setiap interaksi, mulai dari memindahkan fokus hingga menyeret item, dapat dilakukan tanpa menggunakan mouse.
Seret dan Jatuhkan yang Kuat
Pohon ini memberikan kemampuan yang diharapkan yang diharapkan oleh pengguna listrik dari perkakas tingkat lanjut. Pilih item sebanyak yang Anda inginkan, dan seret item tersebut ke lokasi mana pun dalam pohon yang sama atau pohon lainnya! React Complex Tree hadir dengan banyak opsi penyesuaian untuk Drag and Drop, seperti melarang penyusunan ulang atau mengaktifkan drag atau drop pada item tertentu saja.
Kontrol Keyboard Penuh
Pohon itu sepenuhnya dapat dikontrol melalui keyboard. Ini mengimplementasikan semua kontrol yang disarankan oleh W3C untuk membuat pohon dapat diakses, dan menyediakan kontrol lebih lanjut untuk Drag and Drop, mencari atau mengganti nama item.
Nol Ketergantungan
Kami tahu betapa menjengkelkannya menambahkan paket dan berakhir dengan ratusan ketergantungan rekan. Karena React Complex Tree tidak membuat asumsi apa pun pada dependensi Anda, kami juga tidak perlu mengacaukan proyek Anda dengan paket-paket lebih lanjut. Saat menambahkan React Complex Tree ke paket Anda, Anda hanya menambahkan itu dan tidak ada dependensi lainnya.
Multi-Seleksi
Selain pustaka pohon sederhana lainnya, React Complex Tree memungkinkan Anda memilih item sebanyak yang Anda inginkan, dan memindahkan semuanya sekaligus dengan menyeretnya ke lokasi berbeda. Mengapa memberikan fungsionalitas yang lebih sedikit kepada pengguna Anda, ketika Anda dapat menawarkan kemampuan pohon yang kuat tanpa upaya tambahan? Cobalah demo di atas dan pilih beberapa item sekaligus dengan menahan kontrol pada keyboard Anda sambil mengklik item, lalu menyeret semuanya sekaligus ke lokasi berbeda.
Mengganti nama bawaan
React Complex Tree menyediakan penggantian nama sebagai fitur asli dengan kemampuannya. Pilih item mana saja dan tekan F2, untuk mulai mengganti nama item. Hal ini memberikan cara yang lebih intuitif untuk mengganti nama item bagi pengguna tanpa menerapkan solusi dialog khusus yang lebih mengganggu alur kerja pengguna Anda.
Fungsi Pencarian
Pernahkah Anda mencoba menemukan satu file dalam pohon file yang sangat kacau dan Anda tahu ada di sana, tetapi tidak tahu di mana? Mulailah mengetik sambil memfokuskan pohon, dan item pertama yang cocok dengan pencarian Anda akan muncul. Hal ini juga meningkatkan aksesibilitas pohon karena pengguna yang hanya menggunakan keyboard dapat lebih mudah menavigasi struktur pohon.
Lingkungan Multi-Pohon
Anda dapat menggunakan beberapa pohon di aplikasi web Anda yang memiliki keadaan yang sama, dan dapat berinteraksi satu sama lain. Item status dan pohon disediakan ke komponen penyedia reaksi umum, dan pohon sebanyak yang Anda inginkan dapat dengan mudah diintegrasikan hanya dengan menambahkan komponen pohon di bawah penyedia. Pohon tidak perlu memberikan statusnya sendiri, mereka hanya memerlukan ID dan item rootnya, semua logika lainnya ditangani oleh penyedia.
Antarmuka Terkendali dan Tidak Terkendali
Cara termudah menggunakan React Complex Tree adalah dengan menggunakan lingkungan pohon yang tidak terkontrol yang mempertahankan status pohon, yaitu item mana yang dipilih, diperluas, dll., itu sendiri. Anda hanya perlu menyediakan penyedia data yang menentukan cara item dimuat secara asinkron, dan lingkungan akan melakukan sisanya. Namun, jika Anda menginginkan lebih banyak kontrol, Anda dapat menggunakan lingkungan terkontrol untuk penyesuaian penuh.
Didukung oleh React dan TypeScript
React Complex Tree didukung oleh React (duh) dan mudah diintegrasikan ke dalam proyek React yang sudah ada hanya dengan mengimpor dan menggunakan komponen yang disediakan. Informasi tipe yang komprehensif diberikan sebagai antarmuka TypeScript, yang memudahkan integrasi dan memberikan keamanan tipe tambahan, tidak peduli apakah Anda menggunakan TypeScript dalam proyek Anda atau tidak.
Jika Anda ingin mengembangkan RCT secara lokal, berikut beberapa petunjuknya:
yarn untuk menginstal dependensiyarn build sekali secara lokal sebelum menjalankan perintah dev apa punyarn start untuk memulai docusaurus dan paket dalam mode jam tangan, dan/atau yarn storybook untuk menjalankan buku cerita
