Upotrijebite biblioteku Blueprint i nikada više nećete imati problema s izradom atraktivne, pristupačne web stranice.

Izrada React aplikacije od nule može biti dugotrajan i izazovan zadatak, posebno kada se radi o komponentama stiliziranja. Tu je Blueprint UI Toolkit koristan. Skup alata je skup komponenti korisničkog sučelja za višekratnu upotrebu koje vam mogu pomoći u stvaranju dosljednih i vizualno privlačnih sučelja za vaše React aplikacije.

Naučite o osnovama Blueprint UI Toolkita i kako ga koristiti za izradu jednostavne React aplikacije.

Blueprint UI Toolkit je a React biblioteka komponenti korisničkog sučelja. Sadrži zbirku već napravljenih komponenti koje se lako koriste i prilagođavaju. Možete upotrijebiti ove unaprijed dizajnirane komponente izvan kutije ili ih modificirati kako bi odgovarale vašim specifičnim potrebama.

Komponente Blueprint UI Toolkita uključuju gumbe, obrasce, modale, navigaciju i tablice. Korištenje ovih komponenti može vam uštedjeti vrijeme i trud budući da ne morate dizajnirati i graditi svaku komponentu od nule.

Da biste započeli s Blueprint UI Toolkitom, morat ćete izraditi React aplikaciju.

Nakon što je vaš projekt postavljen, možete instalirati Blueprint UI Toolkit koristeći bilo koji instalacijski program Node paketa koji odaberete. Da biste instalirali Blueprint UI Toolkit koristeći npm, pokrenite sljedeću naredbu na svom terminalu:

npm instalirajte @blueprintjs/core

Za korištenje pređe umjesto toga pokrenite ovu naredbu:

pređa dodati @blueprintjs/core

Nakon što instalirate Blueprint UI Toolkit, možete koristiti komponente po svom izboru u svojoj React aplikaciji.

Prije upotrebe komponenti uključite CSS datoteke iz Blueprint UI Toolkit:

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

Dodavanje gornjeg bloka koda vašoj CSS datoteci primjenjuje stilove korisničkog sučelja Blueprint na njegove komponente.

Na primjer, da biste svojoj aplikaciji dodali gumb, upotrijebite Dugme komponenta iz Blueprint UI Toolkita:

uvoz Reagirati iz"reagirati";
uvoz { Dugme } iz"@blueprintjs/core";
funkcijaaplikacija() {
povratak (






izvozzadano aplikacija;

Ovaj blok koda dodaje gumb vašoj aplikaciji pomoću Dugme komponenta. The Dugme komponenta uzima rekvizite kao što su namjera, tekst, ikona, mali, i velika.

The namjera prop definira prirodu gumba, što se odražava u njegovoj boji pozadine. U ovom primjeru gumb ima a uspjeh namjera koja mu daje zelenu boju pozadine. Blueprint UI nudi nekoliko temeljnih namjera uključujući primarni (plavo), uspjeh (zeleno), upozorenje (narančasta), i opasnost (Crvena).

Možete odrediti tekst koji se pojavljuje unutar gumba pomoću tekst oslonac Također možete dodati ikone gumbu pomoću ikona oslonac Pored ikona oslonac je desna ikona prop, koji dodaje ikonu na desnu stranu gumba.

Na kraju, velika i mali Boolean props specificira veličinu gumba. The velika prop čini gumb većim, dok mali podupirač ga čini manjim.

Raniji blok koda će generirati gumb koji izgleda ovako:

Također možete koristiti Gumb za sidrenje komponentu za stvaranje gumba u vašoj aplikaciji. The Gumb za sidrenje komponenta je specijalizirana verzija komponente Button eksplicitno dizajnirana za korištenje kao poveznica.

Ova komponenta prihvaća mnoge od istih rekvizita kao komponenta Button, uključujući tekst, velika, mali, namjera, i ikona. Također prihvaća href i cilj rekviziti.

The href prop specificira URL na koji gumb vodi, i cilj prop specificira ciljni prozor ili okvir za vezu:

uvoz Reagirati iz"reagirati";
uvoz {AnchorButton} iz"@blueprintjs/core";
funkcijaaplikacija() {
povratak (




 href=" https://example.com/"
 namjera="primarni"
 tekst="klikni me"
 cilj="_prazan"
 />
 </div>
 );
}
izvozzadano aplikacija;

Ovaj gornji blok koda prikazuje Gumb za sidrenje komponenta. komponente href vrijednost prop je " https://example.com/” i cilj vrijednost prop je “_blank” što znači da će se veza otvoriti u drugoj kartici ili prozoru preglednika.

Još jedna bitna komponenta Blueprint UI Toolkita je Kartica komponenta. Ovo je komponenta za višekratnu upotrebu koja prikazuje informacije na privlačan vizualni način.

Komponenta kartice ima dva rekvizita interaktivni i uzvisina. The uzvisina prop kontrolira dubinu sjene kartice, pri čemu veće vrijednosti proizvode izraženiji efekt sjene.

The interaktivni prop prihvaća Booleovu vrijednost. Kada se postavi na true, omogućuje interakcije lebdenja i klika na kartici, dopuštajući joj da odgovori na korisnički unos.

Na primjer:

uvoz Reagirati iz"reagirati";
uvoz { Kartica, visina } iz"@blueprintjs/core";
funkcijaaplikacija() {
povratak (




pravi} elevation={Elevacija. DVA}>
Ovo je kartica</h2>




Ovo je neki sadržaj u moja karta</p>
 </Card>
 </div>
 );
}


izvozzadano aplikacija;

U ovom primjeru, Kartica komponenta ima naslov i neki sadržaj. The interaktivni podupirač je postavljen na pravi.

Također uvozite Nadmorska visina komponenta iz @blueprintjs/core. The Nadmorska visina komponenta je enum koji definira skup unaprijed definiranih vrijednosti koje možete koristiti za postavljanje dubine sjene komponente.

Ovdje su dostupne vrijednosti za Nadmorska visina enum:

  1. Nadmorska visina. NULA: Ova vrijednost postavlja dubinu sjene na 0, što ukazuje da komponenta nema primijenjenu sjenu
  2. Nadmorska visina. JEDAN: Ova vrijednost postavlja dubinu sjene na 1.
  3. Nadmorska visina. DVA: Ova vrijednost postavlja dubinu sjene na 2.
  4. Nadmorska visina. TRI: Ova vrijednost postavlja dubinu sjene na 3.
  5. Nadmorska visina. ČETIRI: Ova vrijednost postavlja dubinu sjene na 4.
  6. Nadmorska visina. PET: Ova vrijednost postavlja dubinu sjene na 5.

Renderiranje gornjeg bloka koda prikazat će sliku na vašem zaslonu koja izgleda ovako:

Komponente Blueprint UI Toolkita lako se prilagođavaju. Možete koristiti tradicionalni CSS za izmjenu izgleda komponenti ili možete upotrijebiti pružene rekvizite za promjenu njihovog ponašanja.

Na primjer, možete prilagoditi izgled gumba dodavanjem a naziv klase oslonac:

uvoz Reagirati iz"reagirati";
uvoz { Dugme } iz"@blueprintjs/core";
funkcijaaplikacija() {
povratak (






izvozzadano aplikacija;

Gornji blok koda primjenjuje prilagođenu klasu na gumb, omogućujući vam da izmijenite njegov izgled pomoću CSS-a:

.moj-gumb{
granični radijus: 10px;
podstava: 0.4rem 0.8rem;
}

Primjenom ovih stilova gumb će izgledati otprilike ovako:

Postoji mnogo više od Blueprint UI

Blueprint UI nudi više komponenti od gore navedenih, kao što su upozorenje, popover, tost itd. Međutim, s pruženim informacijama možete izraditi jednostavnu React aplikaciju koristeći Blueprint UI.

Svoju React aplikaciju možete stilizirati različitim metodama. Možete koristiti tradicionalni CSS, SASS/SCSS, Tailwind CSS i CSS u JS bibliotekama kao što su emocije, stilizirane komponente itd.