React alkalmazás létrehozása a Blueprint UI Toolkit segítségével

A React alkalmazás felépítése a semmiből időigényes és kihívásokkal teli feladat lehet, különösen, ha stíluselemekről van szó. Itt jön jól a Blueprint UI Toolkit. Az eszközkészlet olyan újrafelhasználható felhasználói felület-összetevők készlete, amelyek segítségével konzisztens és tetszetős felületeket hozhat létre React alkalmazásaihoz.

Ismerje meg a Blueprint UI Toolkit alapjait és azt, hogyan használhatja fel egy egyszerű React alkalmazás létrehozásához.

A Blueprint UI Toolkit egy React UI összetevő könyvtár. Előre elkészített alkatrészek gyűjteményét tartalmazza, amelyek könnyen használhatók és testreszabhatók. Ezeket az előre megtervezett alkatrészeket a dobozból kivéve használhatja, vagy módosíthatja őket, hogy megfeleljenek saját igényeinek.

A Blueprint UI Toolkit összetevői közé tartoznak a gombok, az űrlapok, a modálok, a navigáció és a táblázatok. Ezen összetevők használatával időt és erőfeszítést takaríthat meg, mivel nem kell minden komponenst a semmiből megtervezni és megépíteni.

A Blueprint UI Toolkit használatának megkezdéséhez meg kell tennie hozzon létre egy React alkalmazást.

A projekt beállítása után telepítheti a Blueprint UI Toolkit tetszőleges Node csomagtelepítőjét. A Blueprint UI Toolkit npm használatával történő telepítéséhez futtassa a következő parancsot a terminálon:

npm install @blueprintjs/core

Ha helyette fonalat szeretne használni, futtassa ezt a parancsot:

fonal hozzáadása @blueprintjs/core

A Blueprint UI Toolkit telepítése után használhatja a választott összetevőket a React alkalmazásban.

Az összetevők használata előtt vegye fel a CSS-fájlokat a Blueprint UI Toolkitből:

@import"normalize.css";
@import"@blueprintjs/core/lib/css/blueprint.css";
@import"@blueprintjs/icons/lib/css/blueprint-icons.css";

A fenti kódblokk hozzáadása a CSS-fájlhoz a Blueprint UI stílusokat alkalmazza az összetevőire.

Például egy gomb hozzáadásához az alkalmazáshoz használja a Gomb összetevő a Blueprint UI Toolkitből:

import Reagál tól től"reagál";
import { Button } tól től"@blueprintjs/core";
funkcióApp() {
Visszatérés (



"siker" szöveg="Kattints ide" ikon="Frissítés" kicsi={igaz}/>
 </div>
 );
}
exportalapértelmezett App;

Ez a kódblokk egy gombot ad hozzá az alkalmazáshoz a Gomb összetevő. A Gomb komponens olyan kellékeket vesz, mint pl elszánt, szöveg, ikon, kicsi, és nagy.

A elszánt A prop meghatározza a gomb természetét, ami tükröződik a háttérszínében. Ebben a példában a gombnak a siker zöld háttérszínt ad. A Blueprint UI számos alapvető szándékot kínál, beleértve elsődleges (kék), siker (zöld), Figyelem (narancs), és veszély (piros).

A gombon belül megjelenő szöveget a gombbal adhatja meg szöveg támaszt. A gombhoz ikonokat is hozzáadhat a gombbal ikon támaszt. Mellett a ikon kellék az rightIcon prop, amely hozzáadja az ikont a gomb jobb oldalához.

Végül a nagy és kicsi A logikai kellékek meghatározzák a gomb méretét. A nagy prop nagyobbá teszi a gombot, míg a kicsi prop kisebbé teszi.

A korábbi kódblokk létrehoz egy gombot, amely így néz ki:

Használhatja továbbá a AnchorButton komponenst, hogy létrehozzon egy gombot az alkalmazásban. A AnchorButton komponens a Button komponens speciális változata, amelyet kifejezetten hivatkozásként való használatra terveztek.

Ez az összetevő sok olyan kelléket fogad el, mint a Button komponens, beleértve szöveg, nagy, kicsi, elszánt, és ikon. Elfogadja továbbá a href és cél kellékek.

A href prop megadja az URL-t, amelyre a gomb hivatkozik, és a cél A prop megadja a hivatkozás célablakát vagy keretét:

import Reagál tól től"reagál";
import { AnchorButton } tól től"@blueprintjs/core";
funkcióApp() {
Visszatérés (



 href=" https://example.com/"
 szándék ="elsődleges"
 szöveg="Kattints ide"
 cél="_üres"
 />
 </div>
 );
}
exportalapértelmezett App;

Ez a fenti kódblokk egy AnchorButton összetevő. Az alkatrészé href prop értéke " https://example.com/” és a cél prop értéke „_blank”, ami azt jelenti, hogy a hivatkozás egy másik böngészőlapon vagy ablakban nyílik meg.

A Blueprint UI Toolkit másik lényeges összetevője a Kártya összetevő. Ez egy újrafelhasználható komponens, amely vonzó vizuális módon jeleníti meg az információkat.

A Kártya komponenshez két kellék szükséges interaktív és magasság. A magasság A prop szabályozza a kártya árnyékmélységét, a magasabb értékekkel szembetűnőbb árnyékhatást produkál.

A interaktív prop elfogadja a logikai értéket. Ha igaz értékre van állítva, lehetővé teszi a kártyán az egérmutató és a kattintás interakcióit, lehetővé téve, hogy válaszoljon a felhasználói bevitelre.

Például:

import Reagál tól től"reagál";
import { Kártya, magasság } tól től"@blueprintjs/core";
funkcióApp() {
Visszatérés (



igaz} elevation={Magasság. KETTŐ}>
Ez egy kártya</h2>


Ez egy tartalom ban ben a kártyám</p>
 </Card>
 </div>
 );
}
exportalapértelmezett App;

Ebben a példában a Kártya az összetevőnek van címe és tartalma is. A interaktív támasz be van állítva igaz.

Ön is importálja a Magasság összetevőtől @blueprintjs/core. A Magasság A komponens egy sor, amely előre meghatározott értékeket határoz meg, amelyek segítségével beállíthatja az összetevő árnyékmélységét.

Itt vannak a rendelkezésre álló értékei Magasság enum:

1. Magasság. NULLA: Ez az érték 0-ra állítja az árnyékmélységet, jelezve, hogy az összetevőhöz nincs alkalmazott árnyék
2. Magasság. EGY: Ez az érték 1-re állítja az árnyék mélységét.
3. Magasság. KETTŐ: Ez az érték 2-re állítja az árnyék mélységét.
4. Magasság. HÁROM: Ez az érték 3-ra állítja az árnyék mélységét.
5. Magasság. NÉGY: Ez az érték 4-re állítja az árnyék mélységét.
6. Magasság. ÖT: Ez az érték 5-re állítja az árnyék mélységét.

A fenti kódblokk leképezése után egy kép jelenik meg a képernyőn, amely így néz ki:

A Blueprint UI Toolkit összetevői könnyen testreszabhatók. Használhatja a hagyományos CSS-t az alkatrészek megjelenésének módosításához, vagy használhatja a mellékelt kellékeket viselkedésük megváltoztatására.

Például testreszabhatja egy gomb megjelenését az a osztály név támaszt:

import Reagál tól től"reagál";
import { Button } tól től"@blueprintjs/core";
funkcióApp() {
Visszatérés (



"Kattints ide" osztálynév="az én gombom"/>
 </div>
 );
}
exportalapértelmezett App;

A fenti kódblokk egyéni osztályt alkalmaz a gombhoz, lehetővé téve a megjelenésének módosítását CSS segítségével:

.my-gombom{
határ-sugár: 10px;
párnázás: 0.4rem 0.8rem;
}

Ha ezeket a stílusokat alkalmazza, a gomb kissé így fog kinézni:

A Blueprint UI sokkal többet tartalmaz

A Blueprint UI a fent említetteknél több összetevőt kínál, például Alert, Popover, Toast stb. A megadott információk alapján azonban létrehozhat egy egyszerű React alkalmazást a Blueprint UI használatával.

A React alkalmazás stílusát különböző módszerekkel alakíthatja. Használhatja a hagyományos CSS-t, SASS/SCSS-t, Tailwind CSS-t és CSS-t a JS-könyvtárakban, például érzelmeket, stílusos összetevőket stb.