Ant Design: Η καλύτερη βιβλιοθήκη React UI που έχω χρησιμοποιήσει ποτέ

Μια σύντομη εισαγωγή στο σχέδιο Ant

Το Ant Design, επίσης γνωστό ως "Antd", είναι μια βιβλιοθήκη στοιχείων για το ReactJS. Είναι ανοιχτή πηγή από την κινεζική εταιρική ονομασία "Ant Design" (Ιδιοκτήτης του Alibaba Group). Τα τελευταία χρόνια, ο Ant Design έχει κερδίσει μεγάλη προσοχή από την κοινότητα ανοιχτού κώδικα με πάνω από 35k αστέρια στο GitHub. Παρόλο που προέρχεται από την Κίνα αλλά χάρη στην κοινότητα, είναι καλά τεκμηριωμένο Αγγλικά.

Εξαιρετικά χαρακτηριστικά του σχεδιασμού Ant:
 . Υποστηρίξτε σχεδόν όλα τα σύγχρονα προγράμματα περιήγησης (συμπεριλαμβανομένου του IE 9+)
 . Επιχειρηματική γλώσσα σχεδιασμού για εφαρμογές ιστού
 . Ένα σύνολο υψηλής ποιότητας React εξαρτήματα από το κουτί
 . Καλά γραμμένο σε Typescript με ολοκληρωμένο σύστημα τύπου

Ant Design Grid + Σύστημα διάταξης

Αν έχετε ήδη δουλέψει με το Bootstrap, τότε θα νιώσετε σαν στο σπίτι με το σύστημα "Antd". Το σύστημα "Antd" βασίζεται σε σειρές και στήλες, όπως και κάθε άλλη βιβλιοθήκη UI. Αλλά αντί για 12 cols, το σύστημα "Antd" διαιρεί την περιοχή της οθόνης σας σε 24 cols που μπορούν να κάνουν την ορατή περιοχή σας πιο προσαρμόσιμη.

Καθορίστε το υδρορροή μεταξύ των κολώνων είναι εξίσου εύκολο:

Όχι μόνο αυτό, το σύστημα πλέγματος "Antd" υποστηρίζει επίσης 6 διαφορετικά σημεία διακοπής ώστε να μπορείτε να κάνετε την περιοχή σας ευαίσθητη και να φαίνεται καλή σε οποιαδήποτε συσκευή:

Εάν αισθάνεστε ότι το σύστημα πλέγματος είναι λίγο γενικά για την τοποθέτηση μιας σελίδας, το "Antd" έρχεται με ένα σύστημα Layout που μπορεί να σας βοηθήσει να χειριστείτε εύκολα τη συνολική διάταξη μιας σελίδας. Η διάταξη "Antd" παρέχει Header, Sider, Content, Footer που είναι απλά συστατικά περιτύλιξης για το περιεχόμενό σας, ώστε να μπορείτε να σχεδιάσετε τη σελίδα σας έτσι κι αλλιώς μπορείτε να φανταστείτε.

Και ο κώδικας για την παραπάνω εικόνα είναι:

Ένα σύνολο εικόνων υψηλής ποιότητας

Από το κουτί, το "Antd" έρχεται με ένα τεράστιο αριθμό εικόνων που μπορούν να ικανοποιήσουν οποιεσδήποτε από τις απαιτήσεις της εφαρμογής σας. Τα εικονίδια "Antd" έρχονται με 2 κύριες επιλογές: Σκιαγραφημένα εικονίδια και Γεμιστά εικονίδια. Ακόμη και εργάζονται σε προσαρμοσμένα εικονίδια κατά τη διάρκεια αυτής της γραφής:

Χρησιμοποιώντας αυτά τα εικονίδια είναι απλά εύκολο να καθορίσετε ποιο εικονίδιο θέλετε να χρησιμοποιήσετε ως συμβολοσειρά:

Ισχυρή υποστήριξη για το στοιχείο "Μορφή"

Εάν εργάζεστε με τον ιστό, σίγουρα έχετε δουλέψει με τη μορφή. Όλοι γνωρίζουμε ότι η μορφή είναι ένα αναπόσπαστο μέρος του ιστού.

Το "Antd" μας παρέχει ένα στοιχείο της φόρμας που είναι ένα περιτύλιγμα για τα FormItems σας. Για κάθε FormItem, μπορείτε να χρησιμοποιήσετε το Εισαγωγή, TextArea, Checkbox, Ραδιόφωνο ή ακόμα και Date / TimePicker.

Με το "Antd", δεν χρειάζεται πλέον το Controlled-Component επειδή το api μπορεί να το χειριστεί για εμάς. Αλλά το πιο ισχυρό όπλο του "Antd" Form είναι το σύστημα επικύρωσης του. Το μόνο που έχετε να κάνετε είναι να καθορίσετε κανόνες για το FormItem. Ex: ο τύπος τιμής πρέπει να είναι συμβολοσειρά ή αριθμός, η ελάχιστη ή η μέγιστη τιμή ενός αριθμού εισόδου ή αυτό το πεδίο απαιτείται ή όχι και ακόμη και να πληρούν έναν Regex ή ποιο άλλο προσαρμοσμένο κανόνα επικύρωσης μπορείτε να σκεφτείτε (συμπεριλαμβανομένης της επικύρωσης async με την πλευρά του διακομιστή). Αν το FormItem δεν πληρούσε κανέναν από τους κανόνες επαλήθευσης, θα υπάρχει άμεση κατάσταση μηνυμάτων και επικύρωσης.

Σύστημα Global Feedback

Φανταστείτε αν η εφαρμογή σας μπορεί να παρέχει άμεση ειδοποίηση σε ενέργειες χρηστών όπως ακριβώς και στο Facebook όταν κάποιος σας επισημάνει σε κατάσταση; Μπορείτε εύκολα να το επιτύχετε με την ειδοποίηση Antd, Μήνυμα και πολλά άλλα στοιχεία Feedback. Εδώ είναι το πώς φαίνεται:

Το Ant Design, κατά τη γνώμη μου, είναι μια από τις καλύτερες βιβλιοθήκες του React UI, οι οποίες μπορούν να συγκριθούν με τη βιβλιοθήκη υλικών UI του Google για το React. Πηγαίνετε να διαβάσετε τα έγγραφα για να μάθετε πιο ενδιαφέροντα πράγματα γι 'αυτό και HAPPY CODING !!!!