Kaip sukurti tinkintą pranešimų komponentą „React“ naudojant „SweetAlert“.

„SweetAlert“ yra populiari biblioteka, suteikianti galimybę kurti pritaikytus pranešimų komponentus jūsų „React“ programai. Galite naudoti pranešimus, kad įspėtų naudotojus apie svarbią informaciją, klaidas ar sėkmingus veiksmus programoje. Tai prisideda prie puikios vartotojo patirties.

„SweetAlert“ bibliotekos įdiegimas

Norėdami naudoti SweetAlert biblioteką norėdami sukurti pranešimus, turite ją įdiegti naudodami bet kurią pasirinktą paketų tvarkyklę.

Jį galite įdiegti per NPM paketų tvarkyklė paleisdami šią komandą savo terminale:

npm įdiegti sweetalert --save

„SweetAlert“ naudojimas pranešimams kurti

Pasirinktinių pranešimų kūrimas „React“ programoje naudojant „SweetAlert“ biblioteką yra panašus į naudojant Toastify biblioteką. The swal SweetAlert bibliotekos teikiama funkcija sukuria pranešimo komponento egzempliorių ir apibrėžia pranešimo ypatybes.

Štai pavyzdys, kaip naudoti swal () funkcija pranešimo komponentui sukurti:

importuoti Reaguoti iš'reaguoti'
importuoti swal iš'saldus'
funkcijaProgramėlė() {
konst pranešti = () => swal ('Sveiki');
grąžinti (



Spustelėkite Aš</button>
 </div>
 )
}
eksportuotinumatytas Programėlė

Spustelėjus mygtuką bus iškviesta swal funkcija, kuri parodys pranešimą su pranešimu „Sveiki“.

The swal funkcijai reikia trijų parametrų. Pirmasis parametras yra pranešimo pavadinimas, antrasis parametras yra pranešimas, o trečiasis yra piktograma, kuri bus rodoma pranešime.

Galite nustatyti piktogramą parametrą į vieną iš iš anksto nustatytų reikšmių, t. y. sėkmė, įspėjimas, klaida, arba informacija. Tada pranešimo piktograma bus pagrįsta jūsų perduotomis reikšmėmis.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti'
importuoti swal iš'saldus'
funkcijaProgramėlė() {
konst pranešti = () => swal ('Sveiki', 'Sveiki atvykę į mano puslapį', 'sėkmė');
grąžinti (



Spustelėkite Aš</button>
 </div>
 )
}
eksportuotinumatytas Programėlė

Kai vartotojas spusteli mygtuką, jis iškviečia pranešti funkcija. Tada ši funkcija parodys pranešimą su pranešimu „Sveiki“ ir „Sveiki atvykę į mano puslapį“ su sėkmės piktograma.

Alternatyva naudojimui swal funkcija su trimis parametrais būtų naudoti swal funkcija su objekto parametru. Šiame objekto parametre yra ypatybių, kurios apibrėžia pranešimo komponentą.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti'
importuoti swal iš'saldus'
funkcijaProgramėlė() {
konst pranešti = () => swal (
 {
 pavadinimas: 'Sveiki',
 tekstas: 'Sveiki atvykę į mano puslapį',
 piktograma: 'sėkmė',
 mygtukas: 'GERAI',
 }
 );
grąžinti (



Spustelėkite Aš</button>
 </div>
 )
}
eksportuotinumatytas Programėlė

Aukščiau esančiame kodo bloke swal funkcija paima objektą su šiomis savybėmis: titulą, tekstą, piktogramą, ir mygtuką.

The titulą ypatybė nurodo pranešimo pavadinimą, o tekstą ypatybė apibrėžia pranešimą. Su piktogramą ypatybę, galite nurodyti pranešime rodomos piktogramos tipą.

Galiausiai, mygtuką ypatybė nurodo pranešime rodomo mygtuko tekstą. Tokiu atveju mygtukas rodo tekstą Gerai.

Mygtuko ypatybės tinkinimas

Galite tinkinti mygtuką pranešimo komponento savybė, kad atitiktų jūsų dizaino poreikius. The mygtuką savybė paima objektą su savybėmis, naudojamomis mygtuko veikimui ir išvaizdai konfigūruoti.

Numatytajame mygtuke yra šios savybės:

swal (
 {
 mygtukas: {
 tekstas: "GERAI",
 vertė: tiesa,
 matomas: tiesa,
 klasės pavadinimas: "",
 closeModal: tiesa
 },
 }
 );

Aukščiau esančiame kodo bloke su mygtuku naudojamos šios savybės:

• tekstą: ant mygtuko rodomas tekstas.
• vertė: vertė, kuri grąžinama vartotojui spustelėjus mygtuką. Šiuo atveju vertė yra tiesa.
• matomas: Būlio reikšmė rodo, ar mygtukas turi būti matomas.
• klasės pavadinimas: eilutė, nurodanti CSS klasę, taikoma mygtukui.
• closeModal: Būlio reikšmė, nurodanti, ar modalas turi būti uždarytas spustelėjus mygtuką.

Taip pat galite pateikti daugiau nei vieną mygtuką naudodami masyvą su mygtukai nuosavybė. Masyvo elementai bus eilutės.

Pavyzdžiui:

swal (
 {
 mygtukai: ["Atšaukti", "Gerai"],
 }
 );

Šiame pavyzdyje pranešimų komponente bus du mygtukai su tekstais atšaukti ir Gerai. Nustatant mygtukai nuosavybė į klaidinga pateiks pranešimą be mygtuko.

HTML elementų atvaizdavimas pranešimų komponento viduje

Taip pat galite pateikti HTML elementus, išskyrus paprastas eilutes, kaip pranešimą. Tai suteikia platų tinkinimo parinkčių pasirinkimą.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti'
importuoti swal iš'saldus'
funkcijaProgramėlė() {
konst pranešti = () => swal (
 {
 turinys: {
 elementas: "įvestis",
 atributai: {
 vietos rezervuotojas: 'Pirmas vardas',
 tipas: 'tekstas'
 }
 },
 mygtukai: 'Registruotis'
 }
 )
grąžinti (

"programėlė">
Spustelėkite Aš</button>
 </div>
 )
}
eksportuotinumatytas Programėlė

Šiame pavyzdyje jūs naudojate turinys savybė, kad būtų pateiktas įvesties laukas su rezervuotos vietos tekstu.

Pranešimo turinį nurodote naudodami turinys ypatybę ir HTML elementą, kurį norite pateikti su elementas nuosavybė. Norėdami nurodyti HTML elemento atributus, naudokite atributai nuosavybė.

Aukščiau pateiktas kodo blokas pateiks toliau pateiktą pranešimą, kai spustelėsite mygtuko elementą.

Pranešimo komponento stiliaus kūrimas

Užuot laikydamiesi numatytojo pranešimų laukelio stiliaus, kurį suteikia SweetAlert biblioteka, galite tinkinti pranešimų laukelio išvaizdą taikydami savo CSS stilius.

Jūs naudosite klasės pavadinimas savybę, kad pridėtumėte savo stilius prie pranešimo. The klasės pavadinimas ypatybė apibrėžia pranešimo CSS klasę.

Pavyzdžiui:

swal (
 {
 pavadinimas: 'Sveiki',
 tekstas: 'Sveiki atvykę į mano puslapį',
 mygtukas: klaidinga,
 klasės pavadinimas: 'budrus',
 }
 )

Pranešime aukščiau esančiame kodų bloke yra a klasės pavadinimas vertė budrus. Sukūrę pranešimą ir apibrėžę klasės pavadinimas, nustatysite savo CSS stilius:

.budrus{
fono spalva: žalias;
šrifto šeima: kursyvus;
pasienio spindulys: 15px;
}

Aukščiau pateikti CSS stiliai bus taikomi pranešimui apie pateikimą:

Pranešimų komponento uždarymas

„SweetAlert“ bibliotekoje yra keletas parinkčių, leidžiančių tinkinti pranešimų uždarymo būdą. Šios parinktys yra closeOnEsc, closeOnClickOutside, ir laikmatis savybių.

The closeOnEsc ypatybė nustato, ar pranešimų laukelis užsidaro, kai vartotojas paspaudžia klaviatūros klavišą Esc. The closeOnEsc nuosavybė įgauna loginę vertę.

swal (
 {
 ...,
 closeOnEsc: klaidinga,
 }
 )

Pagal numatytuosius nustatymus, closeOnEsc nuosavybė nustatyta tiesa. Aukščiau esančiame kodo bloke nustatote closeOnEsc nuosavybė į klaidinga. Nustatydami nuosavybę į klaidinga, vartotojas negali uždaryti pranešimų laukelio paspausdamas klavišą Esc.

Taip pat galite nustatyti, ar vartotojas gali uždaryti pranešimų laukelį, spustelėdami laukelio išorę naudodami closeOnClickOutside nuosavybė.

Jei nuosavybė nustatyta į tiesa, closeOnClickOutside ypatybė leidžia uždaryti pranešimų laukelį spustelėjus bet kur už jo ribų. Tai yra numatytasis SweetAlert elgesys. Norėdami sustabdyti šį elgesį, nustatykite closeOnClickOutside nuosavybė į klaidinga.

swal (
 {
 ...,
 closeOnClickOutside: klaidinga,
 }
 )

Su laikmatis galite nustatyti laiko limitą, per kurį pranešimų laukelis automatiškai užsidarys. The laikmatis ypatybė įgauna sveiko skaičiaus reikšmę milisekundėmis.

swal (
 {
 ...,
 laikmatis: 5000,
 }
 )

Šiame pavyzdyje laikmatis nuosavybė nustatyta 5000. Pranešimas bus matomas tik 5 sekundes.

Veiksmingi pasirinktiniai pranešimai naudojant „SweetAlert“.

„SweetAlert“ yra galinga biblioteka, kurią naudodami galite kurti pritaikytus pranešimus „React“ programoje. Naudojantis bibliotekos swal funkcija, dabar galite kurti pranešimus naudodami tinkintas savybes ir elgesį. Taip pat galite naudoti kitas bibliotekas, pvz., „React-Toastify“, kad sukurtumėte pasirinktinius įspėjimus „React“ programoje.