Nem kell harmadik féltől származó csomagra hagyatkoznia az értesítési összetevő létrehozásához. Így építheti meg saját maga.
Számos harmadik féltől származó csomag elérhető a Reactban, amelyek segíthetnek értesítési összetevő létrehozásában. Ha azonban csak egy egyszerű értesítési összetevőt szeretne, érdemes lehet sajátot létrehoznia, hogy elkerülje az alkalmazás szükségtelen függőségeinek hozzáadását.
A projekt beállítása
Fogsz használja a Vite-et a React alkalmazás beállításához. A Vite egy olyan építőeszköz, amely lehetővé teszi egy React projekt gyors állványozását.
A kezdéshez használja a fonalcsomagkezelőt egy új Vite-projekt létrehozásához az alábbi parancs futtatásával.
fonal létre vite
A parancs kérni fogja a projekt nevének megadását. Írja be a projekt nevét, és nyomja meg az Enter billentyűt. Ezután kérni fogja a keret kiválasztását. Választ reagál és nyomja meg az Entert. Végül megkéri, hogy válasszon egy változatot, válasszon JavaScript majd nyomja meg az Entert.
Az oktatóprogram a következő konfigurációkat fogja használni:
Miután a Vite létrehozta a projektet, keresse meg a projekt mappát, és nyissa meg egy kódszerkesztővel.
Ezután elindíthatja a fejlesztőkiszolgálót a következő parancs futtatásával.
fonal dev
Ezzel megnyílik az új React alkalmazás az alapértelmezett böngészőben a következő címen: http://localhost: 5173/.
Az értesítési komponens tervezése
Rugalmas értesítési összetevő létrehozásához képesnek kell lennie különféle típusú értesítések kezelésére, eltérő címekkel, leírásokkal és stílusokkal. Például figyelmeztetést, siker- és hibaértesítést kell megjelenítenie.
Íme a különböző változatok, amelyeket az értesítési összetevőnek képesnek kell lennie megjeleníteni.
Ezt úgy érheti el, hogy kellékeket ad át annak az összetevőnek, amely meghatározza a megjelenítendő értesítés típusát, a címet és a leírás szövegét. Ezen kellékek használatával személyre szabhatja az összetevőt, és minimális erőfeszítéssel újra felhasználhatja az alkalmazás során. Ha frissítőre van szüksége a kellékekkel kapcsolatban, itt van egy cikk, amely elmagyarázza hogyan kell használni a kellékeket a Reactban.
Az értesítési komponens létrehozása
Ban,-ben src mappát, hozzon létre egy új nevű fájlt Notification.jsx és adja hozzá a következő kódot.
exportalapértelmezettfunkcióÉrtesítés({típus, cím, leírás}) {
Visszatérés (
{/* Értesítés tartalma */}
</div>
)
}
Ez a kód létrehoz egy funkcionális komponenst, az úgynevezett Értesítés három kellékkel: típus, cím, és leírás. Ezekkel a kellékekkel testreszabhatja az értesítés stílusát és tartalmát.
A tervezésből a komponensnek van néhány ikonja, nevezetesen információ, és egy kereszt ikon. tudsz ingyenesen használható ikonok letöltése vagy használjon ikon komponenst egy csomagból, mint pl reagál-ikonok. Ez az oktatóanyag használni fogja reagál-ikonok ezért telepítse az alábbi parancs futtatásával.
fonal add reakcióikonok
Ezután importálja az ikonokat a tetején Értesítés összetevő.
import { RxCross2, RxInfoCircled } tól től"react-icons/rx"
Most módosíthatja az összetevőt úgy, hogy az ikonokat, a címet és a leírási javaslat értékeit használja az értesítés tartalmának létrehozásához.
exportalapértelmezettfunkcióÉrtesítés({típus, cím, leírás}) {
Visszatérés (
{title}</div>
{leírás}/div>
</div>
</div>
</div>
)
}
A következő lépés a stílus kialakítása az átadott típustól függően.
Az egyik lehetséges megoldás az, hogy CSS-osztályokat határoz meg minden egyes megjeleníteni kívánt értesítéstípushoz. Ezután feltételesen alkalmazhatja a megfelelő osztályt az átadott típus alapján.
Kezdésként hozzon létre egy új fájlt, melynek neve értesítés.css és importálja be Notification.jsx a következő kód hozzáadásával a tetejére.
import "./notification.css"
Aztán be értesítés.css határozza meg az értesítési összetevő alapstílusait:
.értesítés {
kijelző: Flex;
flex-irány: sor;
align-ites: flex-start;
párnázás: 8px;
}
.notification__left {
kijelző: Flex;
flex-irány: sor;
párnázás: 0px;
rés: 8px;
margó-jobb: 24px;
}
.notification__content {
kijelző: Flex;
flex-irány: oszlop;
align-ites: flex-start;
párnázás: 0px;
}
.notification__title {
betűtípus család: "Inter";
betű stílus: Normál;
font-weight: 500;
betűméret: 14px;
}
.notification__description {
betűtípus család: "Inter";
betű stílus: Normál;
font-weight: 400;
betűméret: 12px;
párnázás: 0;
}
Ezután meghatározhatja a különböző értesítési típusokhoz tartozó stílusokat, ha hozzáadja a következő kódot a CSS-fájlhoz.
.notification__siker {
háttér: #f6fef9;
határ: 1pxszilárd#2f9461;
határ-sugár: 8px;
}
.notification__error {
háttér: #fffbfa;
határ: 1pxszilárd#cd3636;
határ-sugár: 8px;
}
.notification__warning {
háttér: #fffcf5;
határ: 1pxszilárd#c8811a;
határ-sugár: 8px;
}
A fenti kód stílusa az értesítési tárolónak az átadott típus alapján.
A cím testreszabásához használja a következő stílusokat.
.notification__title__success {
szín: #2f9461;
}
.notification__title__warning {
szín: #c8811a;
}
.notification__title__error {
szín: #cd3636;
}
Az egyéni leírás szövegéhez használja ezeket a stílusokat.
.notification__description__siker {
szín: #53b483;
}
.notification__description__warning {
szín: #e9a23b;
}
.notification__description__error {
szín: #f34141;
}
Az ikonokhoz pedig használja a következő osztályokat.
.notification_icon_error {
szín: #cd3636;
}
.notification__icon__success {
szín: #2f9461;
}
.notification__icon__warning {
szín: #c8811a;
}
Aztán a Értesítés komponens, feltételesen alkalmazhatja a megfelelő osztályt a alapján típus kellék, így:
exportalapértelmezettfunkcióÉrtesítés({típus, cím, leírás}) {
Visszatérés (
`értesítési értesítés__${type}`}>
`értesítés__left`}>
`notification__icon__${type}`}/>
"értesítés__tartalom">
`notification__title notification__title__${type}`}>{title}</div>
`értesítés__leírás értesítés__leírás__${type}`}>{leírás}/div>
</div>
</div>
`notification__icon__${type}`}/>
</div>
)
}
Ebben a komponensben dinamikusan állítja be az osztályt a típustól függően, mint pl értesítés__siker vagy értesítés__hiba.
Ennek működéséhez importálja az Értesítés összetevőt App.jsx és használja az alábbiak szerint:
import Értesítés tól től'./Értesítés'funkcióApp() {
Visszatérés (
<>
típus="siker"
cím="Feladat elvégezve"
leírás=– A feladatod sikeresen befejeződött.
/>
</>
)
}
exportalapértelmezett App
Most átadhat egy másik típust a Értesítés összetevőt, és az üzenetnek megfelelő értesítést jelenít meg.
Ez elengedhetetlen a jó felhasználói élményhez, mivel a felhasználók különböző színeket és stílusokat társítottak a különböző forgatókönyvekhez, és fontos, hogy ezeket a társításokat következetesen használják. Például zavaró lenne egy piros értesítési mezőben tudatni a felhasználóval, hogy sikeresen feltöltött egy fényképet. Azt gondolhatják, hogy a feltöltés sikertelen volt, még akkor is, ha sikeres volt.
Interaktivitás hozzáadása az értesítési komponenshez
Megtanulta, hogyan használhat kellékeket testreszabható értesítési összetevők létrehozásához. Ha még tovább szeretné vinni, átmeneteket adhat hozzá ehhez az összetevőhöz, hogy vonzóbbá tegye. CSS-animációkkal például a képernyőre csúsztathatja az értesítési összetevőt, majd egy bizonyos idő elteltével kicsúsztathatja.
