Looge oma React-rakendus Blueprint UI Toolkitiga

Reacti rakenduse loomine nullist võib olla aeganõudev ja keeruline ülesanne, eriti kui tegemist on stiilikomponentidega. Siin on abiks Blueprint UI Toolkit. Tööriistakomplekt on korduvkasutatavate kasutajaliidese komponentide komplekt, mis aitab teil oma Reacti rakendustele luua ühtseid ja visuaalselt atraktiivseid liideseid.

Siit saate teada Blueprint UI Toolkiti põhitõdede ja selle kasutamise kohta lihtsa Reacti rakenduse koostamiseks.

Blueprint UI Toolkit on a Reageeri kasutajaliidese komponentide teek. See sisaldab eelnevalt valmistatud komponentide kogumit, mida on lihtne kasutada ja kohandada. Saate neid eelseadistatud komponente karbist välja võtta või muuta vastavalt oma vajadustele.

Blueprint UI Toolkiti komponentide hulka kuuluvad nupud, vormid, modaalid, navigeerimine ja tabelid. Nende komponentide kasutamine võib säästa teie aega ja vaeva, kuna te ei pea iga komponenti nullist kujundama ja ehitama.

Blueprint UI Toolkitiga alustamiseks peate seda tegema looge rakendus React.

Kui projekt on seadistatud, saate Blueprint UI Toolkiti installida mis tahes valitud Node'i paketi installiprogrammi abil. Blueprint UI Toolkiti installimiseks npm abil käivitage terminalis järgmine käsk:

npm installi @blueprintjs/core

Selle asemel lõnga kasutamiseks käivitage see käsk:

lõng lisa @blueprintjs/core

Kui olete Blueprint UI Toolkiti installinud, saate oma Reacti rakenduses kasutada valitud komponente.

Enne komponentide kasutamist lisage Blueprint UI Toolkiti CSS-failid:

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

Ülaltoodud koodiploki lisamine CSS-faili rakendab selle komponentidele Blueprint UI stiilid.

Näiteks rakendusele nupu lisamiseks kasutage nuppu Nupp Blueprint UI Toolkiti komponent:

importida Reageerige alates"reageeri";
importida { Button } alates"@blueprintjs/core";
funktsiooniRakendus() {
tagasi (



"edu" tekst="Klõpsa mind" ikoon="värskenda" väike={tõsi}/>
 </div>
 );
}
eksportidavaikimisi Rakendus;

See koodiplokk lisab teie rakendusele nupu, kasutades nuppu Nupp komponent. The Nupp komponent võtab rekvisiite nagu kavatsus, tekst, ikooni, väikeja suur.

The kavatsus prop määrab nupu olemuse, mis kajastub selle taustavärvis. Selles näites on nupul a edu kavatsusega, mis annab sellele rohelise taustavärvi. Blueprint UI pakub mitmeid põhilisi eesmärke, sealhulgas esmane (sinine), edu (roheline), hoiatus (oranž) ja oht (punane).

Nupu sees kuvatava teksti saate määrata nupuga tekst prop. Samuti saate nupule ikoone lisada, kasutades ikooni prop. Kõrvuti ikooni prop on paremikoon prop, mis lisab ikooni nupu paremale küljele.

Lõpuks, suur ja väike Boolean rekvisiidid määravad nupu suuruse. The suur prop muudab nupu suuremaks, samas kui väike prop muudab selle väiksemaks.

Varasem koodiplokk genereerib nupu, mis näeb välja selline:

Võite kasutada ka Ankrunupp rakenduses nupu loomiseks. The Ankrunupp komponent on nupu komponendi spetsiaalne versioon, mis on spetsiaalselt loodud lingina kasutamiseks.

See komponent aktsepteerib paljusid samu rekvisiite nagu nupu komponent, sealhulgas tekst, suur, väike, kavatsusja ikooni. Samuti aktsepteeritakse href ja sihtmärk rekvisiidid.

The href prop määrab URL-i, millele nupp lingib, ja sihtmärk prop määrab lingi sihtakna või raami:

importida Reageerige alates"reageeri";
importida { Ankrunupp } alates"@blueprintjs/core";
funktsiooniRakendus() {
tagasi (



 href=" https://example.com/"
 kavatsus="esmane"
 tekst="Klõpsa mind"
 sihtmärk="_blank"
 />
 </div>
 );
}
eksportidavaikimisi Rakendus;

See ülaltoodud koodiplokk renderdab an Ankrunupp komponent. Komponent href prop väärtus on " https://example.com/” ja sihtmärk prop väärtus on "_blank", mis tähendab, et link avaneb teisel brauseri vahekaardil või aknas.

Blueprint UI Toolkiti teine ​​oluline komponent on Kaart komponent. See on korduvkasutatav komponent, mis kuvab teavet ahvatleval visuaalsel viisil.

Kaardi komponent võtab kaks rekvisiidi interaktiivne ja kõrgendus. The kõrgendus prop kontrollib kaardi varju sügavust, kõrgemate väärtustega tekitatakse silmatorkavam varjuefekt.

The interaktiivne prop aktsepteerib tõeväärtust. Kui see on seatud väärtusele Tõene, võimaldab see hõljutada ja klõpsata kaardil, võimaldades sellel reageerida kasutaja sisendile.

Näiteks:

importida Reageerige alates"reageeri";
importida { Kaart, kõrgus } alates"@blueprintjs/core";
funktsiooniRakendus() {
tagasi (



tõsi} elevation={Kõrgus. KAKS}>
See on kaart</h2>


See on osa sisust sisse minu kaart</p>
 </Card>
 </div>
 );
}
eksportidavaikimisi Rakendus;

Selles näites on Kaart komponendil on pealkiri ja sisu. The interaktiivne prop on seatud tõsi.

Samuti impordite Kõrgendus komponent pärit @blueprintjs/core. The Kõrgendus komponent on loend, mis määratleb eelmääratletud väärtuste komplekti, mida saate kasutada komponendi varjusügavuse määramiseks.

Siin on saadaolevad väärtused Kõrgendus loetelu:

1. Kõrgendus. NULL: see väärtus määrab varju sügavuse väärtuseks 0, mis näitab, et komponendile pole rakendatud varju
2. Kõrgendus. ÜKS: see väärtus määrab varju sügavuse väärtuseks 1.
3. Kõrgendus. KAKS: see väärtus seab varju sügavuseks 2.
4. Kõrgendus. KOLM: see väärtus seab varju sügavuseks 3.
5. Kõrgendus. NELI: see väärtus seab varju sügavuseks 4.
6. Kõrgendus. VIIS: see väärtus seab varju sügavuseks 5.

Ülaltoodud koodiploki renderdamisel kuvatakse teie ekraanil pilt, mis näeb välja järgmine:

Blueprint UI Toolkiti komponente on lihtne kohandada. Võite kasutada traditsioonilist CSS-i komponentide välimuse muutmiseks või saate nende käitumise muutmiseks kasutada kaasasolevaid rekvisiite.

Näiteks saate nupu välimust kohandada, sisestades a klassi nimi prop:

importida Reageerige alates"reageeri";
importida { Button } alates"@blueprintjs/core";
funktsiooniRakendus() {
tagasi (



"Klõpsa mind" klassinimi="minu nupp"/>
 </div>
 );
}
eksportidavaikimisi Rakendus;

Ülaltoodud koodiplokk rakendab nupule kohandatud klassi, mis võimaldab teil selle välimust CSS-i abil muuta:

.minu-nupp{
piiriraadius: 10px;
polsterdus: 0.4rem 0.8rem;
}

Nende stiilide rakendamisel näeb teie nupp välja umbes selline:

Blueprinti kasutajaliideses on palju rohkem

Blueprint UI pakub rohkem komponente kui eespool mainitud, nagu Alert, Popover, Toast jne. Esitatud teabe põhjal saate Blueprint UI abil luua lihtsa Reacti rakenduse.

Saate oma Reacti rakenduse stiili kujundada erinevate meetodite abil. JS-i teekides saate kasutada traditsioonilist CSS-i, SASS/SCSS-i, Tailwind CSS-i ja CSS-i, näiteks emotsioone, stiililisi komponente jne.