Looge hüpikaknad, hoiatused ja toostid Blueprint UI abil rakenduses React

Blueprint UI on populaarne React UI tööriistakomplekt, mis pakub moodsate veebirakenduste loomiseks korduvkasutatavate komponentide ja stiilide komplekti. Blueprint UI üks põhifunktsioone on selle toetus hüpikaknate, hoiatuste ja toostide loomisele, mis on olulised komponendid kasutajatele teabe ja tagasiside kuvamiseks.

Blueprint UI installimine

Blueprint UI kasutamise alustamiseks peate selle esmalt installima. Seda saate teha mis tahes teie valitud paketihalduri abil.

Selle installimiseks kasutades npm, JavaScripti paketihaldur, käivitage terminalis järgmine käsk:

npm installi @blueprintjs/core

Pärast Blueprint UI installimist peate importima CSS-failid teegist:

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

Nende failide importimisel saate Blueprint UI stiilid integreerida Blueprint UI pakutavate komponentidega.

Hüpikakende loomine Blueprint UI abil

Hüpikaknad on vihjed, mis ilmuvad, kui kasutaja hõljutab kursorit elemendi kohal või sellel klõpsab. Need pakuvad kasutajale lisateavet või -valikuid.

Rakenduses React hüpikaknate loomiseks Blueprint UI abil peate installima Blueprint UI Popover2 komponent.

Selleks käivitage terminalis järgmine kood:

npm install --save @blueprintjs/popover2

Importige kindlasti oma CSS-faili paketi laaditabel:

@importida"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Pärast laaditabeli importimist saate kasutada Popover2 rakenduses hüpikaknate loomiseks.

Näiteks:

importida Reageerige alates"reageeri";
importida { Button } alates"@blueprintjs/core";
importida { Popover2 } alates"@blueprintjs/popover2";
funktsiooniRakendus() {
konst popoverContent = (



Popover Pealkiri</h3>


See on hüpikakna sees olev sisu.</p>
 </div>
 );
tagasi (




"edu" tekst="Klõpsa mind" />
 </Popover2>
 </div>
 );
}

eksportidavaikimisi Rakendus;

See kood loob hüpikakna, kasutades Popover2 komponent. See määratleb ka a popoverContent muutuja, mis sisaldab hüpikakna sisu JSX-koodi.

The Popover2 komponent võtab popoverContent kui selle väärtus sisu prop. The sisu prop määrab hüpikaknas kuvatava sisu. Siin, Popover2 komponentide mähised a Nupp komponent. See põhjustab hüpikakna kuvamise, kui klõpsate nupul.

Popover näeb välja lihtne, nagu siin näidatud:

Saate hüpikakna sisu stiilida, kui möödute a klassi nimi toetada popoverContent JSX kood:

konst popoverContent = (
'läbi astuma'>
Popover Pealkiri</h3>


See on hüpikakna sees olev sisu.</p>
 </div>
);

Seejärel saate oma CSS-failis määrata CSS-klassi:

.läbi astuma {
polsterdus: 1rem;
taustavärv: #e2e2e2;
font-perekond: kursiiv;
}

Nüüd peaks hüpikaken veidi parem välja nägema:

The Popover2 komponent võtab mõned rekvisiidid, mis aitavad teil seda teie vajadustele vastavaks konfigureerida. Mõned neist rekvisiitidest on popoverClassName, on Interaction, on avatud, minimaalne, ja paigutus.

The paigutus prop määrab hüpikakna eelistatud asukoha sihtelemendi suhtes. Selle saadaolevad väärtused on järgmised:

• auto
• automaatne käivitamine
• automaatne lõpp
• üleval
• top-start
• ülemine ots
• põhja
• alt-start
• alumine ots
• õige
• õige algus
• parem-ots
• vasakule
• vasakpoolne algus
• vasakpoolne ots

Koos popoverClassName, saate hüpikaknaelemendile määrata CSS-klassi nime. Rekvisiidi kasutamiseks loote esmalt oma CSS-failis CSS-klassi.

Näiteks:

.custom-popover {
taustavärv: #e2e2e2;
kast-vari: 0 10px 15px-3 pikslitrgb(0 0 0 / 0.1);
piiriraadius: 12px;
polsterdus: 1rem;
}

Pärast CSS-klassi loomist kasutage popoverClassName soovitus kohandatud stiili rakendamiseks Popover2 komponendile:

 content={popoverContent}
 paigutus="alumine ots"
 popoverClassName="kohandatud pover"
 minimaalne={tõsi}
>
"edu" tekst="Klõpsa mind" />
</Popover2>

The minimaalne prop juhib hüpikakna stiili. Rekvisiit aktsepteerib tõeväärtust. Kui see on seatud väärtusele Tõene, on hüpikakna stiil minimaalne, nool puudub ja kasti välimus on lihtne.

Märguannete loomine

Märguanded on teated, mis kuvatakse ekraanile, et teavitada kasutajat olulisest teabest või toimingutest. Neid kasutatakse tavaliselt veateadete, eduteadete või hoiatuste kuvamiseks.

Hoiatuste loomine Blueprint UI-s on sarnane hoiatuste loomine Chakra kasutajaliidese abil. Kasutate teavituskomponenti oma Reacti rakenduses Blueprint UI abil hoiatuse loomiseks.

Siin on näide:

importida Reageerige alates"reageeri";
importida { Alert, Button } alates"@blueprintjs/core";
funktsiooniRakendus() {
konst [isOpen, setIsOpen] = React.useState(vale);
konst käepideAva = () => {
 setIsOpen(tõsi);
 };
konst käepideClose = () => {
 setIsOpen(vale);
 };
tagasi (



"Sulge">
See on hoiatussõnum</p>
 </Alert>
"Klõpsa mind" kavatsus="edu" onClick={handleOpen} />
 </div>
 );
}
eksportidavaikimisi Rakendus;

See näide näitab, kuidas peate importima Hoiatus komponent pärit @blueprintjs/core pakett. The Hoiatus komponent kuvab ekraanile hoiatusteate. See võtab ka kolme rekvisiidi: on avatud, onClose, ja KinnitaButtonTekst.

The on avatud prop määrab, kas hoiatus on nähtav või mitte. Hoiatuse kuvamiseks määrake väärtuseks True ja selle peitmiseks false. The onClose prop on tagasihelistamise funktsioon, mis töötab siis, kui kasutaja hoiatuse sulgeb.

Lõpuks, KinnitaButtonTekst prop määrab kinnitusnupul kuvatava teksti.

Selle näite hoiatusteade näeb välja järgmine:

Toostide loomine Blueprint UI abil

Röstsaid on ekraanile ilmuvad teated, et teavitada kasutajat olulisest teabest või sündmustest. Need sarnanevad hoiatustega, kuid on tavaliselt vähem pealetükkivad ja kaovad kiiresti.

Rakenduses React toosti loomiseks Blueprint UI abil kasutage OverlayRöster komponent. The OverlayRöster komponent loob Toasteri eksemplari, mida kasutatakse seejärel üksikute röstsaitide loomiseks.

Näiteks:

importida Reageerige alates"reageeri";
importida { OverlayToaster, Button } alates"@blueprintjs/core";
konst toasterInstance = OverlayToaster.create({ positsiooni: "üleval paremal" });
funktsiooniRakendus() {
konst showToast = () => {
 toasterInstance.show({
 sõnum: "See on toost",
 kavatsus: "esmane",
 aeg maha: 3000,
 isCloseButtonShown: vale,
 ikoon: "järjehoidja",
 });
 };
tagasi (



"Klõpsa mind" kavatsus="edu" onClick={showToast} />
 </div>
 );
}
eksportidavaikimisi Rakendus;

Ülaltoodud koodiplokk kasutab OverlayToaster.create meetod röstri eksemplari loomiseks ja määrab selle asukoha, kasutades positsiooni prop.

See määrab ka funktsiooni näita Toast. See funktsioon kasutab näidata meetod rösterInstance röstsaia kuvamiseks, kui kutsutakse. The näidata meetod võtab objekti koos sõnum, kavatsus, aeg maha, isCloseButtonShown, ja ikooni rekvisiidid.

The sõnum prop määrab röstsaia tekstisisu, samas kui kavatsus prop määrab röstsaia tüübi. Röstsaia stiil varieerub sõltuvalt selle väärtusest.

Saate juhtida, kui kaua röstsaiateatist kuvatakse, kasutades nuppu aeg maha prop. The ikooni prop määrab röstsaias kuvatava ikoonielemendi. Koos isCloseButtonShown prop, saate juhtida, kas röstsaias kuvatakse sulgemisnupp.

Ülaltoodud koodiplokk loob ilusa röstsaia, kui klõpsate nupul, nagu on näha alloleval pildil.

Kui soovite oma Reacti rakenduses luua atraktiivseid röstsaiateateid, on Blueprint UI suurepärane võimalus. See pakub laias valikus eelmääratletud komponente, mida saate kasutada teie rakenduse stiilile vastavate teatiste loomiseks.

Kui aga töötate väikese projektiga, mis ei nõua kõiki Blueprinti kasutajaliidese funktsioone, React Toastify on kerge alternatiiv kaunite teatiste loomiseks.

Täiustage kasutajakogemust röstsaitide, hüpikaknade ja hoiatustega

Olete õppinud, kuidas Blueprint UI abil oma Reacti rakenduses hüpikaknaid, hoiatusi ja röstsaid luua. Need komponendid on kasutajatele teabe ja tagasiside andmiseks hädavajalikud ning võivad teie rakenduse kasutuskogemust märkimisväärselt parandada. Saate neid komponente hõlpsalt luua, kasutades saadud teavet minimaalse pingutuse ja kohandamisega.