[Γωνιώδης] Το Angular6 Material2 ενσωματώνει το πλαίσιο προτροπής μηνύματος ειδοποίησης

Γωνιακό υλικό Το Material Design, κινεζική ονομασία: Material Design Language, είναι μια νέα γλώσσα σχεδιασμού που κυκλοφόρησε από την Google, η οποία σύμφωνα με την Google έχει σχεδιαστεί για να παρέχει μια πιο συνεπή και ευρύτερη «εμφάνιση και αίσθηση» για κινητά τηλέφωνα, tablet, επιτραπέζιους υπολογιστές και «άλλες πλατφόρμες». Σύμφωνα με την Google, το Material Design βασίζεται στην «πραγματική αφή, εμπνευσμένη από τη μελέτη του χαρτιού και του μελανιού» και είναι σε θέση να επιτρέψει στους χρήστες να «κατανοήσουν τις οπτικές ενδείξεις που χρησιμοποιούνται για να αντικαταστήσουν τον πραγματικό κόσμο» «χωρίς να αντιβαίνουν στις αρχές της μηχανικής». Επιπλέον, οι βασικές αρχές του φωτός, της επιφάνειας και της κίνησης είναι βασικές για την αναπαράσταση του τρόπου με τον οποίο τα αντικείμενα κινούνται, αλληλεπιδρούν και υπάρχουν στο χώρο σε σχέση μεταξύ τους. Τα ρεαλιστικά εφέ φωτός και σκιάς δείχνουν τις ραφές μεταξύ των μπλοκ, χωρίζουν χώρους και επισημαίνουν κινούμενα μέρη. Για πιο αναλυτική εισαγωγή, επισκεφθείτε την επίσημη ιστοσελίδα του ΥλικούΗ σύνδεση με υπερσύνδεσμο είναι ορατή.。 Το Angular Material είναι ένα σύνολο πλαισίων διεπαφής χρήστη Angular2+ που υλοποιούνται τέλεια από την ομάδα Angular με βάση την προδιαγραφή υλικού, την επίσημη διεύθυνση του ιστότοπου:Η σύνδεση με υπερσύνδεσμο είναι ορατή. Αυτό το άρθρο χρησιμοποιεί το στοιχείο MatSnackBar της Angular Material για να ενσωματώσει ένα πλαίσιο ειδοποίησης, ας δούμε πρώτα τις αποδόσεις: Βήμα 1: Εγκατάσταση Η σύνδεση είναι ορατή. Βήμα 2: Διαμορφώστε την κινούμενη εικόνα Μόλις εγκατασταθεί το πακέτο κινούμενων εικόνων, εισαγάγετε το BrowserAnimationsModule στην εφαρμογή σας για να ενεργοποιήσετε την υποστήριξη κινούμενων εικόνων. app.module.ts εισαγωγή ως εξής: Η σύνδεση είναι ορατή. Βήμα 3: Εισαγάγετε το θέμα Η συμπερίληψη θεμάτων είναι απαραίτητη για την εφαρμογή όλων των βασικών και θεματικών στυλ στην εφαρμογή σας. Για να ξεκινήσετε με προκατασκευασμένα θέματα, συμπεριλάβετε ένα από τα προκατασκευασμένα θέματα του Angular Material παγκοσμίως στην εφαρμογή σας. Εάν χρησιμοποιείτε το Angular CLI, μπορείτε να το ρυθμίσετεστο styles.scss： Η σύνδεση είναι ορατή. ΕάνΔεν χρησιμοποιείταιΓωνιακό CLI, τότε<link>μπορεί να περάσειΤα στοιχεία σας περιέχουν προκατασκευασμένα θεματικά index.html. Βήμα 4: Ξεκινήστε να ενθυλακώνετε το πλαίσιο ειδοποίησης Εισαγάγετε τον κατάλογο /app/services μέσω του cd της εντολής cmd και μπορείτε να τροποποιήσετε τον κατάλογο σύμφωνα με το δικό σας έργο και να εκτελέσετε την εντολή Create Service: Η σύνδεση είναι ορατή. Ο κωδικός ts έχει ως εξής: Η σύνδεση είναι ορατή. Βήμα 5: Διαμορφώστε το στυλ CSS του πλαισίου προτροπής στο έργοστυλ.scssΣτο κάτω μέρος του αρχείου, προσθέστε το ακόλουθο στυλ, το οποίο μπορεί να τροποποιηθεί ανάλογα με την πραγματική σας κατάσταση! Ο κωδικός έχει ως εξής: Η σύνδεση είναι ορατή. Βήμα 6: Χρησιμοποιήστε το πλαίσιο ειδοποίησης Παίρνω ως παράδειγμα τη διεπαφή σύνδεσης και την εισάγω στο login.module.tsΥπηρεσία ειδοποίησηςκαιMatSnackBarModuleΣυνιστώσες ενότητες, ως εξής: Η σύνδεση είναι ορατή. Χρησιμοποιείται σε login.component.ts στοιχείο, ο κωδικός έχει ως εξής: Η σύνδεση είναι ορατή. Τεκμηρίωση api στοιχείων MatSnackBar:Η σύνδεση με υπερσύνδεσμο είναι ορατή. (Τέλος)

Παρτιτούρα

Αριθμός συμμετεχόντων1	ΜΒ+1	συνεισφέρω+1	Κατάρρευση λόγος
κιλ	+ 1	+ 1	Με βοήθησε πολύ

Δείτε όλες τις αξιολογήσεις