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.
Table of Contents
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í Blueprint UI, musíte nainstalovat komponentu Blueprint UI Popover2.
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 komponentu Popover2 k vytvoření vyskakovacích oken ve vaší aplikaci.
Například:
import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";function App() {
const popoverContent = (
<div>
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);return (
<div>
<Popover2 content={popoverContent}>
<Button intent="success" text="Click Me" />
</Popover2>
</div>
);
}export default App;
Tento kód vytvoří popover pomocí komponenty Popover2. Definuje také proměnnou popoverContent, která obsahuje kód JSX pro obsah popover.
Komponenta Popover2 bere popoverContent jako hodnotu svého obsahu. Prop obsahu určuje obsah zobrazený ve vyskakovacím okně. Zde komponenta Popover2 obaluje komponentu Button. 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 tak, že předáte rekvizitu className do kódu popoverContent JSX:
const popoverContent = (
<div className="popover">
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);
Poté můžete definovat třídu CSS ve svém souboru CSS:
.popover {
padding: 1rem;
background-color: #e2e2e2;
font-family: cursive;
}
Nyní by vyskakovací okno mělo vypadat trochu lépe:
Komponenta Popover2 má několik rekvizit, které vám pomohou nakonfigurovat ji tak, aby vyhovovala vašim potřebám. Některé z těchto rekvizit jsou popoverClassName, onInteraction, isOpen, minimal a placement.
Umístění podpěry 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
Pomocí 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 {
background-color: #e2e2e2;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
border-radius: 12px;
padding: 1rem;
}
Po vytvoření třídy CSS použijte propoverClassName k použití vlastního stylu na komponentu Popover2:
<Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Click Me" />
</Popover2>
Minimální podpěra ovládá styl popoveru. 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í upozornění 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 React from "react";
import { Alert, Button } from "@blueprintjs/core";function App() {
const [isOpen, setIsOpen] = React.useState(false);const handleOpen = () => {
setIsOpen(true);
};const handleClose = () => {
setIsOpen(false);
};return (
<div>
<Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="Close">
<p>This is an alert message</p>
</Alert><Button text="Click Me" intent="success" onClick={handleOpen} />
</div>
);
}export default App;
Tento příklad ukazuje, jak musíte importovat komponentu Alert z balíčku @blueprintjs/core. Komponenta Alert vykreslí na obrazovce výstražnou zprávu. To také vyžaduje tři rekvizity: isOpen, onClose a potvrzeníButtonText.
Prop isOpen určuje, zda je výstraha viditelná nebo ne. Nastavením na hodnotu true zobrazíte výstrahu a na hodnotu false ji skryjete. Prop onClose je funkce zpětného volání, která se spustí, když uživatel zavře výstrahu.
A konečně, podložka potvrzeníButtonText 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 toast v aplikaci React pomocí uživatelského rozhraní Blueprint, použijte komponentu OverlayToaster. Komponenta OverlayToaster vytvoří instanci Toaster, která se poté použije k vytvoření jednotlivých toustů.
Například:
import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";const toasterInstance = OverlayToaster.create({ position: "top-right" });
function App() {
const showToast = () => {
toasterInstance.show({
message: "This is a toast",
intent: "primary",
timeout: 3000,
isCloseButtonShown: false,
icon: "bookmark",
});
};return (
<div>
<Button text="Click Me" intent="success" onClick={showToast} />
</div>
);
}export default App;
Blok kódu výše používá ke generování instance toasteru metodu OverlayToaster.create a určuje její polohu pomocí prop pro pozici.
Definuje také funkci showToast. Tato funkce používá metodu show toasterInstance k zobrazení toastu při volání. Metoda show vezme objekt se zprávou, záměrem, časovým limitem, isCloseButtonShown a ikonami.
Prop zprávy specifikuje textový obsah toastu, zatímco intent prop specifikuje typ toastu. Styl toastu se bude lišit v závislosti na jeho hodnotě.
Můžete ovládat, jak dlouho se bude oznámení o toastu zobrazovat pomocí časového limitu. Ikona prop určuje prvek ikony, který se má zobrazit v toastu. Pomocí rekvizity isCloseButtonShown 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 odlehčenou alternativou 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.