Rakenna React-sovelluksesi Blueprint UI Toolkitillä

React-sovelluksen rakentaminen tyhjästä voi olla aikaa vievä ja haastava tehtävä, varsinkin kun on kyse muotoilukomponenteista. Siinä Blueprint UI Toolkit on hyödyllinen. Työkalupakkaus on joukko uudelleenkäytettäviä käyttöliittymäkomponentteja, joiden avulla voit luoda yhtenäisiä ja visuaalisesti houkuttelevia käyttöliittymiä React-sovelluksillesi.

Opi Blueprint UI Toolkitin perusteista ja sen käyttämisestä yksinkertaisen React-sovelluksen rakentamiseen.

Blueprint UI Toolkit on a React UI -komponenttikirjasto. Se sisältää kokoelman valmiita komponentteja, joita on helppo käyttää ja mukauttaa. Voit käyttää näitä valmiiksi suunniteltuja komponentteja pakkauksesta tai muokata niitä omien tarpeidesi mukaan.

Blueprint UI Toolkitin osia ovat painikkeet, lomakkeet, modaalit, navigointi ja taulukot. Näiden komponenttien käyttäminen voi säästää aikaa ja vaivaa, koska sinun ei tarvitse suunnitella ja rakentaa jokaista komponenttia tyhjästä.

Blueprint UI Toolkitin käytön aloittaminen edellyttää luo React-sovellus.

Kun projektisi on määritetty, voit asentaa Blueprint UI Toolkit -ohjelman millä tahansa valitsemasi Node-paketin asennusohjelmalla. Asenna Blueprint UI Toolkit npm: llä suorittamalla seuraava komento päätteessäsi:

npm asennus @blueprintjs/core

Jos haluat käyttää lankaa sen sijaan, suorita tämä komento:

lanka lisää @blueprintjs/core

Kun olet asentanut Blueprint UI Toolkitin, voit käyttää valitsemiasi komponentteja React-sovelluksessasi.

Ennen kuin käytät komponentteja, sisällytä CSS-tiedostot Blueprint UI Toolkitista:

@tuonti"normalisoi.css";
@tuonti"@blueprintjs/core/lib/css/blueprint.css";
@tuonti"@blueprintjs/icons/lib/css/blueprint-icons.css";

Yllä olevan koodilohkon lisääminen CSS-tiedostoon käyttää Blueprint UI -tyylejä sen komponentteihin.

Jos haluat esimerkiksi lisätä painikkeen sovellukseesi, käytä Painike komponentti Blueprint UI Toolkitista:

tuonti Reagoi alkaen"reagoi";
tuonti { Button } alkaen"@blueprintjs/core";
toimintoSovellus() {
palata (



"menestys" teksti ="Klikkaa minua" kuvake="virkistää" pieni={totta}/>
 </div>
 );
}
viedäoletuksena Sovellus;

Tämä koodilohko lisää painikkeen sovellukseesi käyttämällä Painike komponentti. The Painike komponentti ottaa rekvisiitta, kuten tahallisuus, teksti, kuvake, pieni, ja suuri.

The tahallisuus prop määrittää painikkeen luonteen, joka heijastuu sen taustavärissä. Tässä esimerkissä painikkeessa on a menestys tarkoitus, joka antaa sille vihreän taustavärin. Blueprint UI tarjoaa useita ydintarkoituksia, mukaan lukien ensisijainen (sininen), menestys (vihreä), Varoitus (oranssi) ja vaara (punainen).

Voit määrittää painikkeen sisällä näkyvän tekstin -painikkeella teksti prop. Voit myös lisätä kuvakkeita painikkeeseen käyttämällä kuvake prop. rinnalla kuvake prop on oikea kuvake prop, joka lisää kuvakkeen painikkeen oikealle puolelle.

Lopuksi, suuri ja pieni boolen rekvisiitta määrittää painikkeen koon. The suuri prop tekee painikkeesta suuremman, kun taas pieni potkuri pienentää sitä.

Aiempi koodilohko luo painikkeen, joka näyttää tältä:

Voit myös käyttää Ankkuripainike -komponentti, jolla voit luoda painikkeen sovellukseesi. The Ankkuripainike komponentti on Button-komponentin erikoisversio, joka on suunniteltu käytettäväksi linkkinä.

Tämä komponentti hyväksyy monia samoja rekvisiitta kuin Button-komponentti, mukaan lukien teksti, suuri, pieni, tahallisuus, ja kuvake. Se hyväksyy myös href ja kohde rekvisiitta.

The href prop määrittää URL-osoitteen, johon painike linkittää, ja kohde prop määrittää linkin kohdeikkunan tai -kehyksen:

tuonti Reagoi alkaen"reagoi";
tuonti { Anchor Button } alkaen"@blueprintjs/core";
toimintoSovellus() {
palata (



 href=" https://example.com/"
 tarkoitus ="ensisijainen"
 teksti ="Klikkaa minua"
 kohde="_tyhjä"
 />
 </div>
 );
}
viedäoletuksena Sovellus;

Tämä yllä oleva koodilohko tekee an Ankkuripainike komponentti. Komponentin href prop arvo on " https://example.com/” ja kohde prop arvo on "_blank", mikä tarkoittaa, että linkki avautuu toiseen selaimen välilehteen tai ikkunaan.

Toinen Blueprint UI Toolkitin olennainen osa on Kortti komponentti. Tämä on uudelleen käytettävä komponentti, joka näyttää tiedot houkuttelevalla visuaalisella tavalla.

Korttikomponentti vaatii kaksi rekvisiittaa interaktiivinen ja korkeus. The korkeus prop säätelee kortin varjon syvyyttä, ja korkeammat arvot tuottavat näkyvämmän varjoefektin.

The interaktiivinen prop hyväksyy loogisen arvon. Kun se on asetettu tosi, se mahdollistaa osoitin- ja napsautusvuorovaikutuksen kortilla, jolloin se voi vastata käyttäjän syötteisiin.

Esimerkiksi:

tuonti Reagoi alkaen"reagoi";
tuonti { Kortti, korkeus } alkaen"@blueprintjs/core";
toimintoSovellus() {
palata (



totta} elevation={Korkeus. KAKSI}>
Tämä on kortti</h2>


Tämä on jonkin verran sisältöä sisään minun korttini</p>
 </Card>
 </div>
 );
}
viedäoletuksena Sovellus;

Tässä esimerkissä Kortti komponentilla on otsikko ja jonkin verran sisältöä. The interaktiivinen potkuri on asetettu totta.

Tuot myös Korkeus komponentti alkaen @blueprintjs/core. The Korkeus komponentti on luettelo, joka määrittää joukon ennalta määritettyjä arvoja, joiden avulla voit määrittää komponentin varjosyvyyden.

Tässä ovat käytettävissä olevat arvot Korkeus luettelo:

1. Korkeus. NOLLA: Tämä arvo asettaa varjon syvyyden 0:ksi, mikä osoittaa, että komponentissa ei ole käytetty varjoa
2. Korkeus. YKSI: Tämä arvo asettaa varjon syvyyden 1:ksi.
3. Korkeus. KAKSI: Tämä arvo asettaa varjon syvyyden arvoon 2.
4. Korkeus. KOLME: Tämä arvo asettaa varjon syvyyden arvoon 3.
5. Korkeus. NELJÄ: Tämä arvo asettaa varjon syvyyden arvoon 4.
6. Korkeus. VIISI: Tämä arvo asettaa varjon syvyyden arvoon 5.

Yllä olevan koodilohkon renderöiminen näyttää näytölläsi kuvan, joka näyttää tältä:

Blueprint UI Toolkit -komponentit on helppo mukauttaa. Voit käyttää perinteistä CSS: ää muuttaaksesi osien ulkonäköä tai voit muuttaa niiden toimintaa mukana toimitetuilla varusteilla.

Voit esimerkiksi muokata painikkeen ulkoasua syöttämällä a luokan nimi prop:

tuonti Reagoi alkaen"reagoi";
tuonti { Button } alkaen"@blueprintjs/core";
toimintoSovellus() {
palata (



"Klikkaa minua" luokannimi="oma-painike"/>
 </div>
 );
}
viedäoletuksena Sovellus;

Yllä oleva koodilohko käyttää mukautettua luokkaa painikkeeseen, jolloin voit muokata sen ulkoasua CSS: n avulla:

.my-painike{
raja-säde: 10px;
pehmuste: 0.4rem 0.8rem;
}

Kun käytät näitä tyylejä, painike näyttää hieman tältä:

Blueprint-käyttöliittymässä on paljon muuta

Blueprint UI tarjoaa enemmän komponentteja kuin edellä mainittiin, kuten Alert, Popover, toast jne. Annettujen tietojen avulla voit kuitenkin rakentaa yksinkertaisen React-sovelluksen Blueprint UI: n avulla.

Voit muotoilla React-sovelluksesi eri tavoilla. Voit käyttää perinteisiä CSS-, SASS/SCSS-, Tailwind-CSS- ja CSS-koodeja JS-kirjastoissa, kuten tunteita, tyylillisiä komponentteja jne.