Előugró ablakok, figyelmeztetések és pirítósok létrehozása Blueprint felhasználói felülettel a Reactban

A Blueprint UI egy népszerű React UI eszközkészlet, amely újrafelhasználható összetevőket és stílusokat biztosít modern webalkalmazások készítéséhez. A Blueprint UI egyik legfontosabb jellemzője, hogy támogatja az előugró ablakok, riasztások és pohárköszöntők létrehozását, amelyek elengedhetetlenek az információk és visszajelzések megjelenítéséhez a felhasználók számára.

Blueprint UI telepítése

A Blueprint UI használatának megkezdéséhez először telepítenie kell. Ezt bármelyik csomagkezelővel megteheti.

A telepítéshez a segítségével npm, a JavaScript csomagkezelő, futtassa a következő parancsot a terminálon:

npm install @blueprintjs/core

A Blueprint UI telepítése után importálnia kell a CSS fájlokat a könyvtárból:

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

A fájlok importálásával integrálhatja a Blueprint UI stílusait a Blueprint UI által kínált összetevőkkel.

Előugró ablakok létrehozása Blueprint UI használatával

A felugró ablakok olyan eszköztippek, amelyek akkor jelennek meg, amikor a felhasználó rámutat egy elemre, vagy rákattint. További információkat vagy lehetőségeket biztosítanak a felhasználó számára.

Ha előugró ablakokat szeretne létrehozni a React alkalmazásban a Blueprint UI használatával, telepítenie kell a Blueprint UI-t Popover2 összetevő.

Ehhez futtassa a következő kódot a terminálon:

npm install --save @blueprintjs/popover2

Ügyeljen arra, hogy importálja a csomagstíluslapot a CSS-fájlba:

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

A stíluslap importálása után használhatja a Popover2 összetevőt, amellyel felugró ablakokat hozhat létre az alkalmazásban.

Például:

import Reagál tól től"reagál";
import { Button } tól től"@blueprintjs/core";
import { Popover2 } tól től"@blueprintjs/popover2";
funkcióApp() {
const popoverContent = (



Popover Cím</h3>


Ez a tartalom a popoveren belül.</p>
 </div>
 );
Visszatérés (




"siker" szöveg="Kattints ide" />
 </Popover2>
 </div>
 );
}

exportalapértelmezett App;

Ez a kód előugró ablakot hoz létre a Popover2 összetevő. Meghatározza továbbá a popoverContent változó, amely tartalmazza a popover tartalom JSX kódját.

A Popover2 komponens veszi a popoverContent mint annak értéke tartalom támaszt. A tartalom prop meghatározza a felugró ablakban megjelenített tartalmat. Itt, a Popover2 alkatrészcsomagolások a Gomb összetevő. Ennek hatására megjelenik a felugró ablak, amikor rákattint a gombra.

A popover egyszerűnek tűnik, amint az itt látható:

A felbukkanó tartalom stílusát az a átadásával módosíthatja osztály név támasz a popoverContent JSX kód:

const popoverContent = (
"popover">
Popover Cím</h3>


Ez a tartalom a popoveren belül.</p>
 </div>
);

Ezután meghatározhatja a CSS-osztályt a CSS-fájlban:

.popover {
párnázás: 1rem;
háttérszín: #e2e2e2;
betűtípus család: kurzív;
}

Most a popovernek kicsit jobban kell kinéznie:

A Popover2 komponenshez néhány kellék szükséges, amelyek segítenek az Ön igényeinek megfelelően konfigurálni. Néhány ilyen kellék popoverClassName, onInteraction, nyitva van, minimális, és elhelyezés.

A elhelyezés prop meghatározza a popover preferált helyzetét a célelemhez képest. Elérhető értékei a következők:

• auto
• Automatikus indítás
• automatikus vég
• tetejére
• top-rajt
• felső határ
• alsó
• alsó indítás
• alsó vég
• jobb
• jobb indítás
• jobb vég
• bal
• bal indítás
• bal vég

A... val popoverClassName, megadhat egy CSS-osztálynevet a popover elemhez. A prop használatához először létre kell hoznia egy CSS-osztályt a CSS-fájlban.

Például:

.custom-popover {
háttérszín: #e2e2e2;
doboz-árnyék: 0 10px 15px-3 képpontrgb(0 0 0 / 0.1);
határ-sugár: 12px;
párnázás: 1rem;
}

A CSS osztály létrehozása után használja a popoverClassName javaslat az egyéni stílus alkalmazásához a Popover2 komponensre:

 content={popoverContent}
 elhelyezés="alsó vég"
 popoverClassName="egyedi popover"
 minimális={igaz}
>
"siker" szöveg="Kattints ide" />
</Popover2>

A minimális prop szabályozza a popover stílusát. A kellék logikai értéket fogad el. Ha igazra van állítva, az előugró ablak stílusa minimális, nincs nyíl, és egyszerű doboz megjelenésű lesz.

Figyelmeztetések létrehozása

A riasztások a képernyőn megjelenő értesítések, amelyek fontos információkról vagy műveletekről tájékoztatják a felhasználót. Általában hibaüzenetek, sikerüzenetek vagy figyelmeztetések megjelenítésére használják.

A riasztások létrehozása a Blueprint UI-ban hasonló a következőhöz: riasztások létrehozása a Chakra UI használatával. Az Alert összetevővel riasztást hozhat létre a React alkalmazásban a Blueprint UI használatával.

Íme egy példa:

import Reagál tól től"reagál";
import { Figyelmeztető gomb } tól től"@blueprintjs/core";
funkcióApp() {
const [isOpen, setIsOpen] = React.useState(hamis);
const HandOpen = () => {
 setIsOpen(igaz);
 };
const handleClose = () => {
 setIsOpen(hamis);
 };
Visszatérés (



"Bezárás">
Ez egy figyelmeztető üzenet</p>
 </Alert>
"Kattints ide" szándék ="siker" onClick={handleOpen} />
 </div>
 );
}
exportalapértelmezett App;

Ez a példa bemutatja, hogyan kell importálni a Éber komponens a @blueprintjs/core csomag. A Éber összetevő figyelmeztető üzenetet jelenít meg a képernyőn. Három kellék is kell hozzá: nyitva van, onClose, és megerősítésButtonText.

A nyitva van prop meghatározza, hogy a riasztás látható-e vagy sem. Állítsa igazra a figyelmeztetés megjelenítéséhez, hamis értékre pedig elrejtéséhez. A onClose A prop egy visszahívási funkció, amely akkor fut le, amikor a felhasználó bezárja a riasztást.

Végül a megerősítésButtonText prop meghatározza a megerősítő gombon megjelenő szöveget.

A példában szereplő riasztási értesítés így fog kinézni:

Pirítósok létrehozása Blueprint UI segítségével

A pirítósok a képernyőn megjelenő értesítések, amelyek fontos információkról vagy eseményekről tájékoztatják a felhasználót. Hasonlóak a riasztásokhoz, de jellemzően kevésbé tolakodóak és gyorsan eltűnnek.

Ha a Blueprint UI használatával szeretne pirítóst létrehozni a React alkalmazásban, használja a OverlayKenyérpirító összetevő. A OverlayKenyérpirító összetevő létrehoz egy Toaster példányt, amelyet azután egyedi pirítósok létrehozására használ fel.

Például:

import Reagál tól től"reagál";
import { OverlayToaster, Button } tól től"@blueprintjs/core";
const toasterInstance = OverlayToaster.create({ pozíció: "jobb felső" });
funkcióApp() {
const showToast = () => {
 toasterInstance.show({
 üzenet: "Ez egy pirítós",
 elszánt: "elsődleges",
 időtúllépés: 3000,
 isCloseButtonShown: hamis,
 ikon: "könyvjelző",
 });
 };
Visszatérés (



"Kattints ide" szándék ="siker" onClick={showToast} />
 </div>
 );
}
exportalapértelmezett App;

A fenti kódblokk a OverlayToaster.create módszerrel hozza létre a kenyérpirító példányt, és a segítségével határozza meg a pozícióját pozíció támaszt.

A funkciót is meghatározza showToast. Ez a funkció a előadás módszere a kenyérpirítóInstance hogy híváskor megjelenítse a pirítóst. A előadás metódus egy objektumot vesz fel a üzenet, elszánt, időtúllépés, isCloseButtonShown, és ikon kellékek.

A üzenet prop megadja a pirítós szöveges tartalmát, míg a elszánt A prop meghatározza a pirítós típusát. A pirítós stílusa az értékétől függően változhat.

A gombbal szabályozhatja, hogy mennyi ideig jelenjen meg a pirítósról szóló értesítés időtúllépés támaszt. A ikon A prop meghatároz egy ikonelemet, amely megjelenik a pirítósban. A... val isCloseButtonShown prop, szabályozhatja, hogy a bezárás gomb megjelenjen-e a pirítósban.

A fenti kódblokk gyönyörű pirítóst generál, ha rákattint a gombra, amint az az alábbi képen látható.

Ha vonzó pirítós értesítéseket szeretne létrehozni a React alkalmazásban, a Blueprint UI nagyszerű lehetőség. Előre meghatározott összetevők széles skáláját kínálja, amelyek segítségével az alkalmazás stílusának megfelelő értesítéseket hozhat létre.

Ha azonban egy kis projekten dolgozik, amely nem igényli a Blueprint UI összes funkcióját, A React Toastify egy könnyű alternatíva a gyönyörű értesítések létrehozására.

A felhasználói élmény fokozása pirítósokkal, felugró ablakokkal és figyelmeztetésekkel

Megtanulta, hogyan hozhat létre előugró ablakokat, figyelmeztetéseket és pohárköszöntőket a React alkalmazásban a Blueprint UI használatával. Ezek az összetevők elengedhetetlenek a felhasználók tájékoztatásához és visszajelzéséhez, és jelentősen javíthatják az alkalmazás felhasználói élményét. Könnyedén létrehozhatja ezeket az összetevőket a megszerzett információk segítségével, minimális erőfeszítéssel és testreszabással.