Iššokančių pranešimų, įspėjimų ir tostų kūrimas naudojant „React“ vartotojo sąsają „Blueprint“.

„Blueprint UI“ yra populiarus „React UI“ įrankių rinkinys, kuriame pateikiamas daugkartinio naudojimo komponentų ir stilių rinkinys, skirtas kurti šiuolaikines žiniatinklio programas. Viena iš pagrindinių „Blueprint UI“ ypatybių yra jos palaikymas kuriant iššokančius langus, įspėjimus ir tostus, kurie yra esminiai informacijos ir atsiliepimų vartotojams pateikimo komponentai.

„Blueprint UI“ diegimas

Norėdami pradėti naudoti „Blueprint UI“, pirmiausia turėsite ją įdiegti. Tai galite padaryti naudodami bet kurį pasirinktą paketų tvarkyklę.

Norėdami jį įdiegti naudodami npm, „JavaScript“ paketų tvarkyklė, paleiskite šią komandą savo terminale:

npm įdiegti @blueprintjs/core

Įdiegę Blueprint UI, turite importuoti CSS failus iš bibliotekos:

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

Importuodami šiuos failus galėsite integruoti Blueprint UI stilius su Blueprint UI siūlomais komponentais.

Iššokančių langų kūrimas naudojant „Blueprint“ vartotojo sąsają

Iššokantys langai yra patarimai, kurie rodomi, kai vartotojas užveda žymeklį virš elemento arba jį spusteli. Jie suteikia vartotojui papildomos informacijos arba parinkčių.

Norėdami sukurti iššokančius langus savo React programoje naudodami Blueprint UI, turite įdiegti Blueprint UI Popover2 komponentas.

Norėdami tai padaryti, savo terminale paleiskite šį kodą:

npm įdiegti --save @blueprintjs/popover2

Į CSS failą būtinai importuokite paketo stiliaus lapą:

@importuoti„@blueprintjs/popover2/lib/css/blueprint-popover2.css“;

Importavę stiliaus lapą, galite naudoti Popover2 komponentą, kad sukurtumėte iššokančius langus jūsų programoje.

Pavyzdžiui:

importuoti Reaguoti iš"reaguoti";
importuoti { Mygtukas } iš„@blueprintjs/core“;
importuoti { Popover2 } iš„@blueprintjs/popover2“;
funkcijaProgramėlė() {
konst popoverContent = (



Popover pavadinimas</h3>


Tai yra iššokančiojo vaizdo turinys.</p>
 </div>
 );
grąžinti (




"sėkmė" tekstas ="Paspausk mane" />
 </Popover2>
 </div>
 );
}

eksportuotinumatytas Programėlė;

Šis kodas sukuria iššokantįjį langą naudojant Popover2 komponentas. Ji taip pat apibrėžia a popoverContent kintamasis, kuriame yra iššokančio turinio JSX kodas.

The Popover2 komponentas paima popoverContent kaip jo vertė turinys prop. The turinys prop nurodo turinį, rodomą iškylančiajame lange. Čia, Popover2 komponentų įvyniojimai a Mygtukas komponentas. Dėl to spustelėjus mygtuką rodomas iššokantis langas.

Iššokantis vaizdas atrodo paprastas, kaip parodyta čia:

Iššokančiojo turinio stilių galite pakeisti paspausdami a klasės pavadinimas atrama prie popoverContent JSX kodas:

konst popoverContent = (
"poveris">
Popover pavadinimas</h3>


Tai yra iššokančiojo vaizdo turinys.</p>
 </div>
);

Tada galite apibrėžti CSS klasę savo CSS faile:

.popover {
kamšalas: 1rem;
fono spalva: #e2e2e2;
šrifto šeima: kursyvus;
}

Dabar popover turėtų atrodyti šiek tiek geriau:

The Popover2 komponentas turi keletą rekvizitų, kurie padės sukonfigūruoti jį pagal jūsų poreikius. Kai kurie iš šių rekvizitų yra popoverClassName, onInteraction, atidarytas, minimalus, ir išdėstymas.

The išdėstymas prop nustato pageidaujamą iššokančiojo elemento padėtį tikslinio elemento atžvilgiu. Galimos jo vertės yra šios:

• automatinis
• automatinis paleidimas
• automatinis pabaiga
• viršuje
• viršutinė pradžia
• aukščiausios klasės
• apačioje
• apatinė pradžia
• apatinis galas
• teisingai
• dešinė pradžia
• dešinysis galas
• paliko
• kairioji pradžia
• kairysis galas

Su popoverClassName, galite apibrėžti iškylančiojo elemento CSS klasės pavadinimą. Pirmiausia savo CSS faile sukursite CSS klasę, kad galėtumėte naudoti rekvizitą.

Pavyzdžiui:

.custom-popover {
fono spalva: #e2e2e2;
dėžutė-šešėlis: 0 10px 15px-3 pikseliairgb(0 0 0 / 0.1);
pasienio spindulys: 12px;
kamšalas: 1rem;
}

Sukūrę CSS klasę, naudokite popoverClassName pasiūlymas pritaikyti pasirinktinį stilių Popover2 komponentui:

 content={popoverContent}
 vieta ="iš apačios"
 popoverClassName=„pagal užsakymą“
 minimalus={tiesa}
>
"sėkmė" tekstas ="Paspausk mane" />
</Popover2>

The minimalus rekvizitas valdo iššokančiojo vaizdo stilių. Rekvizitas priima loginę reikšmę. Jei nustatyta į „true“, iššokančiojo lango stilius bus minimalus, be rodyklės ir paprastas langelis.

Perspėjimų kūrimas

Įspėjimai – tai ekrane rodomi pranešimai, informuojantys vartotoją apie svarbią informaciją arba veiksmus. Jie dažniausiai naudojami klaidų pranešimams, sėkmės pranešimams arba įspėjimams rodyti.

Įspėjimų kūrimas „Blueprint UI“ yra panašus į įspėjimų kūrimas naudojant Chakra UI. Naudosite Alert komponentą, kad sukurtumėte įspėjimą „React“ programoje naudodami „Blueprint UI“.

Štai pavyzdys:

importuoti Reaguoti iš"reaguoti";
importuoti { Įspėjimas, mygtukas } iš„@blueprintjs/core“;
funkcijaProgramėlė() {
konst [isOpen, setIsOpen] = React.useState(klaidinga);
konst rankenaAtidaryti = () => {
 setIsOpen(tiesa);
 };
konst rankenaUždaryti = () => {
 setIsOpen(klaidinga);
 };
grąžinti (



"Uždaryti">
Tai perspėjamasis pranešimas</p>
 </Alert>
"Paspausk mane" ketinimas ="sėkmė" onClick={handleOpen} />
 </div>
 );
}
eksportuotinumatytas Programėlė;

Šiame pavyzdyje parodyta, kaip turite importuoti Budrus komponentas iš @blueprintjs/core paketą. The Budrus komponentas ekrane pateikia įspėjimo pranešimą. Taip pat reikia trijų rekvizitų: atidarytas, OnClose, ir patvirtinimo mygtuko tekstas.

The atidarytas prop nustato, ar perspėjimas matomas, ar ne. Nustatykite teisingą, kad būtų rodomas įspėjimas, ir false, kad jį paslėptumėte. The OnClose prop yra atgalinio skambinimo funkcija, kuri veikia, kai vartotojas uždaro įspėjimą.

Galiausiai, patvirtinimo mygtuko tekstas prop nustato tekstą, rodomą patvirtinimo mygtuke.

Šiame pavyzdyje pateiktas įspėjimo pranešimas atrodys taip:

Tostų kūrimas naudojant „Blueprint“ vartotojo sąsają

Tostai yra pranešimai, rodomi ekrane, informuojantys vartotoją apie svarbią informaciją ar įvykius. Jie yra panašūs į įspėjimus, bet paprastai yra mažiau įkyrūs ir greitai išnyksta.

Norėdami sukurti tostą savo „React“ programoje naudodami „Blueprint UI“, naudokite OverlaySkrudintuvas komponentas. The OverlaySkrudintuvas komponentas sukuria skrudintuvo egzempliorių, kuris vėliau naudojamas atskiriems tostams kurti.

Pavyzdžiui:

importuoti Reaguoti iš"reaguoti";
importuoti { OverlayToaster, Button } iš„@blueprintjs/core“;
konst toasterInstance = OverlayToaster.create({ padėtis: "viršutinis dešinysis" });
funkcijaProgramėlė() {
konst showToast = () => {
 toasterInstance.show({
 žinutė: "Tai tostas",
 tikslas: "pirminis",
 laikas baigėsi: 3000,
 isCloseButtonShown: klaidinga,
 piktograma: "skirtukas",
 });
 };
grąžinti (



"Paspausk mane" ketinimas ="sėkmė" onClick={showToast} />
 </div>
 );
}
eksportuotinumatytas Programėlė;

Aukščiau pateiktame kodo bloke naudojama OverlayToaster.create skrudintuvo egzemplioriaus generavimo metodą ir nurodo jo padėtį naudodami padėtis prop.

Tai taip pat apibrėžia funkciją parodyti Toastą. Ši funkcija naudoja Rodyti metodas skrudintuvasInstance kad būtų rodomas tostas, kai bus pašauktas. The Rodyti metodas paima objektą su žinutę, tikslas, laikas baigėsi, isCloseButtonShown, ir piktogramą rekvizitai.

The žinutę prop nurodo skrebučio teksto turinį, o tikslas prop nurodo skrebučio rūšį. Skrudintos stilius skirsis priklausomai nuo jo vertės.

Galite valdyti, kiek laiko bus rodomas skrebučio pranešimas, naudodami laikas baigėsi prop. The piktogramą prop nurodo piktogramos elementą, kuris turi būti rodomas skrudinta duona. Su isCloseButtonShown prop, galite valdyti, ar skrudinta duona rodoma uždarymo mygtukas.

Aukščiau pateiktas kodo blokas sukurs gražų tostą, kai spustelėsite mygtuką, kaip parodyta paveikslėlyje žemiau.

Jei savo „React“ programoje norite sukurti patrauklius pranešimus apie tostą, „Blueprint UI“ yra puiki galimybė. Jame yra daug iš anksto nustatytų komponentų, kuriuos galite naudoti kurdami pranešimus, atitinkančius jūsų programos stilių.

Tačiau jei dirbate su nedideliu projektu, kuriam nereikia visų Blueprint UI funkcijų, „React Toastify“ yra lengva alternatyva gražiems pranešimams kurti.

Vartotojo patirties gerinimas naudojant tostus, iššokančius pranešimus ir įspėjimus

Sužinojote, kaip „React“ programoje kurti iššokančius langus, įspėjimus ir tostus, naudodami „Blueprint UI“. Šie komponentai yra būtini teikiant informaciją ir grįžtamąjį ryšį vartotojams ir gali žymiai pagerinti jūsų programos naudojimo patirtį. Šiuos komponentus galite lengvai sukurti naudodami informaciją, kurią gavote su minimaliomis pastangomis ir tinkindami.