Sudėtingos „React“ vartotojo sąsajos, pavyzdžiui, prietaisų skydelio, kūrimas gali būti bauginantis, jei tai darote nuo nulio. Laimei, jums to nereikia daryti.

Viena geriausių komponentų bibliotekų, kurią galite naudoti, yra „Tremor“, kuri leidžia be didelių pastangų sukurti modernias, reaguojančias informacijos suvestines „React“. Sužinokite, kaip naudoti „Tremor“ kuriant „React“ prietaisų skydelius.

Kas yra Tremoras?

„Tremor“ yra moderni atvirojo kodo žemo lygio vartotojo sąsajos komponentų biblioteka, skirta „React“ prietaisų skydeliams kurti. „Tremor“ sukurtas naudojant „Tailwind CSS“, „React“ ir „Recharts“ (kita „React“ komponentais pagrįsta diagramų biblioteka). Be to, jame naudojamos piktogramos iš „Heroicons“.

Jame yra daugiau nei 20 komponentų su visais būtiniausiais elementais, kad būtų galima sukurti fantastišką analitinę sąsają, pvz., diagramas, korteles ir įvesties elementus. Bibliotekoje yra nedideli, moduliniai komponentai, pvz., ženkleliai, mygtukai, išskleidžiamieji meniu ir skirtukai, kuriuos galite sujungti, kad sukurtumėte visavertes informacijos suvestines.

„Tremor“ išsiskiria tuo, kad jis turi didelę nuomonę, todėl tol, kol jums priimtini bibliotekos sprendimai, galite greitai sukurti profesionaliai atrodantį prietaisų skydelį.

Žinoma, „Tremor“ palaiko tinkinimą ir leidžia tai padaryti naudojant „React“ rekvizitų sistemą.

Kaip pradėti nuo tremoro

Pradėkite nuo sukurti naują React programėlę naudojant kurti-reaguoti-programėlę paketą (arba Vite, jei tai jums labiau patinka).

Sistemoje jau turėsite įdiegti Node.js ir npm. Tai galite patvirtinti paleisdami mazgas -- versija ir tada npm -- versija komandinėje eilutėje. Jei kurios nors komandos trūksta, galite jas įdiegti naudodami paprastą procesą; žr. šį vadovą Node.js ir npm įdiegimas sistemoje Windows, pavyzdžiui.

Reagavimo projekto su tremoru nustatymas

1. Atidarykite savo terminalą ir eikite į pageidaujamą katalogą naudodami cd komandą.
2. Bėk npx kurti-reaguoti-app tremor-mokomoji programa. Ši komanda sukurs naują „React“ programą tremoras-pamoka jūsų sistemoje dabartiniame kataloge.
3. Perjunkite į programų katalogą paleisdami cd tremor pamoka.
4. Įdiekite „Tremor“ savo „React“ projekte naudodami šią komandą:

   npm įdiegti @tremor/react

5. Įdiegę „Tremor“, importuokite paketą į savo App.js (arba pagrindinis.jsx jei naudojote Vite), pridėdami šią eilutę importo apačioje:

   importuoti„@tremor/react/dist/esm/tremor.css“;

Nors „Tremor“ naudoja „Tailwind CSS“, jums nereikia jos įdiegti „React“ programoje, kad galėtumėte naudotis biblioteka. Taip yra todėl, kad „Tremor“ jau įdiegė „Tailwind“ viduje. Tačiau, jei norite, peržiūrėkite mūsų mokymo programą „Tailwind CSS“ įdiegimas „React“..

Tada įdiekite „Heroicons“ savo projekte naudodami šią komandą:

npm i [email protected] @tremor/react

Dabar pašalinkime nereikalingą kodą src/App.js failą. Štai mūsų starto kodas App.js:

importuoti"./App.css";
importuoti„@tremor/react/dist/esm/tremor.css“;
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (


Mūsų nuostabus reagavimo prietaisų skydelis</h1> 
 </div>
 );
}

Tada sukurkite dedikuotą komponentai jūsų poaplankį src aplanką. Tuo komponentai aplanką, sukurkite naują Dashboard.js failą ir pridėkite šį kodą:

funkcijaPrietaisų skydelis() {
grąžinti<div>Prietaisų skydelisdiv>;
}
eksportuotinumatytas Prietaisų skydelis;

Importuokite prietaisų skydelio komponentą App.js po kitų importų pridedant šį teiginį:

importuoti Prietaisų skydelis iš"./components/Dashboard";

Galiausiai parodykite komponentą „React“ programoje pridėdami žemiau h1 elementas.

Prietaisų skydelio su tremoru kūrimas

Norėdami sukurti visą prietaisų skydelį naudodami „Tremor“ su kuo mažiau rūpesčių, pasirinkite vieną iš galimų blokų. Blokai yra iš anksto sukurti išdėstymai, sudaryti iš skirtingų mažų modulinių komponentų.

Geras atspirties taškas yra Tremoro blokai skyrių, kuriame pristatomi įvairių tipų iš anksto sukurti blokų komponentai, kuriuos galite naudoti. Pavyzdžiui, išdėstymo apvalkalai leidžia sujungti skirtingus komponentus ir sukurti prietaisų skydelį.

Pirmiausia pridėkite šį kodą prie savo Dashboard.js failas:

importuoti {
 kortelė,
 Pavadinimas,
 Tekstas,
 ColGrid,
 ploto diagrama,
 Progreso juosta,
 metrika,
 Flex,
} iš„@tremor/reaguoti“;
funkcijaPrietaisų skydelis() {
grąžinti (


 {/* Pagrindinė dalis */}
 "mt-6">
 
"h-96" /> 
 </Kortelė>
 {/* KPI skiltis */}
 2} gapX="tarpas-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Rezervuota vieta aukščiui nustatyti */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
eksportuoti numatytasis prietaisų skydelis;
Apvalkalo bloke yra įvairių komponentų, kurie importuojate failo viršuje. Jei peržiūrėsite tai savo naršyklėje, matysite tik du tuščius blokus.
Galite užpildyti blokus iš anksto sukurtais „Tremor“ komponentais, pvz., diagrama, kortele ar lentele. Galite gauti duomenis iš API (REST arba GraphQL) arba saugoti juos objektų masyve tiesiai savo komponento viduje.
Jei norite pridėti komponentą prie apvalkalo bloko, pakeiskite 
 eilutę su šiuo:
 
 
Po kad pridėkite šį masyvą prieš return teiginį (tai duomenys, kurie bus rodomi pagrindinėje informacijos suvestinės skiltyje):
 
 // Duomenys, kurie bus rodomi į pagrindinė sekcija
const data = [
 {
 Mėnuo: "Sausio 21 d.",
 Pardavimai: 2890,
 Pelnas: 2400,
 },
 {
 Mėnuo: "Vas. 21",
 Pardavimas: 1890,
 Pelnas: 1398,
 },
 // ...
 {
 Mėnuo: "Sausio 22 d.",
 Pardavimas: 3890,
 Pelnas: 2980,
 },
];
const valueFormatter = (skaičius) =>< /span>
${Tarptautinis.NumberFormat("us").formatas (number).toString()};
Toliau prie failo po valueFormatter pridėkite šį kodą:
 
 // Duomenys, pateiktini KPI skyrius
const kategorijas = [
 {
 pavadinimas: "Pardavimas",
 metrika: "12 699 USD",
 procentinė vertė: 15,9,
 tikslinė vertė: "$ 80 000",
 },
 {
 pavadinimas: "Pelnas",
 metrika: "45 564 USD“ span>,
 procentinė vertė: 36,5,
 tikslinė vertė: "125 000 USD",
 },
 {
 pavadinimas: "Klientai",
 metrika: "1 072",
 procentinė vertė:  53,6,
 tikslas: "2 000",
 },
 {
 pavadinimas: „Metinė pardavimo apžvalga“,
 metrika: „201 072 USD“,
 procentinė vertė: 28,7,
 tikslas: "700 000 USD",
 },
];
 kategorijų objektų masyvą, turite susieti kiekvieną objektą, kad duomenys būtų rodomi atskiruose kortelės komponentuose. Pirmiausia ištrinkite Kortelės komponentą KPI skiltyje ir pakeiskite jį šiuo kodu:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={tiesa}
 >{`${item.percentageValue}% (${item.metric} )`}</Tekstas>
 {item.target}</Text>
 </Flex>
  percentValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
Ir viskas. Sukūrėte savo pirmąjį prietaisų skydelį naudodami „Tremor“. Peržiūrėkite savo prietaisų skydelį paleisdami npm start. Jis turėtų būti panašus į aukščiau pateiktą ekrano kopiją.
 Tremor komponentų tinkinimas
Tremor leidžia tinkinti naudojant rekvizitus. Turėsite peržiūrėti komponento, kurį norite tinkinti, dokumentaciją ir patikrinti visas ypatybes, įtrauktas į numatytąsias reikšmes.
Pavyzdžiui, jei turite , galite paslėpti x ašį perleisdami rekvizitą showXAxis={false} arba pakeisti aukštį naudodami aukštis={h-40}. Jei norite naudoti rekvizitus, deklaruojančius „Tailwind CSS“ reikšmes, pvz., dydį, tarpą, spalvas ir kitus dalykus, turite naudoti „Tailwind“ naudingumo klases.
 Lengvai kurkite sudėtingas React informacijos suvestines
Dėl komponentų bibliotekų, pvz., „Tremor“, jums nereikia kurti kiekvieno viena jūsų vartotojo sąsajos dalis nuo nulio. Naudodami tokią biblioteką kaip „Tremor“ galite sutaupyti laiko ir sutaupyti galvos skausmo kuriant sudėtingas reaguojančias vartotojo sąsajas.