Ανταπόκριση MDL Merges React με υλικό σχεδιασμού Lite

Η Google πρόσφατα έβαλε μια βιβλιοθήκη που ονομάζεται Material Design Lite, η οποία είναι ένας πόρος διεπαφής για προγραμματιστές. Στυλ αυτόματα σε κάθε ιστότοπο χρησιμοποιώντας τις κατευθυντήριες γραμμές σχεδιασμού υλικού με προ-κατασκευασμένα CSS και JS.

Αυτό είναι ένα δημοφιλές πλαίσιο για απλά έργα dev. Ανταπόκριση Το MDL συνδυάζει το πλαίσιο της Google με τη βιβλιοθήκη React για να δημιουργήσει μια καλά στρογγυλεμένη πηγή frontend.

Το υλικό σχεδιασμό της Google είναι σαφώς το μέλλον του UI / UX στον κόσμο της Google. Και με το Material Design Lite, είναι ευκολότερο από ποτέ να υλοποιήσετε αυτά τα χαρακτηριστικά σε οποιονδήποτε ιστότοπο με ιδιόκτητη βιβλιοθήκη ανοιχτού κώδικα.

Το React είναι επίσης μακράν το πιο δημοφιλές πλαίσιο JS frontend που χρησιμοποιείται για τα στοιχεία προβολής frontend. Με το React MDL μπορείτε να συγχωνεύσετε αυτά τα στοιχεία React με τη βιβλιοθήκη MDL για να δείτε μια άποψη όπως θα βρείτε στην ηλεκτρονική τεκμηρίωση της Google.

Ακολουθεί ένα πρότυπο πρότυπο άρθρου, ώστε να μπορείτε να έχετε μια αίσθηση του τρόπου με τον οποίο φαίνεται αυτό.

Αυτή η σελίδα δεν διαθέτει πολλά στοιχεία React αλλά δείχνει την αισθητική του σχεδιασμού υλικού. Θα βρείτε πολύ περισσότερη δράση σε αυτό το demo που κατασκευάστηκε χρησιμοποιώντας τα στοιχεία React.

Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με το Material Design Lite στο GitHub repo εάν είστε περίεργοι να μάθετε περισσότερα. Από εκεί μπορείτε να κατεβάσετε τα πρωτογενή CSS και JS για να ενσωματώσετε στη σελίδα σας, η οποία υποστηρίζει αυτόματα όλα τα σύγχρονα προγράμματα περιήγησης και τη χαριτωμένη υποβάθμιση.

Δυστυχώς, δεδομένου ότι το React MDL είναι ακόμα αρκετά νέο, δεν έχει πλήρη υποστήριξη για όλα τα στοιχεία.

Αλλά μπορείτε να δείτε μια πλήρη λίστα εδώ, συμπεριλαμβανομένων μικρών demos για κάθε ένα. Αυτό περιλαμβάνει επίσης κομμάτια του πηγαίου κώδικα που μπορείτε να αντιγράψετε / επικολλήσετε στα δικά σας έργα όπως απαιτείται.

Θα δεν συνιστούμε τη μάθηση Αντιδράστε MDL έως ότου αισθάνεστε άνετα και με τις δύο βιβλιοθήκες.

Η σουίτα Material Design Lite είναι αρκετά απλή στην αρχή, αλλά το React είναι πολύ πιο περίπλοκο.

Για να μάθετε περισσότερα για το MDL, ανατρέξτε στη σελίδα Συχνές ερωτήσεις στον επίσημο ιστότοπό σας. Προσφέρει συμβουλές σχετικά με το πού να χρησιμοποιήσετε το MDL, το οποίο διαθέτει και πώς μπορεί να χωρέσει σε μια τυπική ροή εργασιών του webdev.

Αλλά ειλικρινά ακόμη και αν δεν αντιλαμβάνεστε πολύ καλά, μπορείτε ακόμα να περάσετε με όλα τα δείγματα στη σελίδα των εξαρτημάτων. Για παράδειγμα, η σελίδα κειμένου έχει κείμενα εργασίας με χρήση σχεδίου υλικού, αλλά με αποσπάσματα κώδικα React.

Μπορείτε να παίξετε γύρω και να δείτε τι μπορείτε να χτίσετε. Και οι δύο βιβλιοθήκες είναι εντελώς δωρεάν και ανοιχτές πηγές για όλα τα έργα, τόσο προσωπικά όσο και εμπορικά.

Μπορείτε να μάθετε περισσότερα από τη σελίδα React MDL GitHub εάν θέλετε να μελετήσετε την πηγή και να κάνετε κατάδυση.