Skip to content

milvard/react-beautiful-dnd-gr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 

Repository files navigation

react beautiful dnd logo

react-beautiful-dnd (rbd)

Όμορφο και προσιτό drag και drop για λίστες με React

CircleCI branch npm

Παράδειγμα εφαρμογής

Παίξε αν θες με το παράδειγμα!

Κύρια χαρακτηριστικά

  • Όμορφη και φυσική κίνηση των αντικειμένων 💐
  • Προσιτό: δυναμική υποστήριξη πληκρολογίου και ανάγνωσης οθόνης ♿️
  • Εξαιρετική επίδοση 🚀
  • Καθαρό και ισχυρό api που θα το βρει απλό κάποιος που θα αρχίσει να ασχολείται μαζί του
  • Εκτελείται εξεραιτικά καλά με απλές αλληλεπιδράσεις ενός φυλλομετρητή
  • Ανώνυμο στυλ
  • Χωρίς δημιουργία επιπλέον περικαλλύματος για κόμβους του dom - flexbox και φιλικό σε διαχείρηση εστίασης!

Ξεκίνα από εδώ 👩‍🏫

Έχουμε δημιουργήσει ένα δωρεάν μάθημα στο egghead.io 🥚 για να σε βοηθήσουμε να ξεκινήσεις με react-beautiful-dnd όσο το δυνατόν γρηγορότερα.

course-logo

Προσωρινά υποστηριζόμενο σύνολο χαρακτηριστικών ✅

  • Κάθετες λίστες ↕
  • Οριζόντιες λίστες ↔
  • Κίνηση μεταξύ λιστών (▤ ↔ ▤)
  • Υποστήριξη εικονικής λίστας 👾 - ξεκλείδωμα 10,000 αντικειμένων @ 60fps
  • Συνδυασμός αντικειμένων
  • Υποστήριξη για ποντίκι 🐭, πληκτρολόγιο 🎹♿️ και αφή 👉📱 (κινητό, tablet..)
  • Υποστήριξη για πολλαπλό drag
  • Απίστευτη υποστήριξη σε ανάγνωση οθόνης ♿️ - παρέχουμε εκπληκτική εμπειρία σε εργαλεία ανάγνωσης οθόνης στα αγγλικά. Παρέχουμε επιπλέον πλήρη παραμετροποίηση ελέγχων και διεθνή υποστήριξη σε αυτούς που τη χρειάζονται 💖
  • Υποθετικό dragging και υποθετικό dropping
  • Πολλαπλές ανεξάρτητες λίστες σε μια σελίδα
  • Ελαστικά μεγέθη αντικειμένων - τα draggable αντικείμενα μπορούν να έχουν διαφορετικά ύψη (κάθετες λίστες) ή πλάτη (οριζόντιες λίστες)
  • Πρόσθεσε και αφαίρεσε αντικείμενα κατα τη διάρκεια ενός drag
  • Συμβατότητα με σημασιολογική αναταξινόμηση <table> - πρότυπα table
  • Αυτόματο scrolling - αυτόματο scroll των κιβωτίων και του παραθύρου όπως απαιτείται κατά τη διάρκεια ενός drag (ακόμα και με πληκτρολόγιο 🔥)
  • Παραμετροποίηση χειρισμού drag - μπορείς να κάνεις drag ένα ολόκληρο αντικείμενο ή ένα μέρος του.
  • Δυνατότητα να μετακινήσεις ένα drag αντικείμενο σε ένα άλλο αντικείμενο ενώ κάνεις drag - Αλλαγή προγόνου <Draggable />
  • Δημιουργία σεναρίου για drag και drop εμπειριών 🎮
  • Επιτρέπει επεκτάσεις για να υποστηρίζουν οποιαδήποτε είσοδο θέλεις 🕹
  • 🌲 Υποστήριξη δένδρου μέσω @atlaskit/tree πακέτου
  • Μια <Droppable /> λίστα μπορεί να είνα ένα scroll κιβώτιο (χωρίς πατέρα που κάνει scroll) ή να είναι παιδί ενός scroll κιβωτίου (αυτό επίσης δεν έχει πατέρα που κάνει scroll)
  • Ανεξάρτητες εμφωλευμένες λίστες - μία λίστα μπορεί να είνα παιδί μια άλλης λίστας, αλλά δεν μπορείς να κάνεις drag σε αντικείμενα από μια λίστα πατέρα σε μια λίστα παιδί
  • Συμβατότητα εμφάνισης στην πλευρά εξυπηρετητή (SSR) - δες resetServerContext()
  • Εκτελείται σωστά με εμφωλευμένα διαδραστικά αντικείμενα βάσει προτύπου

Κίνητρο 🤔

react-beautiful-dnd υπάρχει για να δημιουργεί όμορφο drag και drop για λίστες που οποιοσδήποτε μπορεί να χρησιμοποιήσει - ακόμη και άνθρωποι που δεν βλέπουν. Για μια καλή ανασκόπηση της ιστορίας και του κινήτρου της εργασίας, μπορείς να δεις αυτές τις εξωτερικές πηγές:

Όχι για όλους ✌️

Υπάρχουν πολλές βιβλιοθήκες που επιτρέπουν drag και drop διαδράσεις στη React. Η πιο αξιοσημείωτη είναι η react-dnd. Μπορεί να κάνει απίστευτη δουλειά στο να παρέχει ένα σπουδαίο σύνολο από drag και drop πρωτόγονα που δουλεύουν ειδικά καλά με άγρια ασυνέπεια html5 drag και drop χαρακτηριστικό. react-beautiful-dnd είναι υψηλού επιπέδου αφαίρεση ειδικά φτιαγμένο για λίστες (κάθετη, οριζόντια, κίνηση μεταξύ λιστών, εμφωλευμένες λίστες..). Μέσα σε αυτό το υποσύνο λειτουργιών ηreact-beautiful-dnd προσφέρει μια ισχυρή, φυσική και όμορφη εμπειρία drag και drope. Ωστόσο, δεν μπορεί να παρέχει το πλάτος των λειτουργιών που παρέχονται από τη react-dnd. Οπότε η react-beautiful-dnd μπορεί να μην είναι για εσένα, εξαρτάται για την περίπτωση που το θέλεις.

Τεκμηρίωση 📖

Σχετικά 👋

Αισθητήρες 🔉

Οι τρόποι με τους οποίους κάποιος μπορεί να ξεκινήσει και να ελέγχει ένα drag

Διεπαφή Προγραμματισμού Εφαρμογών 🏋️‍

διάγραμμα

  • <DragDropContext /> - Τυλίγει το κομμάτι της εφαρμογής που θέλεις να έχει ενεργοποιημένο το drag και drop
  • <Droppable /> - Μια περιοχή που μπορεί να γίνει drop. Περιέχει <Draggable />s
  • <Draggable /> - Σε τι μπορεί να γίνει drag
  • resetServerContext() - Χρησιμότητα εμφάνισης στην πλευρά εξυπηρετητή (SSR)

Οδηγίες 🗺

Πρότυπα 👷‍

Υποστήριξη 👩‍⚕️

Διάβασέ το σε άλλες γλώσσες 🌎

Συγγραφέας ✍️

Alex Reardon @alexandereardon

Συνεργάτες 🤝

About

react-beautiful-dnd's Greek document. *in progress*

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published