Υλοποίηση - Ένα πλαίσιο σχεδιασμού υλικού CSS
Η Google Σχεδιασμός Υλικών έχει ως στόχο να λειτουργεί καλά στον Ιστό και σε εφαρμογές για κινητά. Είναι κερδίζοντας δημοτικότητα με τους προγραμματιστές και αν θέλετε να το υιοθετήσετε επίσης, υπάρχουν πολλοί τρόποι για να υλοποιήσετε το σχεδιασμό υλικού στον ιστότοπό σας. Μπορείτε να χρησιμοποιήσετε Polymer ή γωνιακό, ή μπορείτε να χρησιμοποιήσετε το υλικοποιητή.
Η υλοποίηση είναι α CSS που βασίζεται σε αρχές σχεδιασμού υλικού με υποστήριξη Sass για καλύτερη ανάπτυξη. Έχει προεπιλεγμένο στυλ για εύκολη χρήση και έχει λεπτομερή τεκμηρίωση.
Μπορείτε να βρείτε πολλά χρήσιμα συστατικά μέσα: διαλόγου, modal, επιλογή ημερομηνίας, κουμπιά υλικού, parallax, κάρτες και πολλά άλλα. Έχει επίσης πολλές επιλογές πλοήγησης από τις οποίες μπορείτε να επιλέξετε, όπως drop down, slide in menu και tabs. Η Materialalize χρησιμοποιεί επίσης a 12-πλέγμα σύστημα με 3 ερωτήματα μέσου οθόνης προεπιλεγμένου μεγέθους οθόνης: ένα μέγιστο πλάτος 600px είναι μια κινητή συσκευή, συσκευή δισκέτας 992px και περισσότερο από 992px θεωρείται μια επιτραπέζια συσκευή.
Ξεκινώντας
Υπάρχουν δύο τρόποι για να ξεκινήσετε με το Materialalize: χρήση τυπικό CSS ή Sass. Και οι δύο πηγές μπορούν να μεταφορτωθούν εδώ. Μπορείτε επίσης να τα αποκτήσετε με το μπιτς χρησιμοποιώντας την ακόλουθη εντολή:
εγκαταστήστε το τροφοδότη
Αφού λάβετε τις πηγές, φροντίστε να τις συνδέσετε σωστά στο αρχείο έργου ή να μεταγλωττίσετε την πηγή αν χρησιμοποιείτε την έκδοση Sass.
Χαρακτηριστικά
Σε αυτή την ενότητα θα εξηγήσω ορισμένα χαρακτηριστικά που προσφέρει η Materialalize.
1. Sass Mixins
Αυτό το πλαίσιο μεταφέρει το Sass Mixins το οποίο προσθέτει αυτόματα όλα τα προθέματα του προγράμματος περιήγησης όταν γράφετε κάποιες ιδιότητες CSS. Είναι ένα μεγάλο χαρακτηριστικό που πρέπει να διασφαλίσουμε συμβατότητα σε όλα τα προγράμματα περιήγησης, με ελάχιστη αναστάτωση και κωδικοποίηση όσο το δυνατόν.
Ρίξτε μια ματιά στις ακόλουθες ιδιότητες animation:
-webkit-animation: 0.5s; -moz-animation: 0.5s; -ο-κινούμενη εικόνα: 0,5s; -ms-animation: 0.5s; κινούμενη εικόνα: 0.5s;
Αυτές οι γραμμές κώδικα μπορούν να ξαναγραφούν με μία μόνο γραμμή του Sass mixin έτσι:
@ περιλαμβάνει κινούμενα σχέδια (.5s);
Υπάρχουν περίπου 19 κύριες αναμνήσεις διαθέσιμος. Για να δείτε την πλήρη λίστα, μεταβείτε στην κατηγορία Sass στο MIXINS αυτί.
2. Κείμενο ροής
Ενώ άλλα πρότυπα πλαισίων χρησιμοποιούν σταθερό κείμενο, η υλοποίηση υλοποιεί κείμενο με πραγματικά απόκριση. Το μέγεθος κειμένου και το ύψος γραμμής κλιμακώνονται επίσης ευαίσθητα για να διατηρηθεί η αναγνωσιμότητα. Όταν πρόκειται για μικρότερες οθόνες, το ύψος γραμμής είναι μεγαλύτερο.
Για να χρησιμοποιήσετε το Flow Text, μπορείτε απλά να προσθέσετε το flow-text τάξη στο επιθυμητό κείμενο. Για παράδειγμα:
Αυτό είναι κείμενο ροής.
Δείτε το demo εδώ στην ενότητα Κείμενο ροής.
3. Ελαφρύ αποτέλεσμα με τα κύματα
Το υλικό σχεδιάζεται επίσης με διαδραστική ανατροφοδότηση, ένα αξιοσημείωτο παράδειγμα είναι το φαινόμενο κυματισμού. Στο Materialalize, ονομάζεται αυτή η επίδραση Κυματιστά. Βασικά, όταν οι χρήστες κάνουν κλικ ή αγγίζουν / αγγίζουν ένα κουμπί, μια κάρτα ή οποιοδήποτε άλλο στοιχείο, εμφανίζεται το εφέ. Τα κύματα μπορούν εύκολα να δημιουργηθούν προσθέτοντας κύματα-αποτέλεσμα τάξη στα στοιχεία σας.
Αυτό το απόσπασμα σας δίνει το αποτέλεσμα των κυμάτων.
υποβάλλουν
Οι κυματισμοί είναι γκρίζες από προεπιλογή. Αλλά σε μια κατάσταση όπου έχετε φόντο σκούρο χρώμα, μπορεί να θέλετε να αλλάξετε το χρώμα. Για να προσθέσετε ένα διαφορετικό χρώμα, απλώς προσθέστε κύματα- (χρώμα) στο στοιχείο. Αντικαταστήστε το "(χρώμα)" με ένα όνομα χρώματος.
υποβάλλουν
Μπορείτε να επιλέξετε από 7 χρώματα: φως, κόκκινο, κίτρινο, πορτοκαλί, μοβ, πράσινο και φρούτα. Μπορείτε πάντα να δημιουργήσετε ή να προσαρμόσετε τα δικά σας χρώματα εάν τα χρώματα αυτά δεν ταιριάζουν στις ανάγκες σας.
4. Σκιά
Για να δημιουργήσετε σχέσεις μεταξύ στοιχείων, το Υλικό Σχεδιασμού συνιστά να χρησιμοποιείτε υψόμετρο στις επιφάνειες. Η υλική παράδοση βασίζεται στην αρχή αυτή z-βάθος- (αριθμός) τάξη. Μπορείτε να καθορίσετε το βάθος σκιάς αλλάζοντας τον (αριθμό) από 1 σε 5:
Βάθος σκιάς 3
Όλα τα βάθη της σκιάς επιδεικνύονται με την παρακάτω εικόνα.
5. Κουμπιά και εικονίδια
Στο υλικό σχεδιασμό υπάρχουν τρεις κύριοι τύποι κουμπιών: ανασηκωμένο κουμπί, fab (κουμπί επιπλέουσας ενέργειας) και επίπεδο κουμπί.
(1) Ανυψωμένο κουμπί
Το ανυψωμένο κουμπί είναι το προεπιλεγμένο κουμπί. Για να δημιουργήσετε αυτό το κουμπί, απλά προσθέστε ένα btn τάξη στα στοιχεία σας. Αν θέλετε να δώσετε το φαινόμενο κύματος όταν κάνετε κλικ ή πατήσετε, πηγαίνετε με αυτό:
Κουμπί
Εναλλακτικά, μπορείτε επίσης να δώσετε στο κουμπί ένα εικονίδιο στα αριστερά ή στα δεξιά του κειμένου. Για το εικονίδιο, θα πρέπει να προσθέσετε προσαρμοσμένο ετικέτα με το όνομα και τη θέση της κλάσης εικονιδίων. Για παράδειγμα:
Κατεβάστε
Στο παραπάνω απόσπασμα χρησιμοποιούμε mdi-αρχείο-αρχείο-download class για το εικονίδιο λήψης. Υπάρχουν περίπου 740 διαφορετικά εικονίδια μπορείς να χρησιμοποιήσεις. Για να τα δείτε ξανά στη σελίδα Sass στην καρτέλα "Εικόνες".
(2) Πλωτό κουμπί
Μπορεί να δημιουργηθεί ένα επιπλέον πλήκτρο με την προσθήκη btn-floating class και το επιθυμητό εικονίδιο. Για παράδειγμα:
Στο υλικό σχεδιασμό, το επίπεδο κουμπί χρησιμοποιείται συχνά στο παράθυρο διαλόγου. Για να το δημιουργήσετε, απλά προσθέστε btn-επίπεδη στο στοιχείο σας όπως αυτό:
Πτώση
Επιπλέον, τα κουμπιά μπορούν να απενεργοποιηθούν με το άτομα με ειδικές ανάγκες κατηγορίας και έγινε μεγαλύτερη χρήση btn-large τάξη.
6. Πλέγμα
Η Materialalize χρησιμοποιεί ένα πρότυπο Δίκτυο ανταποκρινόμενο στις 12 στήλες Σύστημα. Η ανταπόκριση χωρίζεται σε τρία μέρη: μικρό (-α) για κινητό, μέτριο (m) για δισκία και μεγάλο (l) για επιφάνεια εργασίας.
Για να δημιουργήσετε στήλες, χρησιμοποιήστε s, m ή l για να υποδείξετε το μέγεθος, ακολουθούμενο από τον αριθμό πλέγματος. Για παράδειγμα, όταν θέλετε να δημιουργήσετε μια διάταξη μισού μεγέθους για κινητή συσκευή, θα πρέπει να συμπεριλάβετε ένα s6 τάξη στη διάταξη σας. s6 σημαίνει μικρό-6 που σημαίνει 6 στήλη σε μικρή συσκευή.
Πρέπει επίσης να συμπεριλάβετε ένα διάσελο class στην διάταξη που δημιουργείτε και να την τοποθετήσετε μέσα σε ένα στοιχείο που έχει το σειρά τάξη. Αυτό είναι έτσι ώστε η διάταξη μπορεί να τοποθετηθεί σωστά στις στήλες. Ακολουθεί ένα παράδειγμα:
Έχω δώδεκα στήλες ή πλήρες πλάτος εδώ4-στήλες (ένα τρίτο) εδώ4-στήλες (ένα τρίτο) εδώ4-στήλες (ένα τρίτο) εδώ
Εδώ είναι τα αποτελέσματα:
Από προεπιλογή, col s12 είναι σταθερού μεγέθους και βελτιστοποιείται για όλο το μέγεθος της οθόνης, βασικά το ίδιο με το col s12 m12 l12. Αλλά αν θέλετε να καθορίσετε το μέγεθος για τις στήλες για διαφορετικές συσκευές. Το μόνο που χρειάζεται να κάνετε είναι να καταγράψετε τα πρόσθετα μεγέθη όπως:
Το πλάτος μου έχει πάντα 12 στήλες παντούΈχω 12 στήλες στο κινητό, 6 στο tablet και 9 στην επιφάνεια εργασίας
Εδώ είναι αυτό που μοιάζει με αυτό:
Αυτά είναι μόνο μερικά χαρακτηριστικά γνωρίσματα της Materialalize. Για να μάθετε περισσότερα σχετικά με τις άλλες δυνατότητες, μεταβείτε στη σελίδα τεκμηρίωσης.
