Не морате да се ослањате на пакет треће стране да бисте креирали компоненту обавештења. Ево како можете да га направите сами.
Постоји неколико пакета независних произвођача доступних у Реацт-у који вам могу помоћи да направите компоненту обавештења. Међутим, ако желите само једноставну компоненту обавештења, можда ћете желети да креирате сопствену да бисте избегли додавање непотребних зависности вашој апликацији.
Постављање пројекта
Хоћеш користите Вите да бисте подесили Реацт апликацију. Вите је алатка за прављење која вам омогућава да брзо изградите Реацт пројекат.
Да бисте започели, користите менаџер пакета предива да бисте креирали нови Вите пројекат тако што ћете покренути наредбу испод.
предиво створити вите
Команда ће од вас тражити да унесете назив пројекта. Унесите назив пројекта и притисните Ентер. Затим ће вас затражити да изаберете оквир. Изабери реаговати и притисните Ентер. На крају ће од вас тражити да изаберете варијанту, изаберите ЈаваСцрипт а затим притисните Ентер.
Ево конфигурација које ће овај водич користити:
Након што Вите креира пројекат, идите до фасцикле пројекта и отворите је помоћу уређивача кода.
Затим можете покренути развојни сервер тако што ћете покренути следећу команду.
иарн дев
Ово ће отворити вашу нову Реацт апликацију у вашем подразумеваном претраживачу на http://localhost: 5173/.
Дизајнирање компоненте обавештења
Да би се направила флексибилна компонента обавештења, она мора да буде у стању да рукује различитим типовима обавештења са различитим насловима, описима и стиловима. На пример, треба да прикаже упозорење, успех и обавештење о грешци.
Ево различитих варијација које компонента обавештења треба да може да прикаже.
То можете постићи тако што ћете проследити пропс компоненти која одређује тип обавештења за рендеровање, наслов и текст описа. Користећи ове реквизите, можете прилагодити компоненту и поново је користити у својој апликацији уз минималан напор. Ако вам је потребно освежење о реквизитима, ево чланка који објашњава како користити реквизите у Реацт-у.
Креирање компоненте обавештења
У срц фолдер, креирајте нову датотеку под називом Нотифицатион.јск и додајте следећи код.
извозУобичајенофункцијаОбавештење({тип, наслов, опис}) {
повратак (
{/* Садржај обавештења */}
</div>
)
}
Овај код креира функционалну компоненту тзв Обавештење са три реквизита: тип, наслов, и Опис. Користићете ове реквизите да прилагодите стил и садржај обавештења.
Од дизајна, компонента има неколико икона, односно информација, и икону крста. Можете преузмите бесплатне иконе за коришћење или користите компоненту икона из пакета као што је реаговати иконе. Овај водич ће користити реаговати иконе па га инсталирајте тако што ћете покренути наредбу испод.
предиво додати реаг-иконе
Затим увезите иконе на врху Обавештење саставни део.
увоз { РкЦросс2, РкИнфоЦирцлед } из"реаг-иконе/рк"
Сада можете да модификујете компоненту тако да користи иконе, наслов и вредности пропс-а за креирање садржаја обавештења.
извозУобичајенофункцијаОбавештење({тип, наслов, опис}) {
повратак (
{титле}</div>
{десцриптион}</div>
</div>
</div>
</div>
)
}
Следећи корак је да га стилизујете у зависности од типа који сте унели.
Један приступ који можете предузети је да дефинишете ЦСС класе за сваки тип обавештења које желите да прикажете. Затим можете условно применити одговарајућу класу на основу типа који је прослеђен.
За почетак креирајте нову датотеку под називом нотифицатион.цсс и увезите га Нотифицатион.јск додавањем следећег кода на врх.
увоз "./нотифицатион.цсс"
Затим у нотифицатион.цсс дефинишите основне стилове за компоненту обавештења:
.обавештење {
приказ: флек;
флек-дирецтион: ред;
алигн-итемс: флек-старт;
паддинг: 8пк;
}
.нотифицатион__лефт {
приказ: флек;
флек-дирецтион: ред;
паддинг: 0пк;
јаз: 8пк;
маргин-десно: 24пк;
}
.нотифицатион__цонтент {
приказ: флек;
флек-дирецтион: колона;
алигн-итемс: флек-старт;
паддинг: 0пк;
}
.нотифицатион__титле {
породица фонтова: "између";
тип слова: нормалан;
фонт-веигхт: 500;
фонт-сизе: 14пк;
}
.нотифицатион__десцриптион {
породица фонтова: "између";
тип слова: нормалан;
фонт-веигхт: 400;
фонт-сизе: 12пк;
паддинг: 0;
}
Затим можете дефинисати стилове за различите типове обавештења додавањем следећег кода у ЦСС датотеку.
.нотифицатион__суццесс {
позадини: #ф6феф9;
граница: 1пкчврст#2ф9461;
граница-радијус: 8пк;
}
.нотифицатион__еррор {
позадини: #фффбфа;
граница: 1пкчврст#цд3636;
граница-радијус: 8пк;
}
.нотифицатион__варнинг {
позадини: #фффцф5;
граница: 1пкчврст#ц8811а;
граница-радијус: 8пк;
}
Горњи код стилизује контејнер за обавештења на основу типа који је прослеђен.
Да бисте прилагодили наслов, користите следеће стилове.
.нотифицатион__титле__суццесс {
боја: #2ф9461;
}
.нотифицатион__титле__варнинг {
боја: #ц8811а;
}
.нотифицатион__титле__еррор {
боја: #цд3636;
}
За прилагођени текст описа користите ове стилове.
.нотифицатион__десцриптион__суццесс {
боја: #53б483;
}
.нотифицатион__десцриптион__варнинг {
боја: #е9а23б;
}
.нотифицатион__десцриптион__еррор {
боја: #ф34141;
}
А за иконе користите следеће класе.
.нотифицатион_ицон_еррор {
боја: #цд3636;
}
.нотифицатион__ицон__суццесс {
боја: #2ф9461;
}
.нотифицатион__ицон__варнинг {
боја: #ц8811а;
}
Затим, у Обавештење компоненту, можете условно применити одговарајућу класу на основу тип реквизит, овако:
извозУобичајенофункцијаОбавештење({тип, наслов, опис}) {
повратак (
`обавештење о обавештењу__${типе}`}>
`обавештење__лефт`}>
`обавештење__икона__${типе}`}/>
"нотифицатион__цонтент">
`нотифицатион__титле нотифицатион__титле__${типе}`}>{титле}</div>
`нотифицатион__десцриптион нотифицатион__десцриптион__${типе}`}>{опис}</div>
</div>
</div>
`обавештење__икона__${типе}`}/>
</div>
)
}
У овој компоненти динамички постављате класу у зависности од типа као нпр нотифицатион__суццесс или нотифицатион__еррор.
Да бисте видели ово на делу, увезите компоненту обавештења Апп.јск и користите га на следећи начин:
увоз Обавештење из'./Обавештење'функцијаАпликација() {
повратак (
<>
типе="успех"
титле="Задатак завршен"
десцриптион=„Ваш задатак је успешно обављен.“
/>
</>
)
}
извозУобичајено Апликација
Сада можете проследити други тип Обавештење компоненту и приказати одговарајуће обавештење које одговара поруци.
Ово је неопходно за добро корисничко искуство јер су корисници почели да повезују различите боје и стилове са различитим сценаријима и важно је да се те асоцијације доследно користе. На пример, било би збуњујуће обавестити корисника да је успешно отпремио фотографију у црвеном пољу за обавештења. Можда мисле да отпремање није успело, чак и ако је било успешно.
Додавање интерактивности компоненти обавештења
Научили сте како можете да користите реквизите за креирање прилагодљиве компоненте обавештења. Да бисте напредовали, можете додати прелазе овој компоненти како бисте је учинили привлачнијом. На пример, можете да користите ЦСС анимације да повучете компоненту обавештења на екран и да је извучете након што прође одређено време.