Δημιουργία της εφαρμογής React σας με το Blueprint UI Toolkit

Η δημιουργία μιας εφαρμογής React από την αρχή μπορεί να είναι μια χρονοβόρα και προκλητική εργασία, ειδικά όταν πρόκειται για στοιχεία στυλ. Εκεί είναι χρήσιμο το Blueprint UI Toolkit. Η εργαλειοθήκη είναι ένα σύνολο επαναχρησιμοποιήσιμων στοιχείων διεπαφής χρήστη που μπορούν να σας βοηθήσουν να δημιουργήσετε συνεπείς και οπτικά ελκυστικές διεπαφές για τις εφαρμογές σας React.

Μάθετε για τα βασικά του Blueprint UI Toolkit και πώς να το χρησιμοποιήσετε για να δημιουργήσετε μια απλή εφαρμογή React.

Το Blueprint UI Toolkit είναι ένα Βιβλιοθήκη στοιχείων React UI. Περιέχει μια συλλογή από προκατασκευασμένα εξαρτήματα που είναι εύκολα στη χρήση και προσαρμογή. Μπορείτε να χρησιμοποιήσετε αυτά τα προσχεδιασμένα εξαρτήματα εκτός συσκευασίας ή να τα τροποποιήσετε ώστε να ταιριάζουν στις συγκεκριμένες ανάγκες σας.

Τα στοιχεία του Blueprint UI Toolkit περιλαμβάνουν Κουμπιά, Φόρμες, Τρόποι, Πλοήγηση και Πίνακες. Η χρήση αυτών των εξαρτημάτων μπορεί να σας εξοικονομήσει χρόνο και προσπάθεια, καθώς δεν χρειάζεται να σχεδιάζετε και να κατασκευάζετε κάθε στοιχείο από την αρχή.

Για να ξεκινήσετε με το Blueprint UI Toolkit, θα χρειαστεί δημιουργήστε μια εφαρμογή React.

Μόλις ρυθμιστεί το έργο σας, μπορείτε να εγκαταστήσετε το Blueprint UI Toolkit χρησιμοποιώντας οποιοδήποτε πρόγραμμα εγκατάστασης πακέτου Node που επιλέγετε. Για να εγκαταστήσετε το Blueprint UI Toolkit χρησιμοποιώντας npm, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:

npm εγκατάσταση @blueprintjs/core

Για να χρησιμοποιήσετε το νήμα, εκτελέστε αυτήν την εντολή:

νήμα προσθήκη @blueprintjs/core

Αφού εγκαταστήσετε το Blueprint UI Toolkit, μπορείτε να χρησιμοποιήσετε τα στοιχεία της επιλογής σας στην εφαρμογή React.

Πριν χρησιμοποιήσετε τα στοιχεία, συμπεριλάβετε τα αρχεία CSS από το Blueprint UI Toolkit:

@εισαγωγή"normalize.css";
@εισαγωγή"@blueprintjs/core/lib/css/blueprint.css";
@εισαγωγή"@blueprintjs/icons/lib/css/blueprint-icons.css";

Η προσθήκη του μπλοκ κώδικα παραπάνω στο αρχείο CSS εφαρμόζει τα στυλ διεπαφής χρήστη του Blueprint στα στοιχεία του.

Για παράδειγμα, για να προσθέσετε ένα κουμπί στην εφαρμογή σας, χρησιμοποιήστε το Κουμπί στοιχείο από το Blueprint UI Toolkit:

εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { Κουμπί } από"@blueprintjs/core";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (



"επιτυχία" κείμενο="Κάντε κλικ σε εμένα" εικονίδιο="φρεσκάρω" μικρό={αληθής}/>
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

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

ο πρόθεση Το prop καθορίζει τη φύση του κουμπιού, η οποία αντικατοπτρίζεται στο χρώμα του φόντου του. Σε αυτό το παράδειγμα, το κουμπί έχει ένα επιτυχία πρόθεση που του δίνει ένα πράσινο χρώμα φόντου. Το Blueprint UI προσφέρει πολλές βασικές προθέσεις, όπως πρωταρχικός (μπλε), επιτυχία (πράσινος), προειδοποίηση (πορτοκαλί) και κίνδυνος (το κόκκινο).

Μπορείτε να καθορίσετε το κείμενο που εμφανίζεται μέσα στο κουμπί με το κείμενο στήριγμα. Μπορείτε επίσης να προσθέσετε εικονίδια στο κουμπί χρησιμοποιώντας το εικόνισμα στήριγμα. Παράλληλα με το εικόνισμα στήριγμα είναι το δεξιά εικονίδιο prop, το οποίο προσθέτει το εικονίδιο στη δεξιά πλευρά του κουμπιού.

Τέλος, το μεγάλο και μικρό Τα boolean props καθορίζουν το μέγεθος του κουμπιού. ο μεγάλο το prop κάνει το κουμπί μεγαλύτερο, ενώ το μικρό το στήριγμα το κάνει μικρότερο.

Το προηγούμενο μπλοκ κώδικα θα δημιουργήσει ένα κουμπί που μοιάζει με αυτό:

Μπορείτε επίσης να χρησιμοποιήσετε το AnchorButton στοιχείο για να δημιουργήσετε ένα κουμπί στην εφαρμογή σας. ο AnchorButton Το στοιχείο είναι μια εξειδικευμένη έκδοση του στοιχείου Button που έχει σχεδιαστεί ρητά για χρήση ως σύνδεσμος.

Αυτό το στοιχείο δέχεται πολλά από τα ίδια στηρίγματα με το στοιχείο Button, συμπεριλαμβανομένων κείμενο, μεγάλο, μικρό, πρόθεση, και εικόνισμα. Δέχεται επίσης το href και στόχος στηρίγματα.

ο href prop καθορίζει τη διεύθυνση URL με την οποία συνδέεται το κουμπί και το στόχος prop καθορίζει το παράθυρο ή το πλαίσιο προορισμού για τη σύνδεση:

εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { AnchorButton } από"@blueprintjs/core";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (



 href=" https://example.com/"
 πρόθεση="πρωταρχικός"
 κείμενο="Κάντε κλικ σε εμένα"
 στόχος="_κενό"
 />
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτό το μπλοκ κώδικα παραπάνω αποδίδει ένα AnchorButton συστατικό. Το συστατικό href η τιμή του στηρίγματος είναι " https://example.com/” και το στόχος Η τιμή prop είναι "_blank" που σημαίνει ότι ο σύνδεσμος θα ανοίξει σε άλλη καρτέλα ή παράθυρο του προγράμματος περιήγησης.

Ένα άλλο βασικό στοιχείο του Blueprint UI Toolkit είναι το Κάρτα συστατικό. Αυτό είναι ένα επαναχρησιμοποιήσιμο εξάρτημα που εμφανίζει πληροφορίες με ελκυστικό οπτικό τρόπο.

Το στοιχείο Card παίρνει δύο στηρίγματα διαδραστικό και ανύψωση. ο ανύψωση Το prop ελέγχει το βάθος σκιάς της κάρτας, με υψηλότερες τιμές που παράγουν ένα πιο εμφανές εφέ σκιάς.

ο διαδραστικό Το prop δέχεται μια τιμή boolean. Όταν οριστεί σε true, ενεργοποιεί τις αλληλεπιδράσεις με το δείκτη του ποντικιού και κλικ στην κάρτα, επιτρέποντάς της να ανταποκρίνεται στις εισαγωγές του χρήστη.

Για παράδειγμα:

εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { Κάρτα, Υψόμετρο } από"@blueprintjs/core";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (



αληθής} elevation={Υψόμετρο. ΔΥΟ}>
Αυτή είναι μια κάρτα</h2>


Αυτό είναι κάποιο περιεχόμενο σε η κάρτα μου</p>
 </Card>
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Σε αυτό το παράδειγμα, το Κάρτα το στοιχείο έχει τίτλο και κάποιο περιεχόμενο. ο διαδραστικό το prop έχει ρυθμιστεί σε αληθής.

Εισάγετε επίσης το Ανύψωση συστατικό από @blueprintjs/core. ο Ανύψωση Το στοιχείο είναι ένας αριθμός που ορίζει ένα σύνολο προκαθορισμένων τιμών που μπορείτε να χρησιμοποιήσετε για να ορίσετε το βάθος σκιάς ενός στοιχείου.

Εδώ είναι οι διαθέσιμες τιμές του Ανύψωση enum:

1. Ανύψωση. ΜΗΔΕΝ: Αυτή η τιμή ορίζει το βάθος σκιάς στο 0, υποδεικνύοντας ότι το στοιχείο δεν έχει εφαρμοσμένη σκιά
2. Ανύψωση. ΕΝΑΣ: Αυτή η τιμή ορίζει το βάθος σκιάς σε 1.
3. Ανύψωση. ΔΥΟ: Αυτή η τιμή ορίζει το βάθος σκιάς σε 2.
4. Ανύψωση. ΤΡΙΑ: Αυτή η τιμή ορίζει το βάθος σκιάς στο 3.
5. Ανύψωση. ΤΕΣΣΕΡΑ: Αυτή η τιμή ορίζει το βάθος σκιάς στο 4.
6. Ανύψωση. ΠΕΝΤΕ: Αυτή η τιμή ορίζει το βάθος σκιάς στο 5.

Η απόδοση του μπλοκ κώδικα παραπάνω θα εμφανίσει μια εικόνα στην οθόνη σας που μοιάζει με αυτό:

Τα στοιχεία του Blueprint UI Toolkit προσαρμόζονται εύκολα. Μπορείτε να χρησιμοποιήσετε το παραδοσιακό CSS για να τροποποιήσετε την εμφάνιση των εξαρτημάτων ή μπορείτε να χρησιμοποιήσετε τα στηρίγματα που παρέχονται για να αλλάξετε τη συμπεριφορά τους.

Για παράδειγμα, μπορείτε να προσαρμόσετε την εμφάνιση ενός κουμπιού περνώντας ένα όνομα τάξης στήριγμα:

εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { Κουμπί } από"@blueprintjs/core";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (



"Κάντε κλικ σε εμένα" className="κουμπί μου"/>
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Το παραπάνω μπλοκ κώδικα εφαρμόζει μια προσαρμοσμένη κλάση στο κουμπί, επιτρέποντάς σας να τροποποιήσετε την εμφάνισή του χρησιμοποιώντας CSS:

.κουμπί μου{
σύνορα-ακτίνα: 10px;
υλικό παραγεμίσματος: 0.4 εκμ 0.8 εκμ;
}

Η εφαρμογή αυτών των στυλ θα κάνει το κουμπί σας να μοιάζει κάπως έτσι:

Υπάρχουν πολλά περισσότερα στο Blueprint UI

Το Blueprint UI προσφέρει περισσότερα στοιχεία από αυτά που αναφέρθηκαν παραπάνω, όπως Alert, Popover, τοστ κ.λπ. Ωστόσο, με τις παρεχόμενες πληροφορίες, μπορείτε να δημιουργήσετε μια απλή εφαρμογή React χρησιμοποιώντας το Blueprint UI.

Μπορείτε να διαμορφώσετε την εφαρμογή React χρησιμοποιώντας διαφορετικές μεθόδους. Μπορείτε να χρησιμοποιήσετε τα παραδοσιακά CSS, SASS/SCSS, Tailwind CSS και CSS σε βιβλιοθήκες JS, όπως συναισθήματα, στοιχεία με στυλ κ.λπ.