Jednoduché a čisté prvky používateľského rozhrania môžu osviežiť váš dizajn a dodať vášmu webu alebo aplikácii nádych kvality.

Blueprint UI je populárna súprava nástrojov React UI, ktorá poskytuje sadu opakovane použiteľných komponentov a štýlov na vytváranie moderných webových aplikácií. Jednou z kľúčových funkcií rozhrania Blueprint UI je jeho podpora pre vytváranie popoverov, upozornení a toastov, ktoré sú základnými komponentmi na zobrazovanie informácií a spätnej väzby používateľom.

Inštalácia používateľského rozhrania Blueprint

Ak chcete začať s používateľským rozhraním Blueprint, musíte si ho najskôr nainštalovať. Môžete to urobiť pomocou ľubovoľného správcu balíkov podľa vášho výberu.

Ak ho chcete nainštalovať pomocou npm, správca balíkov JavaScript, spustite nasledujúci príkaz vo svojom termináli:

npm install @blueprintjs/core

Po nainštalovaní používateľského rozhrania Blueprint musíte importovať súbory CSS z knižnice:

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

Importovaním týchto súborov budete môcť integrovať štýly používateľského rozhrania Blueprint s komponentmi, ktoré ponúka používateľské rozhranie Blueprint.

Vytváranie popoverov pomocou používateľského rozhrania Blueprint

Popovers sú popisky, ktoré sa zobrazia, keď používateľ umiestni kurzor myši na prvok alebo naň klikne. Poskytujú používateľovi ďalšie informácie alebo možnosti.

Ak chcete vytvoriť kontextové okná vo svojej aplikácii React pomocou používateľského rozhrania Blueprint, musíte si nainštalovať používateľské rozhranie Blueprint Popover2 komponent.

Ak to chcete urobiť, spustite vo svojom termináli nasledujúci kód:

npm install --save @blueprintjs/popover2

Nezabudnite importovať šablónu so štýlmi balíka do súboru CSS:

@importovať"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Po importovaní šablóny so štýlmi môžete použiť Popover2 na vytváranie kontextových okien vo vašej aplikácii.

Napríklad:

importovať Reagovať od"reagovať";
importovať { Tlačidlo } od"@blueprintjs/core";
importovať { Popover2 } od"@blueprintjs/popover2";
funkciuApp() {
konšt popoverContent = (




Popover Title</h3>




Toto je obsah vo vnútri kontextového okna.</p>
 </div>
 );


vrátiť (









exportpredvolená App;

Tento kód vytvorí kontextové okno pomocou Popover2 komponent. Definuje tiež a popoverContent premenná, ktorá obsahuje kód JSX pre obsah kontextového okna.

The Popover2 komponent preberá popoverContent ako hodnotu jeho obsahu rekvizita. The obsahu prop určuje obsah zobrazený v kontextovom okne. Tu, Popover2 zábaly komponentov a Tlačidlo komponent. To spôsobí, že sa po kliknutí na tlačidlo zobrazí kontextové okno.

Vyskakovacie okno vyzerá jednoducho, ako je znázornené tu:

Obsah kontextového okna môžete upraviť zadaním a className podpera k popoverContent JSX kód:

konšt popoverContent = (
'popover'>
Popover Title</h3>




Toto je obsah vo vnútri kontextového okna.</p>
 </div>
);

Potom môžete definovať triedu CSS vo svojom súbore CSS:

.popoover {
vypchávka: 1rem;
farba pozadia: #e2e2e2;
font-family: kurzíva;
}

Teraz by vyskakovacie okno malo vyzerať o niečo lepšie:

The Popover2 komponent má niekoľko rekvizít, ktoré vám pomôžu nakonfigurovať ho tak, aby vyhovoval vašim potrebám. Niektoré z týchto rekvizít sú popoverClassName, onInteraction, je otvorené, minimálne, a umiestnenie.

The umiestnenie prop určuje preferovanú polohu popoveru vzhľadom na cieľový prvok. Jeho dostupné hodnoty sú:

  • auto
  • automatický štart
  • automatické ukončenie
  • top
  • špičkový štart
  • top-end
  • dno
  • spodný štart
  • spodný koniec
  • správny
  • správny štart
  • pravý koniec
  • vľavo
  • ľavý štart
  • ľavý koniec

S popoverClassName, môžete definovať názov triedy CSS pre prvok popover. Najprv vytvoríte triedu CSS vo svojom súbore CSS, aby ste mohli použiť rekvizitu.

Napríklad:

.custom-popover {
farba pozadia: #e2e2e2;
box-shadow: 0 10px 15px-3 pixelyrgb(0 0 0 / 0.1);
hraničný polomer: 12px;
vypchávka: 1rem;
}

Po vytvorení triedy CSS použite popoverClassName prop použiť vlastný štýl na komponent Popover2:

 content={popoverContent}
 umiestnenie="spodný koniec"
 popoverClassName="custom-popover"
 minimum={pravda}
>

The minimálne prop ovláda štýl popoveru. Prop akceptuje boolovskú hodnotu. Ak je nastavené na hodnotu true, vyskakovacie okno bude mať minimálny štýl, žiadnu šípku a jednoduchý vzhľad poľa.

Vytváranie upozornení

Upozornenia sú upozornenia, ktoré sa zobrazujú na obrazovke a informujú používateľa o dôležitých informáciách alebo akciách. Bežne sa používajú na zobrazenie chybových správ, správ o úspechu alebo varovaní.

Vytváranie upozornení v používateľskom rozhraní Blueprint je podobné ako vytváranie upozornení pomocou používateľského rozhrania Chakra. Komponent Alert použijete na vytvorenie upozornenia vo vašej aplikácii React pomocou používateľského rozhrania Blueprint.

Tu je príklad:

importovať Reagovať od"reagovať";
importovať { Upozornenie, tlačidlo } od"@blueprintjs/core";
funkciuApp() {
konšt [isOpen, setIsOpen] = React.useState(falošný);


konšt handleOpen = () => {
 setIsOpen(pravda);
 };


konšt handleClose = () => {
 setIsOpen(falošný);
 };


vrátiť (




"Zavrieť">
Toto je výstražná správa</p>
 </Alert>




exportpredvolená App;

Tento príklad ukazuje, ako musíte importovať súbor Upozornenie komponent z @blueprintjs/core balík. The Upozornenie komponent vykreslí na obrazovke výstražnú správu. Chce to tiež tri rekvizity: je otvorené, onClose, a text potvrdiť Button.

The je otvorené prop určuje, či je upozornenie viditeľné alebo nie. Ak chcete upozornenie zobraziť, nastavte ho na hodnotu true a na skrytie ho nastavte na hodnotu false. The onClose prop je funkcia spätného volania, ktorá sa spustí, keď používateľ zatvorí upozornenie.

Nakoniec, text potvrdiť Button prop určuje text zobrazený na potvrdzovacom tlačidle.

Výstražné upozornenie v tomto príklade bude vyzerať takto:

Vytváranie toastov pomocou používateľského rozhrania Blueprint

Toasty sú upozornenia, ktoré sa zobrazujú na obrazovke a informujú používateľa o dôležitých informáciách alebo udalostiach. Sú podobné upozorneniam, ale zvyčajne sú menej rušivé a rýchlo miznú.

Ak chcete vytvoriť toast v aplikácii React pomocou používateľského rozhrania Blueprint, použite OverlayToaster komponent. The OverlayToaster komponent vytvorí inštanciu Toaster, ktorá sa potom použije na vytvorenie jednotlivých toastov.

Napríklad:

importovať Reagovať od"reagovať";
importovať { OverlayToaster, Button } od"@blueprintjs/core";
konšt toasterInstance = OverlayToaster.create({ pozíciu: "hore vpravo" });


funkciuApp() {
konšt showToast = () => {
 toasterInstance.show({
 správa: "Toto je toast",
 zámer: "primárny",
 čas vypršal: 3000,
 isCloseButtonShown: falošný,
 ikona: "záložka",
 });
 };


vrátiť (






exportpredvolená App;

Vyššie uvedený blok kódu používa OverlayToaster.create metóda na vygenerovanie inštancie hriankovača a špecifikuje jej polohu pomocou pozíciu rekvizita.

Definuje aj funkciu showToast. Táto funkcia využíva šou metóda hriankovačInstance na zobrazenie toastu pri volaní. The šou metóda berie objekt s správu, zámer, čas vypršal, isCloseButtonShown, a ikonu rekvizity.

The správu prop špecifikuje textový obsah prípitku, pričom zámer prop určuje typ toastu. Štýl toastu sa bude líšiť v závislosti od jeho hodnoty.

Môžete ovládať, ako dlho sa bude upozornenie na toasty zobrazovať pomocou čas vypršal rekvizita. The ikonu prop určuje prvok ikony, ktorý sa má zobraziť v prípitku. S isCloseButtonShown rekvizity, môžete ovládať, či sa v toaste zobrazí tlačidlo zatvorenia.

Blok kódu vyššie vygeneruje krásny toast, keď kliknete na tlačidlo, ako je vidieť na obrázku nižšie.

Ak chcete vo svojej aplikácii React vytvoriť atraktívne upozornenia na toast, Blueprint UI je skvelá voľba. Poskytuje širokú škálu preddefinovaných komponentov, ktoré môžete použiť na vytváranie upozornení, ktoré zodpovedajú štýlu vašej aplikácie.

Ak však pracujete na malom projekte, ktorý nevyžaduje všetky funkcie používateľského rozhrania Blueprint, React Toastify je ľahká alternatíva k vytváraniu krásnych upozornení.

Zlepšenie používateľského zážitku pomocou toastov, popoverov a upozornení

Naučili ste sa vytvárať kontextové okná, upozornenia a toasty v aplikácii React pomocou používateľského rozhrania Blueprint. Tieto komponenty sú nevyhnutné na poskytovanie informácií a spätnej väzby používateľom a môžu výrazne zlepšiť používateľský zážitok z vašej aplikácie. Tieto komponenty môžete ľahko vytvoriť pomocou informácií, ktoré ste získali, s minimálnym úsilím a prispôsobením.