Δημιουργήστε φοβερούς πίνακες εργαλείων στο React χρησιμοποιώντας το Tremor

Η δημιουργία μιας πολύπλοκης διεπαφής χρήστη στο 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 install @tremor/react

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

    import "@tremor/react/dist/esm/tremor.css";

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

πώς να κάνετε μια σειρά snapchat

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

 npm i heroicons@1.0.6 @tremor/react

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

 import "./App.css"; 
import "@tremor/react/dist/esm/tremor.css"; 
export default function App() { 
  return ( 
    <div> 
      <h1>Our Awesome React Dashboard</h1>  
    </div> 
  ); 
} 

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

 function Dashboard() { 
  return <div>Dashboard</div>; 
} 
 
export default Dashboard; 

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

πώς να απενεργοποιήσετε τον χρόνο οθόνης

 import Dashboard from "./components/Dashboard"; 

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

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

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

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

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

 import { 
  Card, 
  Title, 
  Text, 
  ColGrid, 
  AreaChart, 
  ProgressBar, 
  Metric, 
  Flex, 
} from "@tremor/react"; 
 
function Dashboard() { 
  return ( 
    <main> 
      <Title>Sales Dashboard</Title> 
      <Text>This is a sample dashboard built with Tremor.</Text> 
 
      {/* Main section */} 
      <Card marginTop="mt-6"> 
        <div className="h-96" /> 
      </Card> 
 
      {/* KPI section */} 
      <ColGrid numColsMd={2} gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6"> 
        <Card> 
          {/* Placeholder to set height */} 
          <div className="h-28" /> 
        </Card> 
      </ColGrid> 
    </main> 
  ); 
} 
 
export default Dashboard; 
 

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

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

Για να προσθέσετε ένα στοιχείο στο μπλοκ του κελύφους σας, αντικαταστήστε το

 <Title>Performance</Title> 
 
<Text>Comparison between Sales and Profit</Text> 
 
<AreaChart 
  marginTop="mt-4" 
  data={data} 
  categories={["Sales", "Profit"]} 
  dataKey="Month" 
  colors={["indigo", "fuchsia"]} 
  valueFormatter={valueFormatter} 
  height="h-80" 
/> 
 

 // Data to display in the main section 
const data = [ 
  { 
    Month: "Jan 21", 
    Sales: 2890, 
    Profit: 2400, 
  }, 
  { 
    Month: "Feb 21", 
    Sales: 1890, 
    Profit: 1398, 
  }, 
// ... 
  { 
    Month: "Jan 22", 
    Sales: 3890, 
    Profit: 2980, 
  }, 
]; 
 
const valueFormatter = (number) => 
 
$ ${Intl.NumberFormat("us").format(number).toString()}; 
 

 // Data to display in KPI section 
const categories = [ 
  { 
    title: "Sales", 
    metric: "$ 12,699", 
    percentageValue: 15.9, 
    target: "$ 80,000", 
  }, 
  { 
    title: "Profit", 
    metric: "$ 45,564", 
    percentageValue: 36.5, 
    target: "$ 125,000", 
  }, 
  { 
    title: "Customers", 
    metric: "1,072", 
    percentageValue: 53.6, 
    target: "2,000", 
  }, 
  { 
    title: "Yearly Sales Overview", 
    metric: "$ 201,072", 
    percentageValue: 28.7, 
    target: "$ 700,000", 
  }, 
]; 
 

 {categories.map((item) => ( 
  <Card key={item.title}> 
    <Text>{item.title}</Text> 
    <Metric>{item.metric}</Metric> 
    <Flex marginTop="mt-4"> 
      <Text 
        truncate={true} 
      >{`${item.percentageValue}% (${item.metric})`}</Text> 
 
      <Text>{item.target}</Text> 
    </Flex> 
 
    <ProgressBar 
      percentageValue={item.percentageValue} 
      marginTop="mt-2" 
    /> 
  </Card> 
))}