Reactis keeruka kasutajaliidese (nt armatuurlaua) loomine võib olla hirmutav, kui teete seda nullist. Õnneks ei pea te seda tegema.

Üks parimaid komponentide teeke, mida saate kasutada, on Tremor, mis võimaldab teil luua Reactis vähese vaevaga kaasaegseid ja tundlikke armatuurlaudu. Siit saate teada, kuidas kasutada Tremorit Reactis armatuurlaudade loomiseks.

Mis on treemor?

Tremor on kaasaegne avatud lähtekoodiga madala taseme kasutajaliidese komponentteek Reactis armatuurlaudade loomiseks. Tremor tugineb Tailwind CSS-ile, Reactile ja Rechartsile (teine ​​​​komponendipõhine graafikuteek Reacti jaoks). Lisaks kasutab see Heroiconsi ikoone.

Sellel on üle 20 komponendi koos kõigi vajalike elementidega fantastilise analüütilise liidese (nt diagrammid, kaardid ja sisendelemendid) loomiseks. Teek sisaldab väikeseid modulaarseid komponente, nagu märgid, nupud, rippmenüüd ja vahelehed, mida saate kombineerida, et luua täisväärtuslikke armatuurlaudu.

Tremori teeb silmapaistvaks see, et sellel on suur arvamus, nii et seni, kuni raamatukogu otsustega nõustute, saate kiirelt käivitada professionaalse välimusega armatuurlaua.

Tremor toetab loomulikult kohandamist ja muudab selle lihtsaks Reacti rekvisiitide süsteemi kaudu.

Treemoriga alustamine

Alusta sellest uue Reacti rakenduse loomine kasutades loo-reageeri rakendus pakett (või Vite, kui see on see, mida eelistate).

Peate oma süsteemi juba installima Node.js ja npm. Saate seda kinnitada jooksmisega sõlm --versioon ja siis npm -- versioon käsureal. Kui mõni käsk puudub, saate need installida lihtsa protsessi abil; vaadake seda juhendit Node.js ja npm installimine Windowsi, näiteks.

Treemori reaktsiooniprojekti seadistamine

1. Avage oma terminal ja navigeerige soovitud kataloogi, kasutades nuppu cd käsk.
2. Jookse npx loo-reageeri-rakenduse värina-õpetus. See käsk loob uue Reacti rakenduse nimega värin-õpetus teie süsteemis praeguses kataloogis.
3. Lülitage rakenduste kataloogi käivitades cd treemor-õpetus.
4. Installige Tremor oma Reacti projekti, kasutades järgmist käsku:

   npm install @tremor/react

5. Kui olete Tremori installinud, importige pakett oma App.js (või main.jsx kui kasutasite Vitet), lisades impordi allosas järgmise rea:

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

Kuigi Tremor kasutab Tailwind CSS-i, ei pea te teegi kasutamiseks seda oma Reacti rakendusse installima. Seda seetõttu, et Tremoril on Tailwind juba sisemiselt seadistatud. Siiski, kui soovite, vaadake meie õpetust Tailwind CSS-i installimine Reactisse.

Järgmisena installige oma projekti Heroicons, kasutades järgmist käsku:

npm i [email protected] @tremor/reageerida

Nüüd eemaldame omast mittevajaliku koodi src/App.js faili. Siin on meie stardikood App.js:

importida"./App.css";
importida"@tremor/react/dist/esm/tremor.css";
eksportidavaikimisifunktsiooniRakendus() {
tagasi (


Meie vinge reageerimise armatuurlaud</h1> 
 </div>
 );
}

Järgmisena looge spetsiaalne komponendid teie alamkaustas src kausta. Selles komponendid kaust, looge uus Dashboard.js faili ja lisage järgmine kood:

funktsiooniArmatuurlaud() {
tagasi<div>Armatuurlauddiv>;
}
eksportidavaikimisi Armatuurlaud;

Importige armatuurlaua komponent sisse App.js lisades muu impordi järel järgmise avalduse:

importida Armatuurlaud alates"./components/Armatuurlaud";

Lõpuks kuvage komponent oma Reacti rakenduses, lisades allpool h1 element.

Treemoriga armatuurlaua loomine

Tremori abil täieliku armatuurlaua loomiseks minimaalse vaevaga valige üks saadaolevatest plokkidest. Plokid on eelseadistatud paigutused, mis koosnevad erinevatest väikestest moodulkomponentidest.

Hea lähtepunkt on Treemori plokid jaotis, mis tutvustab erinevat tüüpi eelehitatud plokikomponente, mida saate kasutada. Näiteks paigutuskestad võimaldavad teil armatuurlaua loomiseks erinevaid komponente kokku panna.

Esmalt lisage omale järgmine kood Dashboard.js fail:

importida {
 kaart,
 Pealkiri,
 tekst,
 ColGrid,
 pindaladiagramm,
 Edenemisriba,
 mõõdik,
 Flex,
} alates"@tremor/reageerida";
funktsiooniArmatuurlaud() {
tagasi (


 {/* Peajaotis */}
 "mt-6">
 
"h-96" /> 
 </Kaart>
 {/* KPI jaotis */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Kohahoidja kõrguse määramiseks */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
ekspordi vaikeseade juhtpaneel;
Kestriplokk sisaldab erinevaid komponente, mis impordite faili ülaosas. Kui vaatate selle brauseris eelvaate, näete ainult kahte tühja plokki.
Saate oma plokke täita Tremori eelehitatud komponentidega, nagu diagramm, kaart või tabel. Saate tõmmata andmeid API-st (REST või GraphQL) või salvestada need objektide massiivi otse oma komponendi sees.
Komponenti lisamiseks shelliplokki asendage 
 rida järgmisega:
 
 
Pärast et lisage enne return-lauset järgmine massiiv (need on andmed, mida armatuurlaua põhijaotis kuvab):
 
 // Andmed, mida kuvada a põhijaotis
const data = [
 {
 Kuu: "21. jaanuar",
 Müük: 2890,
 Kasum: 2400,
 },
 {
 Kuu: "veebruar 21",
 Müük: 1890,
 Kasum: 1398,
 },
 // ...
 {
 Kuu: "22. jaanuar",
 Müük: 3890,
 Kasum: 2980,
 },
];
const valueFormatter = (arv) =>< /span>
$ ${Intl.NumberFormat("meie").formaat (number).toString()};
Järgmisena lisage oma failile järgmine kood pärast valueFormatterit:
 
 // KPI-s kuvatavad andmed jaotis
const kategooriad = [
 {
 pealkiri: "Müük",
 mõõdik: "12 699 dollarit",
 protsentiVäärtus: 15,9,
 sihtmärk: "$ 80 000",
 },
 {
 pealkiri: "Kasum",
 mõõdik: "45 564 dollarit" span>,
 protsentiVäärtus: 36,5,
 sihtmärk: "125 000 dollarit",
 },
 {
 pealkiri: "Kliendid",
 mõõdik: "1072",
 protsentiVäärtus:  53,6,
 sihtmärk: "2000",
 },
 {
 pealkiri: „Aasta müügiülevaade”,
 mõõdik: „201 072 dollarit”,
 protsentiVäärtus: 28,7,
 sihtmärk: "700 000 dollarit",
 },
];
 kategooriate objektide massiivi puhul peate iga objekti kaardistama, et kuvada andmed eraldi kaardi komponentides. Esmalt kustutage KPI jaotises kaardi komponent ja seejärel asendage see järgmise koodiga:
 
 {categories.map((item) => span> (
 
 {item.title}</Tekst>
 {item.metric}</Metric> 
 "mt-4">
  truncate={tõene}
 >{`${item.percentageValue}% (${item.metric} )`}</Tekst>
 {item.target}</Tekst>
 </Flex>
  percentValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Kaart>
))}
Ja ongi kõik. Olete Tremoriga loonud oma esimese armatuurlaua. Vaadake oma juhtpaneeli, käivitades käsu npm start. See peaks olema sarnane ülaltoodud ekraanipildiga.
 Tremori komponentide kohandamine
Tremor võimaldab kohandamist rekvisiitide abil. Peate üle vaatama selle komponendi dokumentatsiooni, mida soovite kohandada, ja kontrollima kõiki nende vaikeväärtustega kaasatud atribuute.
Näiteks kui teil on , saate x-telje peita, jättes propa showXAxis={false} või muuta kõrgust kasutades kõrgus={h-40}. Rekvisiitide jaoks, mis deklareerivad Tailwind CSS-is leiduvaid väärtusi, nagu suurus, vahed, värvid ja muu, peate kasutama Tailwindi utiliidi klasse.
 Ehitage hõlpsalt keerukaid reageerivaid armatuurlaudu
Tänu komponentteekidele, nagu Tremor, ei pea te koostama kõiki kasutajaliidese üks osa nullist. Sellise teegi nagu Tremor kasutamine võib säästa nii aega kui ka peavalu keeruliste tundlike kasutajaliideste loomisel.