Izdelava kompleksnega uporabniškega vmesnika v Reactu, kot je nadzorna plošča, je lahko zastrašujoča, če to počnete iz nič. Na srečo vam tega ni treba storiti.

Ena najboljših knjižnic komponent, ki jih lahko uporabite, je Tremor, ki vam omogoča ustvarjanje sodobnih, odzivnih nadzornih plošč v Reactu z malo truda. Ugotovite, kako uporabiti Tremor za ustvarjanje nadzornih plošč v Reactu.

Kaj je tremor?

Tremor je sodobna, odprtokodna knjižnica komponent uporabniškega vmesnika na nizki ravni za gradnjo nadzornih plošč v Reactu. Tremor nadgrajuje Tailwind CSS, React in Recharts (še ena knjižnica grafikonov za React, ki temelji na komponentah). Poleg tega uporablja ikone iz Heroicons.

Ponaša se z več kot 20 komponentami z vsemi bistvenimi elementi za izdelavo fantastičnega analitičnega vmesnika, kot so grafikoni, kartice in vnosni elementi. Knjižnica vključuje majhne, ​​modularne komponente, kot so značke, gumbi, spustni meniji in zavihki, ki jih lahko kombinirate, da ustvarite popolne nadzorne plošče.

Tremor izstopa po tem, da je zelo samozavesten, tako da, če se strinjate z odločitvami knjižnice, lahko v hipu zaženete nadzorno ploščo profesionalnega videza.

Tremor seveda podpira prilagajanje in omogoča preprosto izvajanje prek Reactovega sistema rekvizitov.

Kako začeti s tremorjem

Začni z ustvarjanje nove aplikacije React uporabljati create-react-aplikacija paket (ali Vite, če vam je to ljubše).

V sistemu boste morali že imeti nameščena Node.js in npm. To lahko potrdite tako, da zaženete vozlišče --različica in potem npm --različica v ukazni vrstici. Če kateri koli ukaz manjka, ga lahko namestite s preprostim postopkom; glejte ta vodnik za namestitev Node.js in npm v sistem Windows, na primer.

Nastavitev vašega projekta React s Tremorjem

1. Odprite svoj terminal in se pomaknite do želenega imenika z uporabo cd ukaz.
2. Teči npx create-react-app tremor-tutorial. Ta ukaz bo ustvaril novo aplikacijo React, imenovano tremor-vadnica v vašem sistemu v trenutnem imeniku.
3. Preklopite v imenik aplikacij z zagonom cd tremor-tutorial.
4. Namestite Tremor v svoj projekt React z naslednjim ukazom:

   npm namestite @tremor/react

5. Ko namestite Tremor, uvozite paket v svoj App.js (oz main.jsx če ste uporabili Vite), tako da dodate naslednjo vrstico na dno vaših uvozov:

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

Čeprav Tremor uporablja Tailwind CSS, vam ga za uporabo knjižnice ni treba namestiti v aplikacijo React. To je zato, ker ima Tremor Tailwind že nastavljen interno. Če pa želite, si oglejte našo vadnico na namestitev Tailwind CSS v React.

Nato namestite Heroicons v svoj projekt z naslednjim ukazom:

npm i [email protected] @tremor/react

Zdaj pa odstranimo nepotrebno kodo v našem src/App.js mapa. Tukaj je naša začetna koda App.js:

uvoz"./App.css";
uvoz"@tremor/react/dist/esm/tremor.css";
izvozprivzetofunkcijoaplikacija() {
vrnitev (


Naša odlična nadzorna plošča React</h1> 
 </div>
 );
}

Nato ustvarite namensko komponente podmapo v vašem src mapo. V tem komponente mapo, ustvarite novo Dashboard.js datoteko in dodajte naslednjo kodo:

funkcijoNadzorna plošča() {
vrnitev<div>Nadzorna ploščadiv>;
}
izvozprivzeto armaturna plošča;

Uvozite komponento nadzorne plošče App.js z dodajanjem naslednje izjave za druge uvoze:

uvoz Nadzorna plošča od"./components/Dashboard";

Končno prikažite komponento v svoji aplikaciji React z dodajanjem pod h1 element.

Ustvarjanje nadzorne plošče s tremorjem

Če želite ustvariti popolno nadzorno ploščo z uporabo Tremorja, z najmanj napora, izberite enega od razpoložljivih blokov. Bloki so vnaprej pripravljene postavitve, sestavljene iz različnih majhnih modularnih komponent.

Dobro izhodišče je Bloki tremorja razdelek, ki prikazuje različne vrste vnaprej zgrajenih komponent blokov, ki jih lahko uporabite. Lupine postavitve vam na primer omogočajo, da sestavite različne komponente, da ustvarite nadzorno ploščo.

Najprej dodajte naslednjo kodo v svoj Dashboard.js mapa:

uvoz {
 Kartica,
 Naslov,
 besedilo,
 ColGrid,
 AreaChart,
 ProgressBar,
 metrika,
 Flex,
} od"@tremor/reagiraj";
funkcijoNadzorna plošča() {
vrnitev (


 {/* Glavni del */}
 "mt-6">
 
"h-96" /> 
 </Kartica>
 {/* razdelek KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Nadomestni znak za nastavitev višine */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
izvoz privzeto Nadzorna plošča;
Blok lupine vsebuje različne komponente, ki uvozite na vrhu datoteke. Če si to ogledate v brskalniku, boste videli samo dva prazna bloka.
Vaše bloke lahko napolnite z vnaprej pripravljenimi komponentami Tremorja, kot so grafikon, kartica ali tabela. Podatke lahko črpate iz API-ja (REST ali GraphQL) ali jih shranite v matriko predmetov neposredno znotraj vaše komponente.
Če želite dodati komponento v blok lupine, zamenjajte 
 z naslednjim:
 
 
Po to dodajte naslednjo matriko pred stavek return (to so podatki, ki jih bo prikazal glavni del nadzorne plošče):
 
 // Podatki za prikaz v the main section
const data = [
 {
 Mesec: »21. januar«,
 Prodaja: 2890,
 Dobiček: 2400,
 },
 {
 Mesec: "febr. 21",
 Prodaja: 1890,
 Dobiček: 1398,
 },
 // ...
 {
 Mesec: »22. januar«,
 Prodaja: 3890,
 Dobiček: 2980,
 },
];
const valueFormatter = (število) =>< /span>
$ ${Intl.NumberFormat("us").format (number).toString()};
Nato dodajte to kodo svoji datoteki za valueFormatter:
 
 // Podatki za prikaz v KPI razdelek
const kategorije = [
 {
 naslov: »Prodaja«,
 meritev: "12.699 $",
 percentageValue: 15,9,
 cilj: "$ 80.000",
 },
 {
 naslov: "Dobiček",
 meritev: "$45.564" span>,
 percentageValue: 36,5,
 cilj: "$125.000",
 },
 {
 naslov: "Stranke",
 meritev: "1.072",
 percentageValue:  53,6,
 cilj: »2.000«,
 },
 {
 naslov: »Letni pregled prodaje«,
 metrika: »201.072 $«,
 percentageValue: 28,7,
 cilj: "$700.000",
 },
];
Za kategorij niz predmetov, morate preslikati vsak predmet, da prikažete podatke v ločenih komponentah kartice. Najprej izbrišite komponento kartice v razdelku KPI in jo nato zamenjajte s to kodo:
 
 {categories.map((item) => span> (
 
 {item.title}</Besedilo>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Besedilo>
 {item.target}</Text>
 </Flex>
  percentageValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
In to je to. S Tremorjem ste ustvarili svojo prvo nadzorno ploščo. Oglejte si svojo nadzorno ploščo tako, da zaženete npm start. Moral bi biti podoben zgornjemu posnetku zaslona.
 Prilagajanje komponent Tremor
Tremor omogoča prilagajanje z uporabo rekvizitov. Pregledati boste morali dokumentacijo komponente, ki jo želite prilagoditi, in preveriti vse vključene lastnosti z njihovimi privzetimi vrednostmi.
Na primer, če imate , lahko skrijete os x tako, da posredujete prop showXAxis={false} ali spremenite višino z height={h-40}. Za rekvizite, ki deklarirajo vrednosti, ki jih najdete v Tailwind CSS, kot so velikost, razmik, barve in ostalo, morate uporabiti razrede pripomočkov Tailwind.
 Z lahkoto sestavite kompleksne nadzorne plošče React
Zahvaljujoč knjižnicam komponent, kot je Tremor, vam ni treba graditi vsake en del vašega uporabniškega vmesnika iz nič. Uporaba knjižnice, kot je Tremor, vam lahko prihrani čas in glavobol pri ustvarjanju zapletenih odzivnih uporabniških vmesnikov.