Vytváranie komplexného používateľského rozhrania v Reacte, ako je napríklad dashboard, môže byť skľučujúce, ak to robíte od začiatku. Našťastie to nemusíte robiť.

Jednou z najlepších knižníc komponentov, ktoré môžete použiť, je Tremor, ktorý vám umožňuje vytvárať moderné, responzívne dashboardy v Reacte s malým úsilím. Zistite, ako používať Tremor na vytváranie dashboardov v Reacte.

Čo je tremor?

Tremor je moderná, open source, nízkoúrovňová knižnica komponentov používateľského rozhrania na vytváranie dashboardov v Reacte. Tremor stavia na Tailwind CSS, React a Recharts (ďalšia knižnica grafov založená na komponentoch pre React). Okrem toho používa ikony z Heroicons.

Môže sa pochváliť viac ako 20 komponentmi so všetkými náležitosťami na vytvorenie fantastického analytického rozhrania, ako sú grafy, karty a vstupné prvky. Knižnica obsahuje malé modulárne komponenty, ako sú odznaky, tlačidlá, rozbaľovacie zoznamy a karty, ktoré môžete kombinovať a vytvárať tak plnohodnotné informačné panely.

To, čo robí Tremor výnimočným, je to, že je veľmi tvrdohlavý, takže pokiaľ ste v poriadku s rozhodnutiami knižnice, môžete jednoducho spustiť profesionálne vyzerajúcu palubnú dosku.

Tremor samozrejme podporuje prispôsobenie a uľahčuje to pomocou systému rekvizít React.

Ako začať s trémou

Začnite tým vytvorenie novej aplikácie React pomocou create-react-app balík (alebo Vite, ak to uprednostňujete).

V systéme už musíte mať nainštalované súbory Node.js a npm. Môžete to potvrdiť spustením uzol --verzia a potom npm --verzia na príkazovom riadku. Ak niektorý z príkazov chýba, môžete ich nainštalovať pomocou jednoduchého procesu; pozrite si tento návod inštalácia Node.js a npm v systéme Windows, napríklad.

Nastavenie vášho projektu React s trémou

1. Otvorte svoj terminál a prejdite do preferovaného adresára pomocou cd príkaz.
2. Bežať npx create-react-app tremor-tutorial. Tento príkaz vytvorí novú aplikáciu React s názvom tremor-náuka vo vašom systéme v aktuálnom adresári.
3. Spustením prepnite do adresára aplikácie cd tremor-tutorial.
4. Nainštalujte Tremor do svojho projektu React pomocou nasledujúceho príkazu:

   npm install @tremor/react

5. Po nainštalovaní Tremoru importujte balík do svojho App.js (alebo main.jsx ak ste použili Vite) pridaním nasledujúceho riadku do spodnej časti vašich importov:

   importovať"@tremor/react/dist/esm/tremor.css";

Hoci Tremor používa Tailwind CSS, na používanie knižnice si ho nemusíte inštalovať do aplikácie React. Je to preto, že Tremor už má Tailwind interne nastavený. Ak však chcete, pozrite si náš návod na inštalácia CSS Tailwind v React.

Potom nainštalujte Heroicons do svojho projektu pomocou nasledujúceho príkazu:

npm a [email protected] @tremor/react

Teraz odstránime nepotrebný kód v našom src/App.js súbor. Tu je náš štartovací kód App.js:

importovať"./App.css";
importovať"@tremor/react/dist/esm/tremor.css";
exportpredvolenáfunkciuApp() {
vrátiť (


Náš úžasný panel reakcií</h1> 
 </div>
 );
}

Ďalej vytvorte vyhradenú komponentov podpriečinok vo vašom src priečinok. V tom komponentov priečinok, vytvorte nový Dashboard.js súbor a pridajte nasledujúci kód:

funkciuDashboard() {
vrátiť<div>Dashboarddiv>;
}
exportpredvolená prístrojová doska;

Importujte komponent Dashboard do App.js pridaním nasledujúceho vyhlásenia za ostatné dovozy:

importovať Dashboard od"./components/Dashboard";

Nakoniec zobrazte komponent vo svojej aplikácii React pridaním pod h1 element.

Vytvorenie palubnej dosky s tremorom

Ak chcete vytvoriť kompletný dashboard pomocou Tremor, s minimom problémov, vyberte jeden z dostupných blokov. Bloky sú vopred zostavené rozloženia pozostávajúce z rôznych malých modulárnych komponentov.

Dobrým východiskovým bodom je Bloky tremoru sekcia, ktorá predstavuje rôzne typy vopred zostavených blokových komponentov, ktoré môžete použiť. Rozloženie škrupín vám napríklad umožňuje poskladať rôzne komponenty a vytvoriť tak palubnú dosku.

Najprv pridajte nasledujúci kód do svojho Dashboard.js súbor:

importovať {
 karta,
 názov,
 text,
 ColGrid,
 AreaChart,
 Ukazateľ postupu,
 metrický,
 Flex,
} od"@tremor/react";
funkciuDashboard() {
vrátiť (


 {/* Hlavná sekcia */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* sekcia KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Zástupný symbol na nastavenie výšky */}
 
"v-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
exportovať predvolené informačný panel;
Blok shellu obsahuje rôzne komponenty, ktoré importujete v hornej časti súboru. Ak si túto ukážku zobrazíte vo svojom prehliadači, uvidíte iba dva prázdne bloky.
Svoje bloky môžete naplniť vopred vytvorenými komponentmi Tremor, ako je graf, karta alebo tabuľka. Údaje môžete získať z rozhrania API (REST alebo GraphQL) alebo ich uložiť do poľa objektov priamo vo vašom komponente.
Ak chcete pridať komponent do svojho bloku shellu, nahraďte 
 riadok s nasledujúcim:
 
 
Po že pred príkaz return pridajte nasledujúce pole (toto sú údaje, ktoré sa zobrazia v hlavnej časti panela):
 
 // Údaje na zobrazenie v na hlavná sekcia
konst údaje = [
 {
 Mesiac: "21. januára",
 Predaj: 2890,
 Zisk: 2400,
 },
 {
 Mesiac: "február 21",
 Predaj: 1890,
 Zisk: 1398,
 },
 // ...
 {
 Mesiac: "22. januára",
 Predaj: 3890,
 Zisk: 2980,
 },
];
konšt. valueFormatter = (číslo) =>< /span>
$ ${Medzinárodné.NumberFormat("nás").formát (number).toString()};
Ďalej pridajte do súboru za valueFormatter nasledujúci kód:
 
 // Údaje na zobrazenie v KPI sekcia
const category = [
 {
 title: "Predaj",
 metrika: "12 699 $",
 percentuálna hodnota: 15,9,
 cieľ: "$ 80 000",
 },
 {
 title: "Zisk",
 metrika: "45 564 USD" span>,
 percentuálna hodnota: 36,5,
 cieľ: "125 000 $",
 },
 {
 title: "Zákazníci",
 metrika: "1 072",
 percentuálna hodnota:  53,6,
 cieľ: "2 000",
 },
 {
 názov: „Prehľad ročného predaja“,
 metrika: „201 072 USD“,
 percentuálna hodnota: 28,7,
 cieľ: "700 000 $",
 },
];
Pre kategórie objektov, musíte namapovať každý objekt, aby sa údaje zobrazili v samostatných komponentoch Karty. Najprv odstráňte komponent Karta v sekcii KPI a potom ho nahraďte týmto kódom:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>
  percentaValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
A je to. Vytvorili ste svoj prvý informačný panel s Tremorom. Zobrazte svoj informačný panel spustením npm start. Malo by to byť podobné ako na obrázku vyššie.
 Prispôsobenie komponentov Tremor
Tremor umožňuje prispôsobenie pomocou rekvizít. Budete si musieť pozrieť dokumentáciu komponentu, ktorý chcete prispôsobiť, a skontrolovať všetky vlastnosti zahrnuté v ich predvolených hodnotách.
Napríklad, ak máte , môžete skryť os x prejdením podpery showXAxis={false} alebo zmeniť výšku pomocou výška={h-40}. V prípade rekvizít deklarujúcich hodnoty nájdené v CSS Tailwind, ako sú veľkosť, medzery, farby a ostatné, musíte použiť pomocné triedy Tailwind.
 Jednoduché vytváranie komplexných informačných panelov React
Vďaka knižniciam komponentov, ako je Tremor, nemusíte vytvárať všetky jednu časť vášho používateľského rozhrania od začiatku. Používanie knižnice ako Tremor vám môže ušetriť čas aj bolesť hlavy pri vytváraní komplexných responzívnych používateľských rozhraní.