A React komplex felhasználói felületének, például irányítópultnak a felépítése ijesztő lehet, ha a semmiből csinálja. Szerencsére nem kell ezt tenned.

Az egyik legjobb használható komponenskönyvtár a Tremor, amely lehetővé teszi, hogy kis erőfeszítéssel modern, érzékeny irányítópultokat hozzon létre a Reactban. Ismerje meg, hogyan használhatja a Tremort irányítópultok létrehozására a React alkalmazásban.

Mi az a Tremor?

A Tremor egy modern, nyílt forráskódú, alacsony szintű felhasználói felület-összetevő-könyvtár a React irányítópultjainak létrehozásához. A Tremor a Tailwind CSS-re, a React-ra és a Recharts-ra épül (a React egy másik komponens-alapú diagramkönyvtára). Ráadásul a Heroicons ikonjait használja.

Több mint 20 összetevővel büszkélkedhet, amelyek minden lényeges elemet tartalmaznak egy fantasztikus elemző felület felépítéséhez, például diagramok, kártyák és beviteli elemek. A könyvtár kis, moduláris összetevőket tartalmaz, például jelvényeket, gombokat, legördülő listákat és füleket, amelyeket kombinálva teljes értékű irányítópultokat hozhat létre.

A Tremort az teszi kiemelkedik, hogy erősen meggondolt, így mindaddig, amíg a könyvtár döntései rendben vannak, egy szellőben beindíthat egy professzionális megjelenésű műszerfalat.

A Tremor természetesen támogatja a testreszabást, és ezt a React kellékrendszerén keresztül egyszerűvé teszi.

Hogyan kezdjük el a Tremort

Kezdje ezzel új React alkalmazás létrehozása használni a Alkalmazás létrehozása-reagálása csomagot (vagy Vite-t, ha úgy tetszik).

A Node.js-nek és az npm-nek már telepítve kell lennie a rendszerére. Ezt futtatással megerősítheti csomópont --verzió és akkor npm --verzió parancssorban. Ha valamelyik parancs hiányzik, egy egyszerű eljárással telepítheti őket; lásd ezt az útmutatót a Node.js és az npm telepítése Windows rendszeren, például.

A React projekt beállítása tremorral

1. Nyissa meg a terminált, és a gombbal keresse meg a kívánt könyvtárat CD parancs.
2. Fuss npx create-react-app tremor-oktatóanyag. Ez a parancs egy új React alkalmazást hoz létre tremor-oktatóanyag a rendszeren az aktuális könyvtárban.
3. Futtatással váltson az alkalmazáskönyvtárba cd tremor-oktatóanyag.
4. Telepítse a Tremort a React projektben a következő paranccsal:

   npm install @tremor/react

5. Miután telepítette a Tremort, importálja a csomagot a sajátjába App.js (vagy main.jsx ha Vite-ot használt) a következő sor hozzáadásával az importálás alján:

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

Bár a Tremor Tailwind CSS-t használ, a könyvtár használatához nem kell telepítenie azt a React alkalmazásba. Ennek az az oka, hogy a Tremorban már be van állítva a Tailwind belsőleg. Ha azonban szeretné, tekintse meg oktatóanyagunkat a a Tailwind CSS telepítése a Reactban.

Ezután telepítse a Heroicons-t projektjébe a következő paranccsal:

npm i [email protected] @tremor/react

Most távolítsuk el a szükségtelen kódot a sajátunkból src/App.js fájlt. Itt van az indító kódunk App.js:

import"./App.css";
import"@tremor/react/dist/esm/tremor.css";
exportalapértelmezettfunkcióApp() {
Visszatérés (


Félelmetes React Irányítópultunk</h1> 
 </div>
 );
}

Ezután hozzon létre egy dedikált alkatrészek almappájában src mappát. Abban alkatrészek mappát, hozzon létre egy újat Dashboard.js fájlt, és adja hozzá a következő kódot:

funkcióIrányítópult() {
Visszatérés<div>Irányítópultdiv>;
}
exportalapértelmezett Irányítópult;

Importálja a Dashboard összetevőt App.js a következő nyilatkozat hozzáadásával az egyéb importok után:

import Irányítópult tól től"./components/Dashboard";

Végül hozzáadásával jelenítse meg az összetevőt a React alkalmazásban valami alatt h1 elem.

Irányítópult létrehozása Tremorral

Egy teljes irányítópult létrehozásához a Tremor segítségével minimális felhajtással, válassza ki az egyik elérhető blokkot. A blokkok előre elkészített elrendezések, amelyek különböző kis moduláris komponensekből állnak.

Jó kiindulópont az Tremor blokkjai szakasz, amely bemutatja a különböző típusú előre elkészített blokkkomponenseket, amelyeket használhat. Az elrendezési héjak például lehetővé teszik különböző összetevők összeállítását irányítópult létrehozásához.

Először adja hozzá a következő kódot a sajátjához Dashboard.js fájl:

import {
 Kártya,
 Cím,
 Szöveg,
 ColGrid,
 Területdiagram,
 Fejlődésmutató,
 metrika,
 Flex,
} tól től"@remegés/reagálás";
funkcióIrányítópult() {
Visszatérés (


 {/* Fő rész */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* KPI szakasz */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Helyőrző a magasság beállításához */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
exportálás alapértelmezett Irányítópult;
A shell blokk különböző összetevőket tartalmaz, amelyek a fájl tetején importálod. Ha előnézetben tekinti meg ezt a böngészőben, csak két üres blokkot fog látni.
A blokkokat feltöltheti a Tremor előre beépített összetevőivel, például diagrammal, kártyával vagy táblázattal. Az adatokat lekérheti API-ból (REST vagy GraphQL), vagy objektumok tömbjében tárolhatja közvetlenül az összetevőn belül.
Ha hozzá szeretne adni egy összetevőt a shell blokkhoz, cserélje ki a 
 sorban a következőkkel:
 
 
Miután hogy adja hozzá a következő tömböt a return utasítás elé (ezt az adatot fogja megjeleníteni az irányítópult fő része):
 
 // Megjelenítendő adatok: a fő szakasz
const data = [
 {
 hónap: "január 21.",
 Értékesítés: 2890,
 Nyereség: 2400,
 },
 {
 Hónap: "febr. 21",
 Értékesítés: 1890,
 Profit: 1398,
 },
 // ...
 {
 Hónap: "január 22.",
 Eladások: 3890,
 Profit: 2980,
 },
];
const valueFormatter = (szám) =>< /span>
${Intl.NumberFormat("us").formátum (number).toString()};
Ezután adja hozzá a következő kódot a fájlhoz a valueFormatter után:
 
 // A KPI-ben megjelenítendő adatok szakasz
const kategóriák = [
 {
 title: "Eladások",
 mérőszám: "12 699 USD",
 százalékérték: 15,9,
 cél: "$ 80 000",
 },
 {
 cím: "Profit",
 mérőszám: "45 564 USD" span>,
 százalékérték: 36,5,
 cél: "125 000 USD",
 },
 {
 title: "Ügyfelek",
 mérőszám: "1072",
 százalékérték:  53,6,
 cél: "2000",
 },
 {
 cím: „Éves értékesítési áttekintés”,
 mérőszám: „201 072 USD”,
 százalékérték: 28,7,
 cél: "700 000 USD",
 },
];
A kategóriák objektumok tömbje, minden objektumot le kell képeznie, hogy az adatok külön kártya komponensekben jelenjenek meg. Először törölje a Kártya összetevőt a KPI szakaszban, majd cserélje ki erre a kódra:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={igaz}
 >{`${item.percentageValue}% (${item.metric} )`}</Szöveg>
 {item.target}</Text>
 </Flex>
  percentValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
És ennyi. Létrehozta első irányítópultját a Tremorral. Tekintse meg irányítópultját az npm start futtatásával. Hasonlónak kell lennie a fenti képernyőképhez.
 A Tremor összetevők testreszabása
A Tremor lehetővé teszi a testreszabást kellékek használatával. Át kell tekintenie a testreszabni kívánt összetevő dokumentációját, és ellenőriznie kell az összes, alapértelmezett értékükhöz tartozó tulajdonságot.
Például ha van , elrejtheti az x tengelyt a showXAxis={false} prop átadásával, vagy módosíthatja a magasságot a magasság={ó-40}. A Tailwind CSS-ben található értékeket deklaráló kellékekhez, például méretezéshez, térközhöz, színekhez és egyebekhez, Tailwind segédosztályokat kell használnia.
 Összetett React Irányítópultok készítése könnyedén
Az olyan összetevőkönyvtáraknak köszönhetően, mint a Tremor, nem kell minden a felhasználói felület egyetlen része a semmiből. A Tremor-hoz hasonló könyvtárak használatával időt és fejfájást takaríthat meg az összetett, érzékeny felhasználói felületek létrehozásával kapcsolatban.