Vytváření vyskakovacích oken, upozornění a přípitků pomocí uživatelského rozhraní Blueprint v Reactu

Blueprint UI je populární sada nástrojů React UI, která poskytuje sadu opakovaně použitelných komponent a stylů pro vytváření moderních webových aplikací. Jednou z klíčových funkcí uživatelského rozhraní Blueprint je jeho podpora pro vytváření vyskakovacích oken, upozornění a přípitků, což jsou základní součásti pro zobrazování informací a zpětné vazby uživatelům.

Instalace uživatelského rozhraní Blueprint

Chcete-li začít s Blueprint UI, musíte jej nejprve nainstalovat. Můžete to udělat pomocí libovolného správce balíčků podle vašeho výběru.

Chcete-li jej nainstalovat pomocí npm, správce balíčků JavaScript, spusťte ve svém terminálu následující příkaz:

npm install @blueprintjs/core

Po instalaci Blueprint UI musíte importovat soubory CSS z knihovny:

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

Importováním těchto souborů budete moci integrovat styly uživatelského rozhraní Blueprint s komponentami, které nabízí uživatelské rozhraní Blueprint.

Vytváření vyskakovacích oken pomocí uživatelského rozhraní Blueprint

Popovers jsou popisky, které se zobrazí, když uživatel najede myší na prvek nebo na něj klikne. Poskytují uživateli další informace nebo možnosti.

Chcete-li vytvořit vyskakovací okna ve vaší aplikaci React pomocí uživatelského rozhraní Blueprint, musíte nainstalovat uživatelské rozhraní Blueprint Popover2 komponent.

Chcete-li to provést, spusťte ve svém terminálu následující kód:

npm install --save @blueprintjs/popover2

Nezapomeňte importovat šablonu stylů balíčku do souboru CSS:

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

Po importu šablony stylů můžete použít Popover2 komponentu k vytvoření vyskakovacích oken ve vaší aplikaci.

Například:

import Reagovat z"reagovat";
import { Knoflík } z"@blueprintjs/core";
import { Popover2 } z"@blueprintjs/popover2";
funkceAplikace() {
konst popoverContent = (



Popover Title</h3>


Toto je obsah uvnitř vyskakovacího okna.</p>
 </div>
 );
vrátit se (




"úspěch" text="Klikni na mě" />
 </Popover2>
 </div>
 );
}

vývoznívýchozí Aplikace;

Tento kód vytvoří vyskakovací okno pomocí Popover2 komponent. Definuje také a popoverContent proměnná, která obsahuje kód JSX pro obsah vyskakovacího okna.

The Popover2 složka přebírá popoverContent jako hodnotu jeho obsah podpěra. The obsah prop určuje obsah zobrazený ve vyskakovacím okně. Tady, Popover2 obaly komponent a Knoflík komponent. To způsobí, že se po klepnutí na tlačítko zobrazí vyskakovací okno.

Popover vypadá jednoduše, jak je znázorněno zde:

Obsah vyskakovacího okna můžete upravit předáním a jméno třídy podpěra k popoverContent JSX kód:

konst popoverContent = (
'druh muffinu'>
Popover Title</h3>


Toto je obsah uvnitř vyskakovacího okna.</p>
 </div>
);

Poté můžete definovat třídu CSS ve svém souboru CSS:

.druh muffinu {
vycpávka: 1rem;
barva pozadí: #e2e2e2;
rodina písem: kurzívní;
}

Nyní by vyskakovací okno mělo vypadat trochu lépe:

The Popover2 komponenta vyžaduje některé rekvizity, které vám pomohou nakonfigurovat ji tak, aby vyhovovala vašim potřebám. Některé z těchto rekvizit jsou popoverClassName, onInteraction, je otevřeno, minimální, a umístění.

The umístění prop určuje preferovanou polohu vyskakovacího okna vzhledem k cílovému prvku. Jeho dostupné hodnoty jsou:

• auto
• automatické spuštění
• automatické ukončení
• horní
• top-start
• horní konec
• dno
• spodní start
• spodní konec
• že jo
• pravý start
• pravý konec
• vlevo, odjet
• levý start
• levý konec

s popoverClassName, můžete definovat název třídy CSS pro prvek popover. Nejprve ve svém souboru CSS vytvoříte třídu CSS, abyste mohli použít prop.

Například:

.custom-popover {
barva pozadí: #e2e2e2;
box-shadow: 0 10px 15px-3 pixelyrgb(0 0 0 / 0.1);
hraniční poloměr: 12px;
vycpávka: 1rem;
}

Po vytvoření třídy CSS použijte popoverClassName prop použít vlastní styl na komponentu Popover2:

 content={popoverContent}
 umístění="spodní konec"
 popoverClassName="custom-popover"
 minimální={skutečný}
>
"úspěch" text="Klikni na mě" />
</Popover2>

The minimální prop ovládá styl vyskakovacího okna. Prop přijímá booleovskou hodnotu. Pokud je nastaveno na hodnotu true, vyskakovací okno bude mít minimální styl, žádnou šipku a jednoduchý rámeček.

Vytváření upozornění

Upozornění jsou upozornění, která se zobrazují na obrazovce a informují uživatele o důležitých informacích nebo akcích. Běžně se používají k zobrazení chybových zpráv, zpráv o úspěchu nebo varování.

Vytváření výstrah v uživatelském rozhraní Blueprint je podobné vytváření upozornění pomocí uživatelského rozhraní Chakra. Komponentu Alert použijete k vytvoření výstrahy ve vaší aplikaci React pomocí uživatelského rozhraní Blueprint.

Zde je příklad:

import Reagovat z"reagovat";
import { Upozornění, tlačítko } z"@blueprintjs/core";
funkceAplikace() {
konst [isOpen, setIsOpen] = React.useState(Nepravdivé);
konst handleOpen = () => {
 setIsOpen(skutečný);
 };
konst handleClose = () => {
 setIsOpen(Nepravdivé);
 };
vrátit se (



"Zavřít">
Toto je výstražná zpráva</p>
 </Alert>
"Klikni na mě" záměr ="úspěch" onClick={handleOpen} />
 </div>
 );
}
vývoznívýchozí Aplikace;

Tento příklad ukazuje, jak musíte importovat Upozornění komponenta z @blueprintjs/core balík. The Upozornění komponenta vykreslí na obrazovce výstražnou zprávu. Chce to také tři rekvizity: je otevřeno, onClose, a text potvrzení Button.

The je otevřeno prop určuje, zda je upozornění viditelné nebo ne. Nastavením na hodnotu true zobrazíte výstrahu a na hodnotu false ji skryjete. The onClose prop je funkce zpětného volání, která se spustí, když uživatel zavře výstrahu.

Konečně, text potvrzení Button prop určuje text zobrazený na potvrzovacím tlačítku.

Upozornění v tomto příkladu bude vypadat takto:

Vytváření toastů pomocí uživatelského rozhraní Blueprint

Toasty jsou oznámení, která se zobrazují na obrazovce a informují uživatele o důležitých informacích nebo událostech. Jsou podobné výstrahám, ale obvykle jsou méně rušivé a rychle mizí.

Chcete-li vytvořit přípitek ve vaší aplikaci React pomocí uživatelského rozhraní Blueprint, použijte OverlayToaster komponent. The OverlayToaster komponenta vytvoří instanci Toaster, která se poté použije k vytvoření jednotlivých toastů.

Například:

import Reagovat z"reagovat";
import { OverlayToaster, Button } z"@blueprintjs/core";
konst toasterInstance = OverlayToaster.create({ pozice: "vpravo nahoře" });
funkceAplikace() {
konst showToast = () => {
 toasterInstance.show({
 zpráva: "To je toast",
 úmysl: "hlavní",
 Časový limit: 3000,
 isCloseButtonShown: Nepravdivé,
 ikona: "záložka do knihy",
 });
 };
vrátit se (



"Klikni na mě" záměr ="úspěch" onClick={showToast} />
 </div>
 );
}
vývoznívýchozí Aplikace;

Výše uvedený blok kódu používá OverlayToaster.create metoda pro generování instance toasteru a specifikuje její pozici pomocí pozice podpěra.

Také definuje funkci showToast. Tato funkce využívá ukázat metoda toustovač instance pro zobrazení toastu při zavolání. The ukázat metoda bere objekt s zpráva, úmysl, Časový limit, isCloseButtonShown, a ikona rekvizity.

The zpráva prop specifikuje textový obsah přípitku, zatímco úmysl prop určuje typ toastu. Styl toastu se bude lišit v závislosti na jeho hodnotě.

Můžete ovládat, jak dlouho se bude upozornění na toast zobrazovat pomocí Časový limit podpěra. The ikona prop určuje prvek ikony, který se má zobrazit v toastu. s isCloseButtonShown prop, můžete ovládat, zda se v toastu zobrazí tlačítko pro zavření.

Blok kódu výše vygeneruje krásný toast, když kliknete na tlačítko, jak je vidět na obrázku níže.

Pokud chcete ve své aplikaci React vytvořit atraktivní upozornění na toast, Blueprint UI je skvělá volba. Poskytuje širokou škálu předdefinovaných součástí, které můžete použít k vytvoření oznámení, která odpovídají stylu vaší aplikace.

Pokud však pracujete na malém projektu, který nevyžaduje všechny funkce uživatelského rozhraní Blueprint, React Toastify je lehká alternativa k vytváření krásných oznámení.

Vylepšení uživatelské zkušenosti pomocí toastů, vyskakovacích oken a upozornění

Naučili jste se vytvářet vyskakovací okna, upozornění a toasty v aplikaci React pomocí uživatelského rozhraní Blueprint. Tyto komponenty jsou nezbytné pro poskytování informací a zpětné vazby uživatelům a mohou výrazně zlepšit uživatelský zážitek z vaší aplikace. Tyto komponenty můžete snadno vytvořit pomocí informací, které jste získali, s minimálním úsilím a přizpůsobením.