Za ustvarjanje komponente obvestila se vam ni treba zanašati na paket tretje osebe. Evo, kako ga lahko zgradite sami.
V Reactu je na voljo več paketov tretjih oseb, ki vam lahko pomagajo ustvariti komponento obvestil. Če pa želite le preprosto komponento za obvestila, boste morda želeli ustvariti svojo lastno, da se izognete dodajanju nepotrebnih odvisnosti svoji aplikaciji.
Nastavitev projekta
Ti boš uporabite Vite za nastavitev aplikacije React. Vite je orodje za gradnjo, ki vam omogoča hitro gradnjo projekta React.
Za začetek uporabite upravitelja paketov preje, da ustvarite nov projekt Vite, tako da zaženete spodnji ukaz.
preje ustvariti vite
Ukaz vas bo pozval, da vnesete ime projekta. Vnesite ime projekta in pritisnite Enter. Nato vas bo pozval, da izberete okvir. Izberite reagirati in pritisnite Enter. Na koncu vas bo prosil, da izberete različico, izberite JavaScript in nato pritisnite Enter.
Tu so konfiguracije, ki jih bo uporabljala ta vadnica:
Ko Vite ustvari projekt, se pomaknite do mape projekta in jo odprite z urejevalnikom kode.
Nato lahko zaženete razvojni strežnik tako, da zaženete naslednji ukaz.
preja dev
To bo odprlo vašo novo aplikacijo React v vašem privzetem brskalniku na http://localhost: 5173/.
Oblikovanje obvestilne komponente
Če želite ustvariti prilagodljivo komponento obvestil, mora biti sposobna obravnavati različne vrste obvestil z različnimi naslovi, opisi in slogi. Na primer, prikazati mora opozorilo, obvestilo o uspehu in napaki.
Tukaj so različne različice, ki bi jih morala biti sposobna upodobiti komponenta obvestil.
To lahko dosežete s posredovanjem rekvizitov komponenti, ki določa vrsto obvestila za upodabljanje, naslov in opisno besedilo. Z uporabo teh rekvizitov lahko prilagodite komponento in jo znova uporabite v svoji aplikaciji z minimalnim naporom. Če potrebujete osvežitev o rekvizitih, je tukaj članek, ki pojasnjuje kako uporabljati rekvizite v Reactu.
Ustvarjanje komponente obvestila
V src ustvarite novo datoteko z imenom Notification.jsx in dodajte naslednjo kodo.
izvozprivzetofunkcijoObvestilo({vrsta, naslov, opis}) {
vrnitev (
{/* Vsebina obvestila */}
</div>
)
}
Ta koda ustvari funkcionalno komponento, imenovano Obvestilo s tremi rekviziti: vrsta, naslov, in opis. S temi pripomočki boste prilagodili slog in vsebino obvestila.
Glede na zasnovo ima komponenta nekaj ikon, in sicer informacije in ikono križa. Ti lahko prenesite brezplačne ikone ali uporabite komponento ikone iz paketa, kot je npr odzivne ikone. Ta vadnica bo uporabila odzivne ikone zato ga namestite tako, da zaženete spodnji ukaz.
yarn add reakcijske ikone
Nato uvozite ikone na vrhu Obvestilo komponento.
uvoz {RxCross2, RxInfoCircled} od"react-icons/rx"
Zdaj lahko komponento spremenite tako, da bo uporabila ikone, naslov in vrednosti opisa za ustvarjanje vsebine obvestila.
izvozprivzetofunkcijoObvestilo({vrsta, naslov, opis}) {
vrnitev (
{title}</div>
{opis}</div>
</div>
</div>
</div>
)
}
Naslednji korak je oblikovanje glede na posredovano vrsto.
Eden od pristopov, ki ga lahko uporabite, je definiranje razredov CSS za vsako vrsto obvestila, ki ga želite prikazati. Nato lahko pogojno uporabite ustrezen razred glede na vrsto, ki je posredovana.
Za začetek ustvarite novo datoteko z imenom obvestilo.css in ga uvozite Notification.jsx tako da na vrh dodate naslednjo kodo.
uvoz "./notification.css"
Nato noter obvestilo.css definirajte osnovne sloge za komponento obvestila:
.obvestilo {
zaslon: flex;
flex-direction: vrstica;
align-items: flex-start;
oblazinjenje: 8px;
}
.obvestilo__levo {
zaslon: flex;
flex-direction: vrstica;
oblazinjenje: 0px;
vrzel: 8px;
margin-desno: 24px;
}
.notification__content {
zaslon: flex;
flex-direction: stolpec;
align-items: flex-start;
oblazinjenje: 0px;
}
.notification__title {
družina pisav: "Inter";
slog pisave: normalno;
teža pisave: 500;
velikost pisave: 14px;
}
.obvestilo__opis {
družina pisav: "Inter";
slog pisave: normalno;
teža pisave: 400;
velikost pisave: 12px;
oblazinjenje: 0;
}
Nato lahko definirate sloge za različne vrste obvestil tako, da v datoteko CSS dodate naslednjo kodo.
.notification__success {
ozadje: #f6fef9;
meja: 1pxtrdna#2f9461;
mejni polmer: 8px;
}
.notification__error {
ozadje: #fffbfa;
meja: 1pxtrdna#cd3636;
mejni polmer: 8px;
}
.notification__warning {
ozadje: #fffcf5;
meja: 1pxtrdna#c8811a;
mejni polmer: 8px;
}
Zgornja koda oblikuje vsebnik obvestil glede na posredovano vrsto.
Če želite prilagoditi naslov, uporabite naslednje sloge.
.notification__title__success {
barva: #2f9461;
}
.notification__title__warning {
barva: #c8811a;
}
.notification__title__error {
barva: #cd3636;
}
Za besedilo opisa po meri uporabite te sloge.
.obvestilo__opis__uspeh {
barva: #53b483;
}
.notification__description__warning {
barva: #e9a23b;
}
.notification__description__error {
barva: #f34141;
}
Za ikone pa uporabite naslednje razrede.
.notification_icon_error {
barva: #cd3636;
}
.notification__icon__success {
barva: #2f9461;
}
.notification__icon__warning {
barva: #c8811a;
}
Potem, v Obvestilo komponento, lahko pogojno uporabite ustrezen razred glede na vrsta rekvizit, takole:
izvozprivzetofunkcijoObvestilo({vrsta, naslov, opis}) {
vrnitev (
`obvestilo obvestilo__${type}`}>
`obvestilo__levo`}>
`ikona__obvestila__${type}`}/>
"vsebina__obvestila">
`obvestilo__naslov obvestilo__naslov__${type}`}>{naslov</div>
`obvestilo__opis obvestilo__opis__${type}`}>{opis}</div>
</div>
</div>
`ikona__obvestila__${type}`}/>
</div>
)
}
V tej komponenti dinamično nastavljate razred glede na vrsto, kot je npr obvestilo__uspeh oz obvestilo__napaka.
Če želite videti to v akciji, uvozite komponento obvestil App.jsx in ga uporabite na naslednji način:
uvoz Obvestilo od'./Obvestilo'funkcijoaplikacija() {
vrnitev (
<>
vrsta="uspeh"
naslov="Naloga končana"
opis="Vaša naloga je bila uspešno opravljena."
/>
</>
)
}
izvozprivzeto aplikacija
Zdaj lahko posredujete drugo vrsto v Obvestilo komponento in prikaže ustrezno obvestilo, ki se ujema s sporočilom.
To je bistvenega pomena za dobro uporabniško izkušnjo, ker so uporabniki začeli povezovati različne barve in sloge z različnimi scenariji, zato je pomembno, da te povezave uporabljate dosledno. Na primer, zmedeno bi bilo, če bi uporabnika obvestili, da je uspešno naložil fotografijo v rdeče polje za obvestila. Morda mislijo, da nalaganje ni uspelo, tudi če je bilo uspešno.
Dodajanje interaktivnosti v obvestilno komponento
Naučili ste se, kako lahko uporabite pripomočke za ustvarjanje prilagodljive komponente obvestila. Če želite še dlje, lahko tej komponenti dodate prehode, da bo bolj privlačna. Z animacijami CSS lahko na primer potisnete komponento obvestila na zaslon in jo potisnete ven, ko preteče določen čas.
