Creați aplicația dvs. React cu setul de instrumente Blueprint UI

Construirea unei aplicații React de la zero poate fi o sarcină care necesită timp și o provocare, mai ales când vine vorba de componente de stil. Acesta este locul în care Blueprint UI Toolkit este util. Setul de instrumente este un set de componente reutilizabile UI care vă pot ajuta să creați interfețe consistente și atractive din punct de vedere vizual pentru aplicațiile dvs. React.

Aflați despre elementele de bază ale setului de instrumente Blueprint UI și despre cum să îl utilizați pentru a crea o aplicație React simplă.

Blueprint UI Toolkit este un Biblioteca de componente React UI. Conține o colecție de componente prefabricate care sunt ușor de utilizat și personalizat. Puteți utiliza aceste componente pre-proiectate din cutie sau le puteți modifica pentru a se potrivi nevoilor dumneavoastră specifice.

Componentele Blueprint UI Toolkit includ butoane, formulare, modale, navigare și tabele. Utilizarea acestor componente vă poate economisi timp și efort, deoarece nu trebuie să proiectați și să construiți fiecare componentă de la zero.

Pentru a începe cu Blueprint UI Toolkit, va trebui creați o aplicație React.

Odată ce proiectul dvs. este configurat, puteți instala Blueprint UI Toolkit folosind orice program de instalare a pachetului Node pe care îl alegeți. Pentru a instala Blueprint UI Toolkit folosind npm, rulați următoarea comandă în terminalul dvs.:

npm install @blueprintjs/core

Pentru a utiliza fire, rulați această comandă:

yarn add @blueprintjs/core

După ce ați instalat Blueprint UI Toolkit, puteți utiliza componentele la alegere în aplicația dvs. React.

Înainte de a utiliza componentele, includeți fișierele CSS din Blueprint UI Toolkit:

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

Adăugarea blocului de cod de mai sus la fișierul dvs. CSS aplică stilurile de interfață Blueprint pentru componentele sale.

De exemplu, pentru a adăuga un buton la aplicația dvs., utilizați Buton componentă din Blueprint UI Toolkit:

import Reacţiona din"reacţiona";
import { Buton } din„@blueprintjs/core”;
funcţieApp() {
întoarcere (



"succes" text=„Clic pe mine” pictograma="reîmprospăta" mic={Adevărat}/>
 </div>
 );
}
exportMod implicit Aplicație;

Acest bloc de cod adaugă un buton la aplicația dvs. folosind Buton componentă. The Buton componenta ia recuzită precum intentie, text, pictograma, mic, și mare.

The intentie prop definește natura butonului, care se reflectă în culoarea de fundal. În acest exemplu, butonul are a succes intentie care ii da o culoare de fundal verde. Blueprint UI oferă mai multe intenții de bază, inclusiv primar (albastru), succes (verde), avertizare (portocaliu) și Pericol (roșu).

Puteți specifica textul care apare în interiorul butonului cu ajutorul butonului text recuzită. De asemenea, puteți adăuga pictograme la buton folosind pictograma recuzită. Alături de pictograma prop este pictograma dreapta prop, care adaugă pictograma în partea dreaptă a butonului.

În cele din urmă, mare și mic elementele de recuzită booleene specifică dimensiunea butonului. The mare prop face butonul mai mare, în timp ce mic prop o face mai mic.

Blocul de cod anterior va genera un buton care arată astfel:

De asemenea, puteți utiliza AnchorButton componentă pentru a crea un buton în aplicația dvs. The AnchorButton componenta este o versiune specializată a componentei Button concepută în mod explicit pentru a fi utilizată ca link.

Această componentă acceptă multe dintre aceleași elemente de recuzită ca și componenta Button, inclusiv text, mare, mic, intentie, și pictograma. De asemenea, acceptă href și ţintă recuzită.

The href prop specifică adresa URL la care se leagă butonul și ţintă prop specifică fereastra sau cadrul țintă pentru link:

import Reacţiona din"reacţiona";
import { AnchorButton } din„@blueprintjs/core”;
funcţieApp() {
întoarcere (



 href=" https://example.com/"
 intentie="primar"
 text=„Clic pe mine”
 tinta="_gol"
 />
 </div>
 );
}
exportMod implicit Aplicație;

Acest bloc de cod de mai sus redă un AnchorButton componentă. Componentele href valoarea prop este „ https://example.com/” si ţintă valoarea prop este „_blank”, ceea ce înseamnă că linkul se va deschide într-o altă filă sau fereastră de browser.

O altă componentă esențială a setului de instrumente Blueprint UI este Card componentă. Aceasta este o componentă reutilizabilă care afișează informații într-o manieră vizuală atrăgătoare.

Componenta Card are două elemente de recuzită interactiv și cota. The cota prop controlează adâncimea umbrei cardului, cu valori mai mari producând un efect de umbră mai proeminent.

The interactiv prop acceptă o valoare booleană. Când este setat la adevărat, permite interacțiunile de trecere cu mouse-ul și clic pe card, permițându-i să răspundă la intrarea utilizatorului.

De exemplu:

import Reacţiona din"reacţiona";
import { Card, Elevation } din„@blueprintjs/core”;
funcţieApp() {
întoarcere (



Adevărat} elevation={Altitudine. DOI}>
Acesta este un Card</h2>


Acesta este un conținut în cardul meu</p>
 </Card>
 </div>
 );
}
exportMod implicit Aplicație;

În acest exemplu, Card componenta are un titlu și un anumit conținut. The interactiv prop este setat la Adevărat.

De asemenea, importați Altitudinea componenta din @blueprintjs/core. The Altitudinea componenta este o enumerare care definește un set de valori predefinite pe care le puteți utiliza pentru a seta adâncimea umbrei unei componente.

Iată valorile disponibile ale Altitudinea enumerare:

1. Altitudinea. ZERO: Această valoare setează adâncimea umbrei la 0, indicând că componenta nu are nicio umbră aplicată
2. Altitudinea. UNU: Această valoare setează adâncimea umbrei la 1.
3. Altitudinea. DOUĂ: Această valoare setează adâncimea umbrei la 2.
4. Altitudinea. TREI: Această valoare setează adâncimea umbrei la 3.
5. Altitudinea. PATRU: Această valoare setează adâncimea umbrei la 4.
6. Altitudinea. CINCI: Această valoare setează adâncimea umbrei la 5.

Redarea blocului de cod de mai sus va afișa pe ecran o imagine care arată astfel:

Componentele Blueprint UI Toolkit sunt ușor de personalizat. Puteți utiliza CSS tradițional pentru a modifica aspectul componentelor sau puteți folosi elementele de recuzită furnizate pentru a le schimba comportamentul.

De exemplu, puteți personaliza aspectul unui buton prin introducerea unui numele clasei recuzită:

import Reacţiona din"reacţiona";
import { Buton } din„@blueprintjs/core”;
funcţieApp() {
întoarcere (



„Clic pe mine” className=„butonul meu”/>
 </div>
 );
}
exportMod implicit Aplicație;

Blocul de cod de mai sus aplică o clasă personalizată butonului, permițându-vă să-i modificați aspectul folosind CSS:

.butonul-meu{
hotar-raza: 10px;
căptușeală: 0.4rem 0.8rem;
}

Aplicarea acestor stiluri va face ca butonul să arate puțin astfel:

Există mult mai mult la Blueprint UI

Blueprint UI oferă mai multe componente decât cele menționate mai sus, cum ar fi Alert, Popover, toast etc. Cu toate acestea, cu informațiile furnizate, puteți construi o aplicație React simplă folosind Blueprint UI.

Vă puteți stila aplicația React folosind diferite metode. Puteți utiliza CSS tradițional, SASS/SCSS, CSS Tailwind și CSS în bibliotecile JS, cum ar fi emoții, componente cu stil etc.