Kurkite savo „React“ programą naudodami „Blueprint UI Toolkit“.

„React“ programos kūrimas nuo nulio gali būti daug laiko reikalaujanti ir sudėtinga užduotis, ypač kai kalbama apie stiliaus komponentus. Štai kur „Blueprint UI Toolkit“ pravers. Įrankių rinkinys yra daugkartinio naudojimo vartotojo sąsajos komponentų rinkinys, kuris gali padėti sukurti nuoseklias ir vizualiai patrauklias „React“ programų sąsajas.

Sužinokite apie „Blueprint UI Toolkit“ pagrindus ir kaip jį naudoti kuriant paprastą „React“ programą.

„Blueprint UI Toolkit“ yra a Reaguoti UI komponentų biblioteką. Jame yra iš anksto paruoštų komponentų rinkinys, kurį lengva naudoti ir pritaikyti. Galite naudoti šiuos iš anksto suprojektuotus komponentus arba modifikuoti juos, kad atitiktų jūsų konkrečius poreikius.

„Blueprint UI Toolkit“ komponentai yra mygtukai, formos, modalai, naršymas ir lentelės. Naudodami šiuos komponentus galite sutaupyti laiko ir pastangų, nes jums nereikia kurti ir kurti kiekvieno komponento nuo nulio.

Norėdami pradėti naudoti „Blueprint UI Toolkit“, turėsite sukurti „React“ programą.

Kai projektas bus nustatytas, galite įdiegti „Blueprint UI Toolkit“ naudodami bet kurią pasirinktą „Node“ paketo diegimo programą. Norėdami įdiegti Blueprint UI Toolkit naudodami npm, terminale paleiskite šią komandą:

npm įdiegti @blueprintjs/core

Norėdami vietoj to naudoti verpalą, paleiskite šią komandą:

verpalai pridėti @blueprintjs/core

Įdiegę „Blueprint UI Toolkit“, savo „React“ programoje galite naudoti pasirinktus komponentus.

Prieš naudodami komponentus, įtraukite CSS failus iš Blueprint UI Toolkit:

@importuoti"normalize.css";
@importuoti„@blueprintjs/core/lib/css/blueprint.css“;
@importuoti„@blueprintjs/icons/lib/css/blueprint-icons.css“;

Pridėjus aukščiau esantį kodo bloką prie CSS failo, jo komponentams taikomi Blueprint UI stiliai.

Pavyzdžiui, norėdami pridėti mygtuką prie programos, naudokite Mygtukas komponentas iš Blueprint UI Toolkit:

importuoti Reaguoti iš"reaguoti";
importuoti { Mygtukas } iš„@blueprintjs/core“;
funkcijaProgramėlė() {
grąžinti (



"sėkmė" tekstas ="Paspausk mane" piktograma ="atnaujinti" mažas = {tiesa}/>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Šis kodo blokas prideda mygtuką prie programos, naudodamas Mygtukas komponentas. The Mygtukas komponentas paima rekvizitus, tokius kaip tikslas, tekstą, piktogramą, mažas, ir didelis.

The tikslas prop apibrėžia mygtuko pobūdį, kuris atsispindi jo fono spalvoje. Šiame pavyzdyje mygtukas turi a sėkmė tyčia, kuri suteikia jai žalią fono spalvą. „Blueprint UI“ siūlo keletą pagrindinių tikslų, įskaitant pirminis (mėlyna), sėkmė (žalias), įspėjimas (oranžinė) ir pavojų (raudona).

Galite nurodyti tekstą, kuris rodomas mygtuko viduje, naudodami tekstą prop. Taip pat prie mygtuko galite pridėti piktogramų naudodami piktogramą prop. Kartu su piktogramą rekvizitas yra dešinė piktograma prop, kuris prideda piktogramą dešinėje mygtuko pusėje.

Galiausiai, didelis ir mažas Būlio rekvizitai nurodo mygtuko dydį. The didelis prop daro mygtuką didesnį, o mažas rekvizitas sumažina.

Ankstesnis kodo blokas sugeneruos mygtuką, kuris atrodo taip:

Taip pat galite naudoti Inkaro mygtukas komponentą, kad sukurtumėte mygtuką savo programoje. The Inkaro mygtukas komponentas yra specializuota mygtuko komponento versija, skirta naudoti kaip nuoroda.

Šis komponentas priima daug tų pačių rekvizitų kaip ir mygtuko komponentas, įskaitant tekstą, didelis, mažas, tikslas, ir piktogramą. Ji taip pat priima href ir taikinys rekvizitai.

The href prop nurodo URL, į kurį nukreipia mygtukas, ir taikinys prop nurodo tikslinį nuorodos langą arba rėmelį:

importuoti Reaguoti iš"reaguoti";
importuoti { Anchor Button } iš„@blueprintjs/core“;
funkcijaProgramėlė() {
grąžinti (



 href=" https://example.com/"
 ketinimas ="pirminis"
 tekstas ="Paspausk mane"
 taikinys="_tuščias"
 />
 </div>
 );
}
eksportuotinumatytas Programėlė;

Šis kodo blokas aukščiau pateikia an Inkaro mygtukas komponentas. Komponentas href rekvizito vertė yra " https://example.com/” ir taikinys prop reikšmė yra „_blank“, o tai reiškia, kad nuoroda bus atidaryta kitame naršyklės skirtuke arba lange.

Kitas svarbus „Blueprint UI Toolkit“ komponentas yra Kort komponentas. Tai daugkartinio naudojimo komponentas, kuris pateikia informaciją patraukliu vaizdiniu būdu.

Kortelės komponentui reikia dviejų rekvizitų interaktyvus ir pakilimas. The pakilimas prop valdo kortelės šešėlio gylį, o didesnės reikšmės sukuria ryškesnį šešėlio efektą.

The interaktyvus prop priima loginę reikšmę. Kai nustatyta į „true“, ji įgalina užvedus pelės žymeklį ir spustelėjimą kortelėje, leidžiančią reaguoti į vartotojo įvestį.

Pavyzdžiui:

importuoti Reaguoti iš"reaguoti";
importuoti { Kortelė, aukštis } iš„@blueprintjs/core“;
funkcijaProgramėlė() {
grąžinti (



tiesa} elevation={Aukštis. DU}>
Tai kortelė</h2>


Tai yra tam tikras turinys in mano kortelė </p>
 </Card>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Šiame pavyzdyje Kort komponentas turi pavadinimą ir tam tikrą turinį. The interaktyvus rekvizitas nustatytas tiesa.

Taip pat importuojate Pakilimas komponentas iš @blueprintjs/core. The Pakilimas komponentas yra sąrašas, apibrėžiantis iš anksto nustatytų reikšmių rinkinį, kurį galite naudoti komponento šešėlio gyliui nustatyti.

Čia pateikiamos galimos vertės Pakilimas enum:

1. Pakilimas. NULIS: ši reikšmė nustato šešėlio gylį į 0, nurodydama, kad komponentui nėra pritaikyto šešėlio
2. Pakilimas. VIENA: Ši reikšmė nustato šešėlio gylį į 1.
3. Pakilimas. DU: Ši reikšmė nustato šešėlio gylį į 2.
4. Pakilimas. TRYS: Ši reikšmė nustato šešėlio gylį į 3.
5. Pakilimas. KETURI: Ši reikšmė nustato šešėlio gylį į 4.
6. Pakilimas. PENKI: Ši reikšmė nustato šešėlio gylį į 5.

Pateikus aukščiau esantį kodo bloką, ekrane bus rodomas vaizdas, kuris atrodys taip:

„Blueprint UI Toolkit“ komponentus lengva tinkinti. Galite naudoti tradicinį CSS Norėdami pakeisti komponentų išvaizdą, arba galite naudoti pateiktus rekvizitus, kad pakeistumėte jų elgesį.

Pavyzdžiui, galite tinkinti mygtuko išvaizdą įvesdami a klasės pavadinimas rekvizitas:

importuoti Reaguoti iš"reaguoti";
importuoti { Mygtukas } iš„@blueprintjs/core“;
funkcijaProgramėlė() {
grąžinti (



"Paspausk mane" className="mano mygtukas"/>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Aukščiau pateiktas kodo blokas mygtukui pritaiko pasirinktinę klasę, leidžiančią pakeisti jo išvaizdą naudojant CSS:

.mano mygtukas{
pasienio spindulys: 10px;
kamšalas: 0.4rem 0.8rem;
}

Pritaikius šiuos stilius mygtukas atrodys maždaug taip:

„Blueprint UI“ yra daug daugiau

„Blueprint UI“ siūlo daugiau komponentų, nei paminėta aukščiau, pvz., „Alert“, „Popover“, „Toast“ ir kt. Tačiau naudodami pateiktą informaciją galite sukurti paprastą „React“ programą naudodami „Blueprint UI“.

Galite sukurti savo „React“ programos stilių naudodami skirtingus metodus. JS bibliotekose galite naudoti tradicinį CSS, SASS/SCSS, Tailwind CSS ir CSS, pvz., emocijų, stiliaus komponentų ir kt.