Lai izveidotu paziņojumu komponentu, nav jāpaļaujas uz trešās puses pakotni. Lūk, kā jūs varat to izveidot pats.
Pakalpojumā React ir pieejamas vairākas trešo pušu pakotnes, kas var palīdzēt izveidot paziņojumu komponentu. Tomēr, ja vēlaties tikai vienkāršu paziņojumu komponentu, iespējams, vēlēsities izveidot savu, lai izvairītos no nevajadzīgu atkarību pievienošanas savai lietojumprogrammai.
Projekta iestatīšana
Jūs to darīsit izmantojiet Vite, lai iestatītu lietotni React. Vite ir veidošanas rīks, kas ļauj ātri izveidot React projektu.
Lai sāktu, izmantojiet dzijas pakotņu pārvaldnieku, lai izveidotu jaunu Vite projektu, izpildot tālāk norādīto komandu.
dzija izveidot vite
Komanda liks ievadīt projekta nosaukumu. Ievadiet projekta nosaukumu un nospiediet taustiņu Enter. Pēc tam tas liks jums izvēlēties ietvaru. Izvēlieties reaģēt un nospiediet taustiņu Enter. Visbeidzot tas lūgs jums izvēlēties variantu, izvēlieties JavaScript un pēc tam nospiediet taustiņu Enter.
Tālāk ir norādītas konfigurācijas, kuras izmantos šī apmācība.
Kad Vite ir izveidojis projektu, dodieties uz projekta mapi un atveriet to, izmantojot koda redaktoru.
Pēc tam varat palaist izstrādes serveri, izpildot šādu komandu.
dzija dev
Tādējādi jūsu noklusējuma pārlūkprogrammā tiks atvērta jūsu jaunā React lietojumprogramma vietnē http://localhost: 5173/.
Paziņojuma komponenta projektēšana
Lai izveidotu elastīgu paziņojumu komponentu, tam ir jāspēj apstrādāt dažāda veida paziņojumus ar dažādiem nosaukumiem, aprakstiem un stiliem. Piemēram, tai ir jāsniedz brīdinājums, veiksmes un kļūdu paziņojums.
Šeit ir dažādi varianti, ko paziņojumu komponentam vajadzētu atveidot.
To var panākt, nosūtot rekvizītus komponentam, kas norāda renderējamā paziņojuma veidu, nosaukumu un apraksta tekstu. Izmantojot šos rekvizītus, varat pielāgot komponentu un atkārtoti izmantot to visā lietojumprogrammā ar minimālu piepūli. Ja jums ir nepieciešams atsvaidzināt rekvizītus, šeit ir paskaidrots raksts kā lietot rekvizītus programmā React.
Paziņojumu komponenta izveide
Iekš src mapē, izveidojiet jaunu failu ar nosaukumu Notification.jsx un pievienojiet šādu kodu.
eksportētnoklusējumafunkcijuPaziņojums({tips, nosaukums, apraksts}) {
atgriezties (
{/* Paziņojuma saturs */}
</div>
)
}
Šis kods izveido funkcionālu komponentu, ko sauc Paziņojums ar trim rekvizītiem: veids, virsraksts, un apraksts. Jūs izmantosit šos rekvizītus, lai pielāgotu paziņojuma stilu un saturu.
No dizaina komponentam ir dažas ikonas, proti, informācija un krusta ikona. Jūs varat lejupielādēt bezmaksas ikonas vai izmantojiet ikonas komponentu no pakotnes, piemēram, reakcijas ikonas. Šī apmācība tiks izmantota reakcijas ikonas tāpēc instalējiet to, izpildot tālāk norādīto komandu.
dzija pievienot reakcijas ikonas
Pēc tam importējiet ikonas augšpusē Paziņojums komponents.
imports { RxCross2, RxInfoCircled } no"react-icons/rx"
Tagad varat modificēt komponentu, lai izmantotu ikonas, nosaukumu un apraksta rekvizītu vērtības, lai izveidotu paziņojuma saturu.
eksportētnoklusējumafunkcijuPaziņojums({tips, nosaukums, apraksts}) {
atgriezties (
{title}</div>
{description}</div>
</div>
</div>
</div>
)
}
Nākamais solis ir izveidot to stilu atkarībā no ievadītā veida.
Viena pieeja, ko varat izmantot, ir definēt CSS klases katram paziņojuma veidam, ko vēlaties parādīt. Pēc tam varat nosacīti piemērot atbilstošo klasi, pamatojoties uz nodoto veidu.
Lai sāktu, izveidojiet jaunu failu ar nosaukumu paziņojums.css un importējiet to Notification.jsx augšpusē pievienojot šādu kodu.
importēt "./notification.css"
Tad iekšā paziņojums.css definējiet paziņojumu komponenta bāzes stilus:
.paziņojums {
displejs: flex;
flex-virziens: rinda;
izlīdzināt vienumus: flex-start;
polsterējums: 8px;
}
.notification__left {
displejs: flex;
flex-virziens: rinda;
polsterējums: 0px;
plaisa: 8px;
mala-labais: 24px;
}
.notification__content {
displejs: flex;
flex-virziens: kolonna;
izlīdzināt vienumus: flex-start;
polsterējums: 0px;
}
.notification__title {
fontu ģimene: "Inter";
fonta stils: normāli;
fonta svars: 500;
fonta izmērs: 14px;
}
.notification__description {
fontu ģimene: "Inter";
fonta stils: normāli;
fonta svars: 400;
fonta izmērs: 12px;
polsterējums: 0;
}
Pēc tam varat definēt stilus dažādiem paziņojumu veidiem, pievienojot CSS failam šādu kodu.
.notification__success {
fons: #f6fef9;
robeža: 1pxciets#2f9461;
robeža-rādiuss: 8px;
}
.notification__error {
fons: #fffbfa;
robeža: 1pxciets#cd3636;
robeža-rādiuss: 8px;
}
.notification__warning {
fons: #fffcf5;
robeža: 1pxciets#c8811a;
robeža-rādiuss: 8px;
}
Iepriekš minētais kods veido paziņojumu konteinera stilus, pamatojoties uz ievadīto veidu.
Lai pielāgotu nosaukumu, izmantojiet tālāk norādītos stilus.
.notification__title__success {
krāsa: #2f9461;
}
.notification__title__warning {
krāsa: #c8811a;
}
.notification__title__error {
krāsa: #cd3636;
}
Pielāgotam apraksta tekstam izmantojiet šos stilus.
.notification__description__success {
krāsa: #53b483;
}
.notification__description__warning {
krāsa: #e9a23b;
}
.notification__description__error {
krāsa: #f34141;
}
Un ikonām izmantojiet šādas klases.
.notification_icon_error {
krāsa: #cd3636;
}
.notification__icon__success {
krāsa: #2f9461;
}
.notification__icon__warning {
krāsa: #c8811a;
}
Pēc tam sadaļā Paziņojums komponentu, varat nosacīti piemērot atbilstošo klasi, pamatojoties uz veids rekvizīts, piemēram:
eksportētnoklusējumafunkcijuPaziņojums({tips, nosaukums, apraksts}) {
atgriezties (
`paziņojums__${type}`}>
`paziņojums__pa kreisi`}>
`notification__icon__${type}`}/>
"notification__content">
`notification__title notification__title__${type}`}>{title}</div>
`notification__description notification__description__${type}`}>{apraksts}</div>
</div>
</div>
`notification__icon__${type}`}/>
</div>
)
}
Šajā komponentā jūs dinamiski iestatāt klasi atkarībā no veida, piemēram, paziņojums__veiksme vai paziņojums__kļūda.
Lai to redzētu, importējiet paziņojumu komponentu App.jsx un izmantojiet to šādi:
imports Paziņojums no'./Paziņojums'funkcijuApp() {
atgriezties (
<>
tips="panākumi"
virsraksts="Uzdevums pabeigts"
apraksts="Jūsu uzdevums ir veiksmīgi izpildīts."
/>
</>
)
}
eksportētnoklusējuma App
Tagad varat nodot cita veida Paziņojums komponentu un renderēt atbilstošu paziņojumu, kas atbilst ziņojumam.
Tas ir būtiski, lai nodrošinātu labu lietotāja pieredzi, jo lietotāji ir sākuši saistīt dažādas krāsas un stilus ar dažādiem scenārijiem, un ir svarīgi šīs asociācijas izmantot konsekventi. Piemēram, būtu mulsinoši paziņot lietotājam, ka viņš ir veiksmīgi augšupielādējis fotoattēlu sarkanā paziņojumu lodziņā. Viņi varētu domāt, ka augšupielāde neizdevās, pat ja tā bija veiksmīga.
Interaktivitātes pievienošana paziņojumu komponentam
Jūs uzzinājāt, kā izmantot rekvizītus, lai izveidotu pielāgojamu paziņojumu komponentu. Lai padarītu to vēl tālāk, šim komponentam varat pievienot pārejas, lai padarītu to saistošāku. Piemēram, varat izmantot CSS animācijas, lai bīdītu paziņojumu komponentu uz ekrānu un izbīdītu to pēc noteikta laika.