Izrada skočnih prozora, upozorenja i zdravica s korisničkim sučeljem Blueprint u Reactu

Blueprint UI popularan je alat React UI koji pruža skup komponenti i stilova za višekratnu upotrebu za izradu modernih web aplikacija. Jedna od ključnih značajki korisničkog sučelja Blueprint njegova je podrška za stvaranje skočnih prozora, upozorenja i zdravica, što su bitne komponente za prikazivanje informacija i povratnih informacija korisnicima.

Instaliranje korisničkog sučelja Blueprint

Da biste započeli s korištenjem Blueprint UI, prvo ćete ga morati instalirati. To možete učiniti koristeći bilo koji upravitelj paketa po vašem izboru.

Da biste ga instalirali pomoću npm, JavaScript upravitelj paketa, pokrenite sljedeću naredbu na svom terminalu:

npm instalirajte @blueprintjs/core

Nakon instaliranja Blueprint UI, morate uvesti CSS datoteke iz biblioteke:

@uvoz"normaliziraj.css";
@uvoz"@blueprintjs/core/lib/css/blueprint.css";
@uvoz"@blueprintjs/icons/lib/css/blueprint-icons.css";

Uvozom ovih datoteka, moći ćete integrirati stilove korisničkog sučelja Blueprint s komponentama koje nudi korisničko sučelje Blueprint.

Stvaranje Popovera pomoću korisničkog sučelja Blueprint

Skočni prozori su opisi alata koji se pojavljuju kada korisnik prijeđe pokazivačem iznad elementa ili klikne na njega. Oni korisniku pružaju dodatne informacije ili opcije.

Da biste kreirali skočne prozore u svojoj React aplikaciji koristeći Blueprint UI, morate instalirati Blueprint UI Popover2 komponenta.

Da biste to učinili, pokrenite sljedeći kod na svom terminalu:

npm install --save @blueprintjs/popover2

Svakako uvezite tablicu stilova paketa u svoju CSS datoteku:

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

Nakon uvoza stilske tablice, možete koristiti Popover2 komponenta za stvaranje skočnih prozora u vašoj aplikaciji.

Na primjer:

uvoz Reagirati iz"reagirati";
uvoz { Dugme } iz"@blueprintjs/core";
uvoz { Popover2 } iz"@blueprintjs/popover2";
funkcijaaplikacija() {
konst popoverContent = (



Popover Naslov</h3>


Ovo je sadržaj unutar skočnog prozora.</p>
 </div>
 );
povratak (




"uspjeh" tekst="klikni me" />
 </Popover2>
 </div>
 );
}

izvozzadano aplikacija;

Ovaj kod stvara popover pomoću Popover2 komponenta. Također definira a popoverContent varijabla koja sadrži JSX kod za popover sadržaj.

The Popover2 komponenta preuzima popoverContent kao vrijednost svoje sadržaj oslonac The sadržaj prop specificira sadržaj prikazan unutar skočnog prozora. Evo, Popover2 omoti komponenti a Dugme komponenta. To uzrokuje pojavljivanje skočnog prozora kada kliknete gumb.

Popover izgleda jednostavno, kao što je prikazano ovdje:

Popover sadržaj možete stilizirati dodavanjem a naziv klase oslonac za popoverContent JSX kod:

konst popoverContent = (
'popover'>
Popover Naslov</h3>


Ovo je sadržaj unutar skočnog prozora.</p>
 </div>
);

Zatim možete definirati CSS klasu u svojoj CSS datoteci:

.popover {
podstava: 1rem;
boja pozadine: #e2e2e2;
obitelj-fontova: rukopisni;
}

Sada bi popover trebao izgledati malo bolje:

The Popover2 komponenta zahtijeva neke rekvizite koji će vam pomoći da je konfigurirate da odgovara vašim potrebama. Neki od tih rekvizita su popoverClassName, onInteraction, otvoreno je, minimalan, i plasman.

The plasman prop određuje preferirani položaj popover-a u odnosu na ciljni element. Njegove dostupne vrijednosti su:

• auto
• auto-start
• auto-kraj
• vrh
• top-start
• vrhunski
• dno
• donji početak
• donji kraj
• pravo
• desno-početak
• desni kraj
• lijevo
• lijevo-početak
• lijevi kraj

s popoverClassName, možete definirati naziv CSS klase za popover element. Prvo ćete stvoriti CSS klasu u svojoj CSS datoteci da biste koristili prop.

Na primjer:

.custom-popover {
boja pozadine: #e2e2e2;
kutija-sjena: 0 10px 15px-3pxrgb(0 0 0 / 0.1);
granični radijus: 12px;
podstava: 1rem;
}

Nakon što stvorite CSS klasu, upotrijebite popoverClassName prop za primjenu prilagođenog stila na komponentu Popover2:

 content={popoverContent}
 plasman="donji kraj"
 popoverClassName="custom-popover"
 minimalno={pravi}
>
"uspjeh" tekst="klikni me" />
</Popover2>

The minimalan prop kontrolira stil popovera. Potpora prihvaća Booleovu vrijednost. Ako se postavi na true, popover će imati minimalan stil, bez strelice i izgled jednostavnog okvira.

Stvaranje upozorenja

Upozorenja su obavijesti koje se pojavljuju na zaslonu kako bi obavijestile korisnika o važnim informacijama ili radnjama. Obično se koriste za prikaz poruka o pogrešci, poruka o uspjehu ili upozorenja.

Stvaranje upozorenja u korisničkom sučelju Blueprint slično je stvaranje upozorenja pomoću korisničkog sučelja Chakra. Koristit ćete komponentu Alert za stvaranje upozorenja u svojoj React aplikaciji koristeći Blueprint UI.

Evo primjera:

uvoz Reagirati iz"reagirati";
uvoz { Upozorenje, gumb } iz"@blueprintjs/core";
funkcijaaplikacija() {
konst [isOpen, setIsOpen] = React.useState(lažno);
konst ručkaOtvori = () => {
 setIsOpen(pravi);
 };
konst ručka Zatvori = () => {
 setIsOpen(lažno);
 };
povratak (



"Zatvoriti">
Ovo je poruka upozorenja</p>
 </Alert>
"klikni me" namjera="uspjeh" onClick={handleOpen} />
 </div>
 );
}
izvozzadano aplikacija;

Ovaj primjer pokazuje kako morate uvesti uzbuna komponenta iz @blueprintjs/core paket. The uzbuna komponenta prikazuje poruku upozorenja na zaslonu. Također su potrebna tri rekvizita: otvoreno je, onClose, i potvrditiButtonText.

The otvoreno je prop određuje je li upozorenje vidljivo ili ne. Postavite ga na true da biste prikazali upozorenje i false da biste ga sakrili. The onClose prop je funkcija povratnog poziva koja se pokreće kada korisnik zatvori upozorenje.

Na kraju, potvrditiButtonText prop određuje tekst prikazan na gumbu za potvrdu.

Obavijest upozorenja u ovom primjeru izgledat će ovako:

Stvaranje zdravica s korisničkim sučeljem Blueprint

Zdravice su obavijesti koje se pojavljuju na ekranu kako bi obavijestile korisnika o važnim informacijama ili događajima. Slični su upozorenjima, ali su obično manje nametljivi i brzo nestaju.

Da biste stvorili tost u svojoj React aplikaciji koristeći Blueprint UI, upotrijebite OverlayToaster komponenta. The OverlayToaster komponenta stvara instancu tostera koja se zatim koristi za stvaranje pojedinačnih tosta.

Na primjer:

uvoz Reagirati iz"reagirati";
uvoz { OverlayToaster, Button } iz"@blueprintjs/core";
konst toasterInstance = OverlayToaster.create({ položaj: "Gore desno" });
funkcijaaplikacija() {
konst showToast = () => {
 toasterInstance.show({
 poruka: "Ovo je zdravica",
 namjera: "primarni",
 pauza: 3000,
 isCloseButtonShown: lažno,
 ikona: "oznaka",
 });
 };
povratak (



"klikni me" namjera="uspjeh" onClick={showToast} />
 </div>
 );
}
izvozzadano aplikacija;

Gornji blok koda koristi OverlayToaster.create metoda za generiranje instance tostera i specificira njen položaj pomoću položaj oslonac

Također definira funkciju showToast. Ova funkcija koristi pokazati metoda TosterInstance za prikaz tosta kada se pozove. The pokazati metoda uzima objekt s poruka, namjera, pauza, isCloseButtonShown, i ikona rekviziti.

The poruka prop specificira tekstualni sadržaj tosta, dok namjera prop određuje vrstu tosta. Stil tosta će se razlikovati ovisno o njegovoj vrijednosti.

Možete kontrolirati koliko dugo se obavijest tosta prikazuje pomoću pauza oslonac The ikona prop specificira element ikone za prikaz u tostu. s isCloseButtonShown prop, možete kontrolirati hoće li se gumb za zatvaranje prikazati u tostu.

Blok koda iznad će generirati prekrasnu zdravicu kada kliknete na gumb, kao što se vidi na slici ispod.

Ako želite stvoriti atraktivne toast obavijesti u svojoj React aplikaciji, Blueprint UI je izvrsna opcija. Pruža širok raspon unaprijed definiranih komponenti koje možete koristiti za stvaranje obavijesti koje odgovaraju stilu vaše aplikacije.

Međutim, ako radite na malom projektu koji ne zahtijeva sve značajke korisničkog sučelja Blueprint, React Toastify je lagana alternativa stvaranju lijepih obavijesti.

Poboljšanje korisničkog iskustva uz tostove, skočne poruke i upozorenja

Naučili ste kako stvoriti skočne prozore, upozorenja i tostove u svojoj React aplikaciji koristeći Blueprint UI. Ove su komponente bitne za pružanje informacija i povratnih informacija korisnicima i mogu značajno poboljšati korisničko iskustvo vaše aplikacije. Ove komponente možete jednostavno izraditi pomoću informacija koje ste dobili uz minimalan trud i prilagodbu.