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

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

Τι είναι ο Τρόμος;

Το Tremor είναι μια σύγχρονη, ανοιχτού κώδικα, βιβλιοθήκη στοιχείων διεπαφής χρήστη χαμηλού επιπέδου για τη δημιουργία πινάκων εργαλείων στο React. Το Tremor βασίζεται στα Tailwind CSS, React και Recharts (άλλη μια βιβλιοθήκη γραφημάτων που βασίζεται σε στοιχεία για το React). Επιπλέον, χρησιμοποιεί εικονίδια από το Heroicons.

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

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

Το Tremor υποστηρίζει την προσαρμογή, φυσικά, και το καθιστά εύκολο μέσω του συστήματος props της React.

Πώς να ξεκινήσετε με τον τρόμο

Ξεκινήστε από δημιουργώντας μια νέα εφαρμογή React χρησιμοποιώντας την δημιουργία-αντίδραση-εφαρμογή πακέτο (ή Vite αν αυτό προτιμάτε).

Θα χρειαστεί να έχετε ήδη εγκατεστημένα τα Node.js και npm στο σύστημά σας. Μπορείτε να το επιβεβαιώσετε τρέχοντας κόμβος --έκδοση και μετά npm -- έκδοση σε μια γραμμή εντολών. Εάν λείπει κάποια εντολή, μπορείτε να την εγκαταστήσετε χρησιμοποιώντας μια απλή διαδικασία. δείτε αυτόν τον οδηγό για εγκατάσταση των Node.js και npm στα Windows, για παράδειγμα.

Ρύθμιση του έργου σας React With Tremor

1. Ανοίξτε το τερματικό σας και πλοηγηθείτε στον κατάλογο που προτιμάτε χρησιμοποιώντας το CD εντολή.
2. Τρέξιμο npx create-react-app tremor-tutorial. Αυτή η εντολή θα δημιουργήσει μια νέα εφαρμογή React που ονομάζεται τρέμουλο-φροντιστήριο στο σύστημά σας στον τρέχοντα κατάλογο.
3. Μεταβείτε στον κατάλογο της εφαρμογής εκτελώντας cd tremor-tutorial.
4. Εγκαταστήστε το Tremor στο έργο React χρησιμοποιώντας την ακόλουθη εντολή:

   npm εγκαταστήστε το @tremor/react

5. Αφού εγκαταστήσετε το Tremor, εισαγάγετε το πακέτο στο δικό σας App.js (ή main.jsx εάν χρησιμοποιήσατε Vite) προσθέτοντας την ακόλουθη γραμμή στο κάτω μέρος των εισαγωγών σας:

   εισαγωγή"@tremor/react/dist/esm/tremor.css";

Αν και το Tremor χρησιμοποιεί το Tailwind CSS, δεν χρειάζεται να το εγκαταστήσετε στην εφαρμογή React για να χρησιμοποιήσετε τη βιβλιοθήκη. Αυτό συμβαίνει επειδή το Tremor έχει ήδη εγκαταστήσει το Tailwind εσωτερικά. Ωστόσο, αν θέλετε, ρίξτε μια ματιά στο σεμινάριο μας για εγκατάσταση του Tailwind CSS στο React.

Στη συνέχεια, εγκαταστήστε το Heroicons στο έργο σας χρησιμοποιώντας την ακόλουθη εντολή:

npm i [email protected] @tremor/react

Τώρα, ας αφαιρέσουμε τον περιττό κώδικα στο δικό μας src/App.js αρχείο. Εδώ είναι ο κωδικός εκκίνησης μας App.js:

εισαγωγή"./App.css";
εισαγωγή"@tremor/react/dist/esm/tremor.css";
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


Το Awesome React Dashboard μας</h1> 
 </div>
 );
}

Στη συνέχεια, δημιουργήστε ένα ειδικό συστατικά στον υποφάκελό σας src ντοσιέ. Σε αυτό συστατικά φάκελο, δημιουργήστε ένα νέο Dashboard.js αρχείο και προσθέστε τον ακόλουθο κώδικα:

λειτουργίαΤαμπλό() {
ΕΠΙΣΤΡΟΦΗ<div>Ταμπλόdiv>;
}
εξαγωγήΠροκαθορισμένο Ταμπλό;

Εισαγάγετε το στοιχείο του πίνακα ελέγχου App.js προσθέτοντας την ακόλουθη δήλωση μετά τις άλλες εισαγωγές:

εισαγωγή Ταμπλό από"./components/Dashboard";

Τέλος, εμφανίστε το στοιχείο στην εφαρμογή React σας προσθέτοντας κάτω από h1 στοιχείο.

Δημιουργία πίνακα ελέγχου με τρέμουλο

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

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

Πρώτα, προσθέστε τον παρακάτω κώδικα στο δικό σας Dashboard.js αρχείο:

εισαγωγή {
 Κάρτα,
 Τίτλος,
 Κείμενο,
 ColGrid,
 Διάγραμμα περιοχής,
 Γραμμή προόδου,
 Μετρικός,
 Καλώδιο,
} από"@tremor/react";
λειτουργίαΤαμπλό() {
ΕΠΙΣΤΡΟΦΗ (


 {/* Κύρια ενότητα */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* Ενότητα KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Placeholder για ορισμό ύψους */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
εξαγωγή προεπιλογή Πίνακας ελέγχου,
 
Το μπλοκ φλοιού περιέχει διαφορετικά στοιχεία που εισάγετε στην κορυφή του αρχείου. Εάν κάνετε προεπισκόπηση στο πρόγραμμα περιήγησής σας, θα δείτε μόνο δύο κενά μπλοκ.
Μπορείτε να συμπληρώσετε τα μπλοκ σας με τα προκατασκευασμένα στοιχεία του Tremor, όπως γράφημα, κάρτα ή πίνακα. Μπορείτε να τραβήξετε δεδομένα από ένα API (REST ή GraphQL) ή να τα αποθηκεύσετε σε μια σειρά αντικειμένων ακριβώς μέσα στο στοιχείο σας.
Για να προσθέσετε ένα στοιχείο στο μπλοκ φλοιού, αντικαταστήστε το 
 γραμμή με τα εξής:
 
 
Μετά ότι, προσθέστε τον ακόλουθο πίνακα πριν από τη δήλωση return (αυτά είναι τα δεδομένα που θα εμφανίσει η κύρια ενότητα του πίνακα ελέγχου):
 
 // Δεδομένα προς εμφάνιση σε ο κύρια ενότητα
const δεδομένα = [
 {
 Μήνας: "21 Ιανουαρίου",
 Πωλήσεις: 2890,
 Κέρδος: 2400,
 },
 {
 Μήνας: "Φεβ 21",
 Πωλήσεις: 1890,
 Κέρδος: 1398,
 },
 // ...
 {
 Μήνας: "22 Ιανουαρίου",
 Εκπτώσεις: 3890,
 Κέρδος: 2980,
 },
];
const valueFormatter = (αριθμός) =>< /span>
$ ${Intl.NumberFormat("us").format (number).toString()};
Στη συνέχεια, προσθέστε τον ακόλουθο κώδικα στο αρχείο σας μετά το valueFormatter:
 
 // Δεδομένα για εμφάνιση σε KPI ενότητα
const κατηγορίες = [
 {
 τίτλος: "Πωλήσεις",
 μέτρηση: "12.699$",
 %Value: 15,9,
 στόχος: "$ 80.000",
 },
 {
 τίτλος: "Κέρδος",
 μέτρηση: "45.564$" span>,
 percentageValue: 36,5,
 στόχος: "$125.000",
 },
 {
 τίτλος: "Πελάτες",
 μέτρηση: "1.072",
 %Value:  53.6,
 στόχος: "2.000",
 },
 {
 τίτλος: "Επισκόπηση ετήσιων πωλήσεων",
 μέτρηση: "201.072$",
 %Value: 28,7,
 στόχος: "700.000$",
 },
];
Για την Συστοιχία κατηγοριών αντικειμένων, πρέπει να αντιστοιχίσετε σε κάθε αντικείμενο για να εμφανίσετε τα δεδομένα σε ξεχωριστά στοιχεία Κάρτας. Πρώτα, διαγράψτε το στοιχείο της κάρτας στην ενότητα KPI και, στη συνέχεια, αντικαταστήστε το με αυτόν τον κωδικό:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>
  %Value={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
Και αυτό είναι. Δημιουργήσατε τον πρώτο σας πίνακα ελέγχου με το Tremor. Δείτε τον πίνακα ελέγχου σας εκτελώντας npm start. Θα πρέπει να είναι παρόμοιο με το παραπάνω στιγμιότυπο οθόνης.
 Προσαρμογή στοιχείων Tremor
Το Tremor επιτρέπει την προσαρμογή χρησιμοποιώντας στηρίγματα. Θα πρέπει να ελέγξετε την τεκμηρίωση του στοιχείου που θέλετε να προσαρμόσετε και να ελέγξετε όλες τις ιδιότητες που περιλαμβάνονται με τις προεπιλεγμένες τιμές τους.
Για παράδειγμα, εάν έχετε , μπορείτε να αποκρύψετε τον άξονα x περνώντας το στηρίγμα showXAxis={false} ή να αλλάξετε το ύψος χρησιμοποιώντας ύψος={h-40}. Για τα στηρίγματα που δηλώνουν τιμές που βρίσκονται στο Tailwind CSS, όπως το μέγεθος, τα κενά, τα χρώματα και τα υπόλοιπα, πρέπει να χρησιμοποιήσετε κλάσεις βοηθητικού προγράμματος Tailwind.
 Δημιουργήστε πολύπλοκους πίνακες εργαλείων αντίδρασης με ευκολία
Χάρη σε βιβλιοθήκες στοιχείων όπως το Tremor, δεν χρειάζεται να δημιουργείτε κάθε ένα μέρος της διεπαφής χρήστη σας από την αρχή. Η χρήση μιας βιβλιοθήκης όπως το Tremor μπορεί να σας εξοικονομήσει τόσο χρόνο όσο και από τον πονοκέφαλο της δημιουργίας πολύπλοκων ανταποκρίσιμων διεπαφών.