Izdelava vaše aplikacije React z orodjem Blueprint UI

Izdelava aplikacije React iz nič je lahko dolgotrajna in zahtevna naloga, zlasti ko gre za komponente oblikovanja. Tu vam pride prav Blueprint UI Toolkit. Komplet orodij je niz komponent uporabniškega vmesnika za večkratno uporabo, ki vam lahko pomagajo ustvariti dosledne in vizualno privlačne vmesnike za vaše aplikacije React.

Spoznajte osnove orodja Blueprint UI Toolkit in kako ga uporabiti za izdelavo preproste aplikacije React.

Komplet orodij Blueprint UI je a Knjižnica komponent uporabniškega vmesnika React. Vsebuje zbirko vnaprej izdelanih komponent, ki so preproste za uporabo in prilagajanje. Te vnaprej oblikovane komponente lahko uporabite takoj po pripravi ali pa jih spremenite tako, da ustrezajo vašim posebnim potrebam.

Komponente orodja Blueprint UI Toolkit vključujejo gumbe, obrazce, modale, navigacijo in tabele. Uporaba teh komponent vam lahko prihrani čas in trud, saj vam ni treba načrtovati in sestavljati vsake komponente iz nič.

Če želite začeti uporabljati orodje Blueprint UI Toolkit, boste morali ustvarite aplikacijo React.

Ko je vaš projekt nastavljen, lahko namestite Blueprint UI Toolkit s katerim koli namestitvenim programom paketa Node, ki ga izberete. Če želite namestiti Blueprint UI Toolkit z uporabo npm, zaženite naslednji ukaz v vašem terminalu:

npm namestite @blueprintjs/core

Če želite namesto tega uporabiti prejo, zaženite ta ukaz:

preja dodajte @blueprintjs/core

Ko namestite Blueprint UI Toolkit, lahko v aplikaciji React uporabljate komponente po svoji izbiri.

Pred uporabo komponent vključite datoteke CSS iz orodja Blueprint UI Toolkit:

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

Če dodate zgornji blok kode v datoteko CSS, se slogi uporabniškega vmesnika Blueprint uporabijo za njene komponente.

Če želite na primer svoji aplikaciji dodati gumb, uporabite Gumb komponenta iz orodja Blueprint UI:

uvoz Reagiraj od"reagirati";
uvoz {Gumb} od"@blueprintjs/core";
funkcijoaplikacija() {
vrnitev (



"uspeh" besedilo="Klikni me" ikona="osveži" majhen={prav}/>
 </div>
 );
}
izvozprivzeto aplikacija;

Ta blok kode doda gumb vaši aplikaciji z uporabo Gumb komponento. The Gumb komponenta ima rekvizite, kot je npr namen, besedilo, ikona, majhna, in velik.

The namen prop določa naravo gumba, kar se odraža v njegovi barvi ozadja. V tem primeru ima gumb a uspeh namen, ki mu daje zeleno barvo ozadja. Uporabniški vmesnik Blueprint ponuja več osnovnih namenov, vključno z primarni (modra), uspeh (zelena), Opozorilo (oranžna) in nevarnost (rdeča).

Besedilo, ki se pojavi znotraj gumba, lahko določite z besedilo prop. Gumbom lahko dodate tudi ikone z uporabo ikona prop. Poleg ikona rekvizit je desna ikona prop, ki doda ikono na desno stran gumba.

Nazadnje, velik in majhna boolean props določajo velikost gumba. The velik prop naredi gumb večji, medtem ko je majhna prop ga zmanjša.

Prejšnji blok kode bo ustvaril gumb, ki je videti takole:

Uporabite lahko tudi AnchorButton komponento za ustvarjanje gumba v vaši aplikaciji. The AnchorButton komponenta je specializirana različica komponente Button, ki je izrecno zasnovana za uporabo kot povezava.

Ta komponenta sprejema številne enake pripomočke kot komponenta Button, vključno z besedilo, velik, majhna, namen, in ikona. Sprejema tudi href in tarča rekviziti.

The href prop določa URL, na katerega se gumb povezuje, in tarča prop določa ciljno okno ali okvir za povezavo:

uvoz Reagiraj od"reagirati";
uvoz {AnchorButton} od"@blueprintjs/core";
funkcijoaplikacija() {
vrnitev (



 href=" https://example.com/"
 namen="primarni"
 besedilo="Klikni me"
 cilj="_prazno"
 />
 </div>
 );
}
izvozprivzeto aplikacija;

Ta zgornji blok kode upodablja AnchorButton komponento. komponente href vrednost prop je " https://example.com/” in tarča vrednost prop je »_blank«, kar pomeni, da se bo povezava odprla v drugem zavihku ali oknu brskalnika.

Druga bistvena komponenta orodja Blueprint UI Toolkit je Kartica komponento. To je komponenta za večkratno uporabo, ki prikazuje informacije na privlačen vizualni način.

Komponenta kartice ima dva elementa interaktivni in višina. The višina prop nadzira globino sence kartice, pri čemer višje vrednosti povzročijo izrazitejši učinek sence.

The interaktivni prop sprejme logično vrednost. Ko je nastavljeno na »true«, omogoča interakcije s kazalcem miške in klika na kartici, kar ji omogoča, da se odzove na vnos uporabnika.

Na primer:

uvoz Reagiraj od"reagirati";
uvoz { Kartica, višina } od"@blueprintjs/core";
funkcijoaplikacija() {
vrnitev (



prav} elevation={Nadmorska višina. DVA}>
To je kartica</h2>


To je nekaj vsebine v moja kartica</p>
 </Card>
 </div>
 );
}
izvozprivzeto aplikacija;

V tem primeru je Kartica komponenta ima naslov in nekaj vsebine. The interaktivni prop je nastavljen na prav.

Uvažate tudi Nadmorska višina komponenta iz @blueprintjs/core. The Nadmorska višina komponenta je enum, ki definira nabor vnaprej določenih vrednosti, ki jih lahko uporabite za nastavitev globine sence komponente.

Tukaj so razpoložljive vrednosti Nadmorska višina enum:

1. Nadmorska višina. NIČ: Ta vrednost nastavi globino sence na 0, kar pomeni, da komponenta nima uporabljene sence.
2. Nadmorska višina. ENA: Ta vrednost nastavi globino sence na 1.
3. Nadmorska višina. DVA: Ta vrednost nastavi globino sence na 2.
4. Nadmorska višina. TRI: Ta vrednost nastavi globino sence na 3.
5. Nadmorska višina. ŠTIRI: Ta vrednost nastavi globino sence na 4.
6. Nadmorska višina. PET: Ta vrednost nastavi globino sence na 5.

Upodabljanje zgornjega bloka kode bo na vašem zaslonu prikazalo sliko, ki je videti takole:

Komponente orodja Blueprint UI Toolkit je enostavno prilagoditi. Uporabite lahko tradicionalni CSS da spremenite videz komponent, ali pa uporabite priložene pripomočke, da spremenite njihovo vedenje.

Na primer, lahko prilagodite videz gumba tako, da podate a className rekvizit:

uvoz Reagiraj od"reagirati";
uvoz {Gumb} od"@blueprintjs/core";
funkcijoaplikacija() {
vrnitev (



"Klikni me" className='moj-gumb'/>
 </div>
 );
}
izvozprivzeto aplikacija;

Zgornji blok kode uporabi razred po meri za gumb, kar vam omogoča spreminjanje njegovega videza s pomočjo CSS:

.my-gumb{
mejni polmer: 10px;
oblazinjenje: 0.4rem 0.8rem;
}

Če uporabite te sloge, bo vaš gumb videti nekako takole:

Uporabniški vmesnik Blueprint ponuja veliko več

Uporabniški vmesnik Blueprint ponuja več komponent, kot je omenjeno zgoraj, kot so Opozorilo, Popover, toast itd. Vendar pa lahko s posredovanimi informacijami sestavite preprosto aplikacijo React z uporabniškim vmesnikom Blueprint.

Svojo aplikacijo React lahko oblikujete z različnimi metodami. Uporabite lahko tradicionalne CSS, SASS/SCSS, Tailwind CSS in CSS v knjižnicah JS, kot so čustva, stilizirane komponente itd.