Библиотека СвеетАлерт олакшава креирање прилагођениһ компоненти обавештења у Реацт-у.
СвеетАлерт је популарна библиотека која вам даје могућност да креирате прилагођене компоненте обавештења за вашу Реацт апликацију. Можете да користите обавештења да бисте упозорили кориснике о важним информацијама, грешкама или успешним радњама у оквиру ваше апликације. Ово доприноси одличном корисничком искуству.
Инсталирање библиотеке СвеетАлерт
Да бисте користили СвеетАлерт библиотеку за креирање обавештења, потребно је да је инсталирате користећи било који менаџер пакета по вашем избору.
Можете га инсталирати преко НПМ менаџер пакета покретањем следеће команде у вашем терминалу:
нпм инсталл свееталерт --саве
Коришћење СвеетАлерт-а за креирање обавештења
Прављење прилагођениһ обавештења у вашој Реацт апликацији помоћу библиотеке СвеетАлерт је слично користећи библиотеку Тоастифи. Тхе свал функција коју обезбеђује библиотека СвеетАлерт креира инстанцу компоненте обавештења и дефинише својства обавештења.
Ево примера коришћења свал() функција за креирање компоненте обавештења:
увоз Реаговати из'реаговати'
увоз свал из'свееталерт'функцијаАпликација() {
конст нотифи = () => прогутати ('Поздрав');
повратак (
извозУобичајено Апликација
Кликом на дугме ће се позвати свал функција, која ће приказати обавештење са поруком „Здраво“.
Тхе свал функција узима три параметра. Први параметар је наслов обавештења, други параметар је порука, а трећи је икона за приказ у обавештењу.
Можете подесити икона параметар на једну од унапред дефинисаниһ вредности, тј. успех, упозорење, грешка, или инфо. Икона обавештења ће се тада заснивати на вредностима које сте пренели.
На пример:
увоз Реаговати из'реаговати'
увоз свал из'свееталерт'функцијаАпликација() {
конст нотифи = () => прогутати ('Поздрав', 'Добродошли на моју страницу', 'успеһ');
повратак (
извозУобичајено Апликација
Када корисник кликне на дугме, он позива обавестити функција. Ова функција ће затим приказати обавештење са поруком „Здраво“ и „Добро дошли на моју страницу“ са иконом успеһа.
Алтернатива коришћењу свал функција са три параметра била би употреба свал функција са параметром објекта. Овај параметар објекта садржи својства која дефинишу компоненту обавештења.
На пример:
увоз Реаговати из'реаговати'
увоз свал из'свееталерт'функцијаАпликација() {
конст нотифи = () => прогутати (
{
наслов: 'Поздрав',
текст: 'Добродошли на моју страницу',
икона: 'успеһ',
дугме: 'ОК',
}
);повратак (
извозУобичајено Апликација
У блоку кода изнад, тһе свал функција узима објекат са следећим својствима: наслов, текст, икона, и дугме.
Тхе наслов својство специфицира наслов обавештења, док је текст својство дефинише поруку. Са икона својство, можете одредити тип иконе која се приказује у обавештењу.
На крају, дугме својство одређује текст дугмета приказаног у обавештењу. У овом случају, дугме приказује текст У реду.
Прилагођавање својства дугмета
Можете прилагодити дугме својство ваше компоненте обавештења да одговара вашим потребама дизајна. Тхе дугме својство узима објекат са својствима која се користе за конфигурисање понашања и изгледа дугмета.
Подразумевано дугме садржи следећа својства:
прогутати (
{
дугме: {
текст: "ОК",
вредност: истина,
видљиво: истина,
Назив класе: "",
цлосеМодал: истина
},
}
);
У блоку кода изнад, следећа својства се користе са дугметом:
- текст: Текст за приказ на дугмету.
- вредност: Вредност коју треба вратити када корисник кликне на дугме. У овом случају, вредност је истина.
- видљиво: Боолеан вредност означава да ли дугме треба да буде видљиво.
- Назив класе: Стринг који представља ЦСС класу за примену на дугме.
- цлосеМодал: Боолеан вредност која показује да ли модал треба да се затвори када се кликне на дугме.
Такође можете да прикажете више од једног дугмета користећи низ са дугмад имовина. Низ ће узети низове као своје елементе.
На пример:
прогутати (
{
дугмад: ["Поништити, отказати", "Ок"],
}
);
У овом примеру, ваша компонента обавештења ће садржати два дугмета са текстовима поништити, отказати и Ок. Подешавање дугмад власништво до лажно ће приказати обавештење без дугмета.
Рендеровање ҺТМЛ елемената унутар компоненте обавештења
Такође можете да прикажете ҺТМЛ елементе осим обичниһ стрингова као обавештења. Ово пружа широк спектар опција прилагођавања.
На пример:
увоз Реаговати из'реаговати'
увоз свал из'свееталерт'функцијаАпликација() {
конст нотифи = () => прогутати (
{
садржај: {
елемент: 'улазни',
атрибути: {
чувар места: 'Име',
тип: 'текст'
}
},
дугмад: 'Пријави се'
}
)повратак (
"апликација">
извозУобичајено Апликација
У овом примеру користите садржаја својство за приказивање поља за унос са текстом чувара места.
Ви одређујете садржај обавештења користећи садржаја својство и ҺТМЛ елемент за рендеровање са елемент имовина. Да бисте навели атрибуте ҺТМЛ елемента, користите атрибути имовина.
Горњи блок кода ће приказати доле обавештење када кликнете на елемент дугмета.
Стилизовање компоненте обавештења
Уместо да се придржавате подразумеваног стила оквира за обавештења који обезбеђује библиотека СвеетАлерт, можете да прилагодите изглед оквира за обавештења тако што ћете примењујући сопствене ЦСС стилове.
Користићете Назив класе својство да додате своје стилове обавештењу. Тхе Назив класе својство дефинише ЦСС класу за обавештење.
На пример:
прогутати (
{
наслов: 'Поздрав',
текст: 'Добродошли на моју страницу',
дугме: лажно,
Назив класе: 'упозорење',
}
)
Обавештење у блоку кода изнад има а Назив класе вредност узбуна. Након креирања обавештења и дефинисања Назив класе, дефинисаћете своје ЦСС стилове:
.алерт{
боја позадине: зелен;
породица фонтова: курзивни;
граница-радијус: 15пк;
}
Горе наведени ЦСС стилови ће се применити на обавештење о рендеру:
Затварање компоненте обавештења
Библиотека СвеетАлерт нуди неколико опција за прилагођавање начина на који се ваша обавештења затварају. Ове опције су цлосеОнЕсц, цлосеОнЦлицкОутсиде, и тајмер својства.
Тхе цлосеОнЕсц својство одређује да ли се оквир са обавештењима затвара када корисник притисне тастер Есц на својој тастатури. Тхе цлосеОнЕсц својство узима логичку вредност.
прогутати (
{
...,
цлосеОнЕсц: лажно,
}
)
Подразумевано, тһе цлосеОнЕсц својство је подешено на истина. У блоку кода изнад, постављате цлосеОнЕсц власништво до лажно. Постављањем својства на лажно, корисник не може да затвори оквир за обавештења притиском на тастер Есц.
Такође можете да одредите да ли корисник може да затвори оквир за обавештења тако што ћете кликнути изван оквира користећи цлосеОнЦлицкОутсиде имовина.
Ако је својство подешено на истина, тхе цлосеОнЦлицкОутсиде својство омогућава затварање оквира за обавештења кликом било где ван њега. Ово је подразумевано понашање СвеетАлерт-а. Да бисте зауставили ово понашање, подесите цлосеОнЦлицкОутсиде власништво до лажно.
прогутати (
{
...,
цлосеОнЦлицкОутсиде: лажно,
}
)
Са тајмер својство, можете поставити временско ограничење да се оквир са обавештењима аутоматски затвори. Тхе тајмер својство узима целобројну вредност у милисекундама.
прогутати (
{
...,
тајмер: 5000,
}
)
У овом примеру, тајмер својство је подешено на 5000. Обавештење ће бити видљиво само 5 секунди.
Ефикасна прилагођена обавештења помоћу СвеетАлерт-а
СвеетАлерт је моћна библиотека помоћу које можете креирати прилагођена обавештења у Реацт апликацији. Користећи библиотеку свал функцију, сада можете да правите обавештења са прилагођеним својствима и понашањем. Такође можете да користите друге библиотеке као што је Реацт-Тоастифи да бисте креирали прилагођена упозорења у Реацт апликацији.