Библиотеката SweetAlert улеснява създаването на персонализирани компоненти за уведомяване в React.
SweetAlert е популярна библиотека, която ви дава възможност да създавате персонализирани компоненти за уведомяване за вашето приложение React. Можете да използвате известия, за да предупреждавате потребителите за важна информация, грешки или успешни действия във вашето приложение. Това допринася за страхотно потребителско изживяване.
Инсталиране на библиотеката SweetAlert
За да използвате SweetAlert библиотека за създаване на известия, трябва да я инсталирате с помощта на всеки пакетен мениджър по ваш избор.
Можете да го инсталирате чрез Мениджър на пакети NPM като изпълните следната команда във вашия терминал:
npm инсталирайте sweetalert --save
Използване на SweetAlert за създаване на известия
Създаването на персонализирани известия във вашето приложение React с помощта на библиотеката SweetAlert е подобно на с помощта на библиотеката Toastify. The поглъщам функцията, предоставена от библиотеката SweetAlert, създава екземпляр на компонента за известяване и определя свойствата на известието.
Ето пример за използване на поглъщам () функция за създаване на компонент за уведомяване:
импортиране Реагирайте от"реагира"
импортиране поглъщам от"сладък сигнал"функцияПриложение() {
конст уведомявам = () => поглъщам ('Здравей');
връщане (
износпо подразбиране Приложение
Щракването върху бутона ще извика поглъщам функция, която ще покаже известие със съобщението „Hello There“.
The поглъщам функцията приема три параметъра. Първият параметър е заглавието на известието, вторият параметър е съобщението, а третият е иконата, която да се показва във вашето известие.
Можете да зададете икона параметър на една от предварително зададените стойности, т.е. успех, внимание, грешка, или инфо. Тогава иконата за известяване ще се базира на стойностите, които сте подали.
Например:
импортиране Реагирайте от"реагира"
импортиране поглъщам от"сладък сигнал"функцияПриложение() {
конст уведомявам = () => поглъщам ('Здравей', 'Добре дошли в моята страница', "успех");
връщане (
износпо подразбиране Приложение
Когато потребителят щракне върху бутона, той извиква уведомявам функция. След това тази функция ще покаже известие със съобщението „Здравей“ и „Добре дошли в моята страница“ с икона за успех.
Алтернатива на използването на поглъщам функция с трите параметъра би била да се използва поглъщам функция с параметъра обект. Този параметър на обекта съдържа свойства, които дефинират компонента за уведомяване.
Например:
импортиране Реагирайте от"реагира"
импортиране поглъщам от"сладък сигнал"функцияПриложение() {
конст уведомявам = () => поглъщам (
{
заглавие: 'Здравей',
текст: 'Добре дошли в моята страница',
икона: "успех",
бутон: 'ДОБРЕ',
}
);връщане (
износпо подразбиране Приложение
В кодовия блок по-горе, поглъщам функцията приема обект със следните свойства: заглавие, текст, икона, и бутон.
The заглавие свойството указва заглавието на известието, докато текст свойството дефинира съобщението. С икона свойство, можете да посочите типа на иконата, показвана в известието.
На последно място, бутон свойството указва текста на бутона, показан в известието. В този случай бутонът показва текста Добре.
Персонализиране на свойството на бутона
Можете да персонализирате бутон свойство на вашия компонент за уведомяване, за да отговаря на вашите нужди за проектиране. The бутон property взема обект със свойства, използвани за конфигуриране на поведението и външния вид на бутона.
Бутонът по подразбиране съдържа следните свойства:
поглъщам (
{
бутон: {
текст: "ДОБРЕ",
стойност: вярно,
видимо: вярно,
className: "",
closeModal: вярно
},
}
);
В кодовия блок по-горе следните свойства се използват с бутона:
- текст: Текстът за показване на бутона.
- стойност: Стойността, която се връща, когато потребителят щракне върху бутона. В този случай стойността е вярно.
- видими: Булева стойност показва дали бутонът трябва да бъде видим.
- className: Низ, представляващ CSS класа, който да се приложи към бутона.
- closeModal: Булева стойност, указваща дали модалът трябва да бъде затворен при щракване върху бутона.
Можете също така да изобразите повече от един бутон, като използвате масив с бутони Имот. Масивът ще приема низове като свои елементи.
Например:
поглъщам (
{
бутони: ["Отказ", "Добре"],
}
);
В този пример вашият компонент за уведомяване ще съдържа два бутона с текстовете анулиране и Добре. Настройка на бутони собственост към невярно ще изведе известие без бутон.
Изобразяване на HTML елементи в компонента за уведомяване
Можете също така да визуализирате HTML елементи освен обикновени низове като известие. Това предоставя широка гама от опции за персонализиране.
Например:
импортиране Реагирайте от"реагира"
импортиране поглъщам от"сладък сигнал"функцияПриложение() {
конст уведомявам = () => поглъщам (
{
съдържание: {
елемент: 'вход',
атрибути: {
заместител: 'Първо име',
Тип: 'текст'
}
},
бутони: 'Регистрирай се'
}
)връщане (
"приложение">
износпо подразбиране Приложение
В този пример използвате съдържание свойство за изобразяване на поле за въвеждане с текст на контейнер.
Вие определяте съдържанието на известието, като използвате съдържание свойството и HTML елемента за изобразяване с елемент Имот. За да укажете атрибутите на HTML елемента, използвате атрибути Имот.
Кодовият блок по-горе ще изобрази известието по-долу, когато щракнете върху елемента бутон.
Оформяне на компонента за уведомяване
Вместо да се придържате към стила на кутията за известия по подразбиране, предоставен от библиотеката SweetAlert, можете да персонализирате външния вид на кутията за известия чрез прилагане на ваши собствени CSS стилове.
Вие ще използвате className свойство, за да добавите вашите стилове към известието. The className свойството дефинира CSS клас за известието.
Например:
поглъщам (
{
заглавие: 'Здравей',
текст: 'Добре дошли в моята страница',
бутон: невярно,
className: 'тревога',
}
)
Уведомлението в кодовия блок по-горе има a className стойност тревога. След създаване на известието и дефиниране на className, ще дефинирате своите CSS стилове:
.тревога{
Цвят на фона: зелено;
шрифтово семейство: курсив;
граница-радиус: 15px;
}
CSS стиловете по-горе ще се прилагат към известието при изобразяване:
Затваряне на компонента за уведомяване
Библиотеката SweetAlert предоставя няколко опции за персонализиране на начина, по който вашите известия се затварят. Тези опции са closeOnEsc, closeOnClickOutside, и таймер Имоти.
The closeOnEsc свойството определя дали полето за уведомяване се затваря, когато потребителят натисне клавиша Esc на клавиатурата си. The closeOnEsc свойството приема булева стойност.
поглъщам (
{
...,
closeOnEsc: невярно,
}
)
По подразбиране, closeOnEsc свойството е зададено на вярно. В кодовия блок по-горе вие задавате closeOnEsc собственост към невярно. Като зададете свойството на невярно, потребителят не може да затвори полето за уведомяване чрез натискане на клавиша Esc.
Можете също така да определите дали потребителят може да затвори полето за уведомяване, като щракне извън полето с помощта на closeOnClickOutside Имот.
Ако свойството е зададено на вярно, на closeOnClickOutside свойството позволява затварянето на полето за уведомяване чрез щракване някъде извън него. Това е поведението по подразбиране на SweetAlert. За да спрете това поведение, задайте closeOnClickOutside собственост към невярно.
поглъщам (
{
...,
closeOnClickOutside: невярно,
}
)
С таймер свойство, можете да зададете ограничение във времето за автоматично затваряне на кутията за известия. The таймер свойството приема цяло число в милисекунди.
поглъщам (
{
...,
таймер: 5000,
}
)
В този пример, таймер свойството е зададено на 5000. Известието ще бъде видимо само за 5 секунди.
Ефективни персонализирани известия с помощта на SweetAlert
SweetAlert е мощна библиотека, чрез която можете да създавате персонализирани известия в приложение на React. Използване на библиотеката поглъщам функция, сега можете да създавате известия с персонализирани свойства и поведение. Можете също така да използвате други библиотеки като React-Toastify, за да създадете персонализирани сигнали в приложение на React.
