Ustvarjanje popoverjev, opozoril in zdravic z uporabniškim vmesnikom Blueprint v Reactu

Blueprint UI je priljubljen nabor orodij React UI, ki ponuja nabor komponent in slogov za večkratno uporabo za izdelavo sodobnih spletnih aplikacij. Ena od ključnih lastnosti vmesnika Blueprint UI je njegova podpora za ustvarjanje pojavnih oken, opozoril in zdravic, ki so bistvene komponente za prikazovanje informacij in povratnih informacij uporabnikom.

Namestitev uporabniškega vmesnika Blueprint

Če želite začeti uporabljati uporabniški vmesnik Blueprint, ga morate najprej namestiti. To lahko storite s katerim koli upraviteljem paketov po vaši izbiri.

Če ga želite namestiti z uporabo npm, upravitelj paketov JavaScript, v terminalu zaženite naslednji ukaz:

npm namestite @blueprintjs/core

Po namestitvi Blueprint UI morate uvoziti datoteke CSS iz knjižnice:

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

Z uvozom teh datotek boste lahko integrirali sloge uporabniškega vmesnika Blueprint s komponentami, ki jih ponuja uporabniški vmesnik Blueprint.

Ustvarjanje popoverjev z uporabniškim vmesnikom Blueprint

Popoverji so namigi orodij, ki se prikažejo, ko se uporabnik premakne nad element ali klikne nanj. Uporabniku nudijo dodatne informacije ali možnosti.

Če želite ustvariti pojavna okna v svoji aplikaciji React z uporabniškim vmesnikom Blueprint, morate namestiti uporabniški vmesnik Blueprint Popover2 komponento.

Če želite to narediti, zaženite naslednjo kodo v svojem terminalu:

npm install --save @blueprintjs/popover2

Ne pozabite uvoziti slogovne datoteke paketa v datoteko CSS:

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

Ko uvozite slogovno datoteko, lahko uporabite Popover2 komponento za ustvarjanje popoverjev v vaši aplikaciji.

Na primer:

uvoz Reagiraj od"reagirati";
uvoz {Gumb} od"@blueprintjs/core";
uvoz { Popover2 } od"@blueprintjs/popover2";
funkcijoaplikacija() {
konst popoverContent = (



Popover Naslov</h3>


To je vsebina v pojavnem oknu.</p>
 </div>
 );
vrnitev (




"uspeh" besedilo="Klikni me" />
 </Popover2>
 </div>
 );
}

izvozprivzeto aplikacija;

Ta koda ustvari popover z uporabo Popover2 komponento. Opredeljuje tudi a popoverContent spremenljivka, ki vsebuje kodo JSX za popover vsebino.

The Popover2 komponenta prevzame popoverContent kot vrednost njegovega vsebino prop. The vsebino prop določa vsebino, prikazano v pojavnem oknu. Tukaj, Popover2 obloge komponent a Gumb komponento. To povzroči, da se pojavi pojavni okvir, ko kliknete gumb.

Popover je videti preprost, kot je prikazano tukaj:

Pojavno vsebino lahko oblikujete tako, da podate a className prop na popoverContent Koda JSX:

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


To je vsebina v pojavnem oknu.</p>
 </div>
);

Nato lahko definirate razred CSS v datoteki CSS:

.popover {
oblazinjenje: 1rem;
Barva ozadja: #e2e2e2;
družina pisav: kurziv;
}

Zdaj bi moral biti popover videti malo bolje:

The Popover2 komponenta potrebuje nekaj pripomočkov, ki vam bodo pomagali konfigurirati, da bo ustrezala vašim potrebam. Nekateri od teh rekvizitov so popoverClassName, onInteraction, je odprto, minimalno, in umestitev.

The umestitev prop določa prednostni položaj popoverja glede na ciljni element. Njegove razpoložljive vrednosti so:

• avto
• samodejni zagon
• samodejni konec
• vrh
• top-start
• top-end
• dno
• spodnji začetek
• spodnji del
• prav
• desni začetek
• desni konec
• levo
• levo-začetek
• levi konec

z popoverClassName, lahko definirate ime razreda CSS za pojavni element. Najprej boste v datoteki CSS ustvarili razred CSS, da boste uporabili prop.

Na primer:

.custom-popover {
Barva ozadja: #e2e2e2;
box-shadow: 0 10px 15px-3pxrgb(0 0 0 / 0.1);
mejni polmer: 12px;
oblazinjenje: 1rem;
}

Ko ustvarite razred CSS, uporabite popoverClassName prop za uporabo sloga po meri za komponento Popover2:

 content={popoverContent}
 umestitev="spodnji konec"
 popoverClassName="popover po meri"
 minimalno={prav}
>
"uspeh" besedilo="Klikni me" />
</Popover2>

The minimalno prop nadzoruje stil popoverja. Prop sprejme logično vrednost. Če je nastavljeno na »true«, bo popover imel minimalen slog, brez puščice in preprost videz polja.

Ustvarjanje opozoril

Opozorila so obvestila, ki se prikažejo na zaslonu in uporabnika obvestijo o pomembnih informacijah ali dejanjih. Običajno se uporabljajo za prikaz sporočil o napakah, sporočil o uspehu ali opozoril.

Ustvarjanje opozoril v uporabniškem vmesniku Blueprint je podobno ustvarjanje opozoril z uporabniškim vmesnikom Chakra. Komponento Alert boste uporabili za ustvarjanje opozorila v vaši aplikaciji React z uporabniškim vmesnikom Blueprint.

Tukaj je primer:

uvoz Reagiraj od"reagirati";
uvoz {Opozorilo, gumb} od"@blueprintjs/core";
funkcijoaplikacija() {
konst [isOpen, setIsOpen] = React.useState(lažno);
konst handleOpen = () => {
 setIsOpen(prav);
 };
konst ročajZapri = () => {
 setIsOpen(lažno);
 };
vrnitev (



"Zapri">
To je opozorilno sporočilo</p>
 </Alert>
"Klikni me" namen="uspeh" onClick={handleOpen} />
 </div>
 );
}
izvozprivzeto aplikacija;

Ta primer prikazuje, kako morate uvoziti Opozorilo komponenta iz @blueprintjs/core paket. The Opozorilo komponenta prikaže opozorilno sporočilo na zaslonu. Potrebuje tudi tri pripomočke: je odprto, onClose, in potrditiButtonText.

The je odprto prop določa, ali je opozorilo vidno ali ne. Nastavite ga na true, da prikažete opozorilo, in na false, da ga skrijete. The onClose prop je funkcija povratnega klica, ki se zažene, ko uporabnik zapre opozorilo.

Nazadnje, potrditiButtonText prop določa besedilo, prikazano na potrditvenem gumbu.

Opozorilno obvestilo v tem primeru bo videti takole:

Ustvarjanje zdravic z uporabniškim vmesnikom Blueprint

Zdravice so obvestila, ki se prikažejo na zaslonu in uporabnika obvestijo o pomembnih informacijah ali dogodkih. Podobni so opozorilom, vendar so običajno manj vsiljivi in ​​hitro izginejo.

Če želite ustvariti zdravico v svoji aplikaciji React z uporabniškim vmesnikom Blueprint, uporabite OverlayToaster komponento. The OverlayToaster komponenta ustvari primerek Toasterja, ki se nato uporabi za ustvarjanje posameznih toastov.

Na primer:

uvoz Reagiraj od"reagirati";
uvoz { OverlayToaster, Button } od"@blueprintjs/core";
konst toasterInstance = OverlayToaster.create({ položaj: "zgoraj desno" });
funkcijoaplikacija() {
konst showToast = () => {
 toasterInstance.show({
 sporočilo: "To je zdravica",
 namen: "primarni",
 odmor: 3000,
 isCloseButtonShown: lažno,
 ikona: "zaznamek",
 });
 };
vrnitev (



"Klikni me" namen="uspeh" onClick={showToast} />
 </div>
 );
}
izvozprivzeto aplikacija;

Zgornji blok kode uporablja OverlayToaster.create za generiranje primerka toasterja in določi njegov položaj z uporabo položaj prop.

Določa tudi funkcijo showToast. Ta funkcija uporablja pokazati metoda toasterInstance za prikaz zdravice ob klicu. The pokazati metoda vzame predmet z sporočilo, namen, odmor, isCloseButtonShown, in ikona rekviziti.

The sporočilo prop določa vsebino besedila zdravice, medtem ko namen prop določa vrsto zdravice. Slog toasta se razlikuje glede na njegovo vrednost.

Kako dolgo je prikazano obvestilo o zdravici, lahko nadzirate z uporabo odmor prop. The ikona prop določa element ikone za prikaz v zdravici. z isCloseButtonShown prop, lahko nadzirate, ali se gumb za zapiranje prikaže v zdravici.

Zgornji blok kode bo ustvaril čudovito zdravico, ko kliknete na gumb, kot je prikazano na spodnji sliki.

Če želite v svoji aplikaciji React ustvariti privlačna obvestila o zdravici, je uporabniški vmesnik Blueprint odlična možnost. Ponuja široko paleto vnaprej določenih komponent, ki jih lahko uporabite za ustvarjanje obvestil, ki ustrezajo slogu vaše aplikacije.

Če pa delate na majhnem projektu, ki ne zahteva vseh funkcij uporabniškega vmesnika Blueprint, React Toastify je lahka alternativa ustvarjanju čudovitih obvestil.

Izboljšanje uporabniške izkušnje z zdravicami, popoverji in opozorili

Naučili ste se ustvariti pojavna sporočila, opozorila in zdravice v vaši aplikaciji React z uporabniškim vmesnikom Blueprint. Te komponente so bistvene za zagotavljanje informacij in povratnih informacij uporabnikom ter lahko bistveno izboljšajo uporabniško izkušnjo vaše aplikacije. Te komponente lahko enostavno ustvarite z uporabo informacij, ki ste jih pridobili z minimalnim trudom in prilagajanjem.