Τα συστατικά UI / UX στο Angular, είναι γνωστά ως Γωνιακά υλικά. Αυτοίβοηθήστε την εκτέλεση των γωνιακών εφαρμογών αποτελεσματικά . Ωστόσο, εάν δεν τα γνωρίζετε ακόμη, ακολουθεί ένα άρθρο που θα σας βοηθήσει να μάθετε λεπτομερώς τα γωνιακά υλικά. Επίσης, to να αποκτήσετε σε βάθος γνώση του Angular, σκεφτείτε να εγγραφείτε ' από την Edureka.
Σε αυτό το άρθρο, θα εξετάσω τα ακόλουθα θέματα:
Εισαγωγή στα γωνιακά υλικά
Υλικά παρουσιάστηκαν ως σχεδιαστική γλώσσα που αναπτύχθηκε από την Google το 2014. Σχεδιασμός υλικών είναι ένα εργαλείογια πλαίσια front-end, το οποίο σας βοηθάει οπτικός , κίνηση , και ΑΛΛΗΛΕΠΙΔΡΑΣΗ σχέδιο. Σας βοηθά επίσης να προσαρμοστείτε σε διαφορετικές συσκευές και διαφορετικά μεγέθη οθόνης. Αρχικά, επισημάνθηκε με ετικέτα στο AngularJS για να κάνει αυτές τις εφαρμογές περισσότερες ελκυστικός και εκτελέστε γρηγορότερα . Στη συνέχεια, η Google έγραψε εκ νέου τον κώδικα από το μηδέν και κατάργησε το JS, δηλ. , και το ονόμασαν τον Σεπτέμβριο του 2016. Αργότερα, η Google επισήμανε το Design Material σε Angular, το οποίο χρησιμοποιεί , και το ονόμασαν γωνιακά υλικά.
Γωνιακά υλικά ή τα στοιχεία διεπαφής χρήστη (UI) σάς βοηθούν να σχεδιάσετε την εφαρμογή σας σε ένα δομημένος τρόπος. Προσελκύουν χρήστες και το κάνουν ευκολότερη πρόσβαση τα στοιχεία ή τα στοιχεία που υπάρχουν στην εφαρμογή σας. Βοηθούν επίσης στο σχεδιασμό των εφαρμογών σας με ελκυστικό τρόπο, με μοναδικά στυλ και σχήματα . Αυτά τα στοιχεία βοηθούν στη βελτίωση της εφαρμογής σας σταθερός , γρήγορα , πολύπλευρος και ακόμη και το σχεδιασμό ευαίσθητος ιστοσελίδες.
Εγκατάσταση γωνιακού υλικού
Τώρα, ας ξεκινήσουμε με έναν γρήγορο οδηγό σχετικά με τον τρόπο εγκατάστασης γωνιακών υλικών. Πρώτα πράγματα πρώτα, βεβαιωθείτε ότι έχετε εγκαταστήσει το Angular στο σύστημά σας. Εάν δεν είστε εξοικειωμένοι με το Angular, ανατρέξτε στον σύνδεσμο στο . Μόλις ρυθμίσετε τα πάντα, μπορείτε να προσθέσετε γωνιακά υλικά στο έργο σας χρησιμοποιώντας την ακόλουθη εντολή:
προσθήκης @ γωνιακό / υλικό
Πρώτον, θα σας ζητήσει να επιλέξετε ένα προκαθορισμένο όνομα θέματος ή ένα προσαρμοσμένο θέμα.
Πρέπει να επιλέξετε το προεπιλεγμένο θέμα 'Indigo / Pink' που είναι το προεπιλεγμένο θέμα για το στυλ της εφαρμογής σας. Μπορείτε επίσης να επιλέξετε το θέμα 'Προσαρμοσμένο', ώστε να μπορείτε να προσαρμόσετε τα αρχεία θεμάτων που περιλαμβάνουν όλα τα κοινά στυλ.
Στη συνέχεια, θα σας ζητήσει να ρυθμίσετε HammerJS . Το HammerJS είναι μια δημοφιλής βιβλιοθήκη, η οποία χρησιμοποιείται κυρίως σε γωνιακή εφαρμογή. Προσθέτει υποστήριξη για κινήσεις αφής, όπως Swipe, Pan, Pinch, Rotate και πολλά άλλα, ειδικά σε εφαρμογές για κινητά.
Μπορείτε να επιλέξετε είτε 'Ναι' είτε 'Όχι'. Το HammerJS μπορεί να είναι χρήσιμο όταν χρησιμοποιείτε την εφαρμογή σας σε κινητά. Καθώς τα κινητά προσφέρουν οθόνες αφής, αυτές οι κινήσεις είναι πιο χρήσιμες και μπορεί να φαίνονται μοντέρνες στην εφαρμογή σας για κινητά.
Αφού επιλέξετε την επιλογή σας, στη συνέχεια θα σας ζητήσει να ρυθμίσετε Κινούμενα σχέδια προγράμματος περιήγησης για γωνιακό υλικό.
Πρέπει να επιλέξετε 'Ναι' για να μπορείτε να χρησιμοποιείτε κινούμενα σχέδια στην εφαρμογή σας. Οι γωνιακές κινούμενες εικόνες κάνουν την εφαρμογή σας πιο διασκεδαστική και πιο εύκολη στη χρήση. Αυτό μπορεί να βελτιώσει την εφαρμογή και την εμπειρία χρήστη που προσελκύει την προσοχή των χρηστών.
Στη συνέχεια, αυτό θα εγκαταστήσει γωνιακά υλικά στην εφαρμογή σας.
Συστατικά γωνιακού υλικού
Όπως αναφέρθηκε προηγουμένως, τα συστατικά γωνιακού υλικού δεν είναι παρά UI / UX Στοιχεία σχεδιασμού. Περιέχουν μια μεγάλη γκάμα στοιχείων όπως Έλεγχος φόρμας, Πλοήγηση, Κουμπιά & Δείκτες, Αναδυόμενα παράθυρα και πολλά άλλα. Αυτά τα στοιχεία σας βοηθούν να εφαρμόσετε μοτίβα σύμφωνα με τις προδιαγραφές Σχεδιασμού Υλικού.
Προχωρώντας, ας δούμε μερικά παραδείγματα για τον τρόπο εφαρμογής αυτών των στοιχείων στην γωνιακή εφαρμογή σας.
Πλοήγηση
Πρώτον, θα συζητήσω τα στοιχεία της Πλοήγησης.
- Γραμμή εργαλείων
Πρέπει να πληκτρολογήσετε τον ακόλουθο κωδικό στο app.component.html αρχείο για να χρησιμοποιήσετε το στοιχείο Toolbar στην εφαρμογή σας.
Εκμάθηση γωνιακού υλικού είναι ένα δοχείο από γωνιακό υλικό που χρησιμοποιείται για κεφαλίδες και τίτλους. Το χρώμα του δοχείο μπορεί να αλλάξει χρησιμοποιώντας το χρώμα ιδιοκτησία.Από προεπιλογή, οι γραμμές εργαλείων χρησιμοποιούν ουδέτερο χρώμα φόντου με βάση το τρέχον θέμα, δηλαδή ανοιχτό ή σκοτεινό.Μπορείτε να επιλέξετε τρία προεπιλεγμένα θέματα που είναι: 'πρωταρχικός' , 'προφορά' , ή 'προειδοποιώ' .Για να χρησιμοποιήσετε αυτήν τη γραμμή εργαλείων, πρέπει πρώτα να την εισαγάγετε app.module.ts αρχείο από γωνιακό υλικό χρησιμοποιώντας την ακόλουθη εντολή:
εισαγωγή {MatToolbarModule} από '@ angular / material'Αργότερα, πρέπει επίσης να προσθέσετε αυτήν την ενότητα στο εισαγωγές: [] τμήμα που βρίσκεται στο app.module.ts αρχείο.
εισαγωγές: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Για το Mat-Toolbar, πρέπει να προσθέσετε ' MatToolbarModule '.
Τώρα, ας εξυπηρετήσουμε το έργο σας χρησιμοποιώντας την ακόλουθη εντολή:
σερβίρισμα -ο
Αυτό θα ανοίξει το έργο σας στο προεπιλεγμένο πρόγραμμα περιήγησης του συστήματός σας όπως φαίνεται παρακάτω:
Εάν θέλετε να αλλάξετε το χρώμα της γραμμής εργαλείων σύμφωνα με την επιλογή σας, μπορείτε να το κάνετε με τη βοήθεια του φύλλου στυλ CSS. Επιτρέψτε μου να σας δείξω ένα παράδειγμα.
Πρώτον, πρέπει να διαγράψετε χρώμα ιδιοκτησία από κοντέινερ και, στη συνέχεια, πληκτρολογήστε τα ακόλουθα CSS κωδικός στο app.component.css αρχείο.
γραμμή εργαλείων ματ {background-color: / * color-of-your-choice * / color: / * text-color * /}Τώρα, εξυπηρετήστε το έργο σας για να δείτε το αποτέλεσμα.
- Μενού
Στη συνέχεια, θα συζητήσω το συστατικό μενού. Πρέπει να πληκτρολογήσετε τον ακόλουθο κωδικό στο app.component.html αρχείο.
Εκμάθηση γωνιακού υλικού Βοήθεια ρυθμίσεων μενούΑς προσθέσουμε λίγο στυλ στο Μενού κουμπί. Πρέπει να πληκτρολογήσετε τον ακόλουθο κωδικό στο app.component.css αρχείο.
.space {flex: 1 1 auto} .btns {πλάτος: 100px ύψος: 40px μέγεθος γραμματοσειράς: μεγάλο περίγραμμα-ακτίνα: 10px περίγραμμα: 3px στερεό # 113c89 φόντο-χρώμα: lightcoral}class = 'space' χρησιμοποιείται για την προσθήκη διαστήματος μεταξύ 'Όνομα γραμμής εργαλείων' και 'Επιλογή μενού'.
Σε περίπτωση που δεν είστε εξοικειωμένοι με το φύλλο στυλ CSS, μπορείτε να ανατρέξετε στο ιστολόγιό μας στο για να μπείτε σε βάθος.
Ακριβώς όπως το Toolbar, για χρήση και εμπορευματοκιβώτια, πρέπει να ακολουθήσετε την ίδια διαδικασία όπως παραπάνω, για εισαγωγή MatMenuModule και MatButtonModule από γωνιακό υλικό και προσθέστε τα εισαγωγές: [] τμήμα που βρίσκεται στο app.module.ts αρχείο.
Εξυπηρετήστε το έργο σας τώρα για να εμφανίσετε την έξοδο.
Στοιχεία ελέγχου φόρμας
Τώρα, θα συζητήσω τα στοιχεία στο Έλεγχος φόρμας.
- Πεδίο φόρμας
Όπως υποδηλώνει το όνομα, το Form-Field χρησιμοποιείται για εισόδους που δίδονται από τον χρήστη. Χρησιμοποιείται συνήθως για την εγγραφή ενός χρήστη, σε μια εφαρμογή ή σε έναν ιστότοπο.
Πρέπει να πληκτρολογήσετε τον ακόλουθο κωδικό στο app.component.html αρχείο για να χρησιμοποιήσετε το στοιχείο Form-Field στην εφαρμογή σας.
Στοιχεία ελέγχου φόρμας
Ονομα
Ως συνήθως, πρέπει να εισαγάγετε MatFormFieldModule και MatInputModule και προσθέστε τα εισαγωγές: [] τμήμα που βρίσκεται στο app.module.ts αρχείο. Ο παραπάνω κώδικας χρησιμοποιείται γενικά για την εισαγωγή Ονομάτων όπως 'Όνομα', 'Επώνυμο' κ.λπ. Μπορείτε ακόμη να χρησιμοποιήσετε Επικυρωτές και να κάνετε ένα πεδίο υποχρεωτικό. Για παράδειγμα, μπορείτε να το χρησιμοποιήσετε για το πεδίο E-mail. Μπορείτε να αποκρύψετε ή να αποκρύψετε το κείμενο για κωδικούς πρόσβασης. Για αναφορά σας, δείτε τον παρακάτω κώδικα:
Εισαγάγετε το email σας {{getErrorMessage ()}} Εισαγάγετε τον κωδικό πρόσβασής σας {{απόκρυψη; 'visibility_off': 'ορατότητα'}}Στο δικό σας app.component.css αρχείο, πρέπει να προσθέσετε τον ακόλουθο κώδικα:
.example-container {padding-left: 50px}Τώρα, στο δικό σας app.component.ts αρχείο, πρέπει να εισαγάγετε FormControl και Επικυρωτές από @ γωνιακές / μορφές Ευρετήριο.
εισαγωγή {FormControl, Validators} από '@ angular / form'Πρέπει να προσθέσετε ακόμη και το κείμενο για να εμφανιστεί ένα σφάλμα στην επόμενη τάξη.
εξαγωγή κλάσης AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('απαιτείται'); 'Πρέπει να εισαγάγετε μια τιμή': this.email.hasError ('email'); 'Όχι έγκυρο email': ''} hide = true}Αναφερόμενος στην παραπάνω διαδικασία, πρέπει να πληκτρολογήσετε τον ακόλουθο κωδικό στο app.module.ts αρχείο για την εισαγωγή των απαραίτητων ενοτήτων.
εισαγωγή {FormsModule, ReactiveFormsModule} από το '@ angular / form' εισαγωγή {MatIconModule} από το '@ angular / material'Αργότερα, πρέπει να προσθέσετε αυτές τις ενότητες στο εισαγωγές: [] Ενότητα.
- Κουμπί ραδιοφώνου
Τα κουμπιά ραδιοφώνου χρησιμοποιούνται γενικά για την επιλογή μεταξύ των διαφορετικών επιλογών. Μπορείτε να δείτε τον παρακάτω κωδικό για αναφορά.
Για app.component.html αρχείο,
Γένος
Αρσενικό θηλυκό
Για app.component.css αρχείο,
κουμπί-ραδιόφωνο-κουμπί {Padding-left: 50px}Τώρα, πρέπει να εισαγάγετε MatRadioModule και προσθέστε το εισαγωγές: [] τμήμα που βρίσκεται στο app.module.ts αρχείο.
Αργότερα, πρέπει να εξυπηρετήσετε το έργο σας για να εμφανίσετε την έξοδο.
Προχωρώντας, θα συζητήσω το CDK Angular Material.
Γωνιακό υλικό CDK
CDK, επίσης γνωστό ως Κιτ εξαρτημάτων , είναι μια βιβλιοθήκη του προκαθορισμένες συμπεριφορές στο γωνιακό υλικό, το οποίο είναι ένα σύνολο εργαλείων που εφαρμόζουν κοινά μοτίβα αλληλεπίδρασης και χαρακτηριστικά εφαρμογής . Δεν έχει στυλ ειδικά για το Material Design. Ας δούμε ένα παράδειγμα CDK.
- Πεδίο κειμένου
Το στοιχείο πεδίου κειμένου παρέχει βοηθητικά προγράμματα για εργασία με πεδία εισαγωγής κειμένου. Μπορείτε να χρησιμοποιήσετε στοιχεία CDK στο πεδίο κειμένου για να αλλάξετε το μέγεθος των εισόδων. Ας δούμε ένα παράδειγμα πώς να το εφαρμόσουμε.
Για app.component.html αρχείο,
Γωνιακό υλικό CDK
Μέγεθος γραμματοσειράς 10px 12px 14px 16px 18px 20px Autosize textarea
Για το app.component.ts αρχείο, πρέπει πρώτα να εισαγάγετε τα απαραίτητα στοιχεία.
εισαγωγή {CdkTextareaAutosize} από '@ angular / cdk / text-field' εισαγωγή {NgZone, ViewChild} από '@ angular / core' εισαγωγή {take} από 'rxjs / operator'Τώρα, πρέπει να πληκτρολογήσετε τον ακόλουθο κωδικό μέσα στην τάξη.
είναι μεταπτυχιακό και μεταπτυχιακό το ίδιο
εξαγωγή κλάσης AppComponent {buildor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) αυτοματοποίηση: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)). subsubcribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Στη συνέχεια, πρέπει να εισαγάγετε MatSelectModule και προσθέστε το εισαγωγές: [] τμήμα που βρίσκεται στο app.module.ts αρχείο.
Τέλος, πρέπει να εξυπηρετήσετε το έργο σας για να εμφανίσετε το αποτέλεσμα.
Αυτό δεν είναι το συμπέρασμα και υπάρχουν πολλά άλλα στοιχεία στα γωνιακά υλικά. Μπορείτε να τους ανατρέξετε από το επίσημη ιστοσελίδα γωνιακού υλικού.
Με αυτό, θα ήθελα να τερματίσω το ιστολόγιό μου. Ελπίζω να είστε ξεκάθαροι για τις βασικές αρχές του γωνιακού υλικού.Αν έχετε αμφιβολίες ή απορίες σχετικά με αυτό το άρθρο, μην διστάσετε να τα δημοσιεύσετε στην παρακάτω ενότητα σχολίων.
Εάν θέλετε να μάθετε όλα όσα μόλις μάθατε από αυτό το ιστολόγιο και πολλά περισσότερα Γωνιώδης , και προσανατολίστε την καριέρα σας σε έναν ικανό Angular Developer και, στη συνέχεια, σκεφτείτε να εγγραφείτε στο δικό μας ' .
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων αυτού του ιστολογίου 'Angular Material' και θα επικοινωνήσουμε μαζί σας το συντομότερο δυνατό.