Уз ову библиотеку добијајте доследна, атрактивна упозорења на вашој Реацт локацији.
Упозорења су поруке које се приказују на веб локацији/веб апликацији да би пренеле важне информације кориснику. Они играју кључну улогу у веб апликацијама. Постоји много начина за креирање упозорења у Реацт-у; Цхакра УИ чини процес лаким и ефикасним.
Цхакра УИ је популарна библиотека компоненти за Реацт која обезбеђује скуп прилагодљивих и приступачних компоненти корисничког интерфејса.
Инсталирање корисничког интерфејса Цхакра
Да бисте користили Цхакра УИ библиотеку, једна од многих библиотека компоненти реаговања, прво морате да га инсталирате. Можете га инсталирати покретањем следеће терминалне команде у директоријуму вашег пројекта ноде.јс:
нпм и @цхакра-уи/реацт @емотион/реацт @емотион/стилед фрамер-мотион
Алтернативно, можете инсталирати Цхакра УИ користећи Иарн. Да бисте то урадили, покрените следећу команду:
предиво додати @цхакра-уи/реацт @емотион/реацт @емотион/стилед фрамер-мотион
Подешавање корисничког интерфејса чакре
Након што инсталирате Цхакра УИ, морате га учинити доступним у својој апликацији. Да бисте то урадили, потребно је да подесите ЦхакраПровидер саставни део.
Тхе ЦхакраПровидер компонента је компонента највишег нивоа коју нуди Цхакра УИ библиотека. Обмотава целу апликацију и пружа тему и стилски контекст свим њеним компонентама.
Да бисте поставили ЦхакраПровидер компоненту, увезите је из @цхакра-уи/реаговати:
увоз Реаговати из'реаговати'
увоз РеацтДОМ из'реацт-дом/цлиент'
увоз Апликација из'./Апликација'
увоз { ЦхакраПровидер } из'@цхакра-уи/реагуј'
РеацтДОМ.цреатеРоот(документ.гетЕлементБиИд('корен') као ХТМЛЕлемент).рендер(
</ChakraProvider>
</React.StrictMode>
)
Тхе ЦхакраПровидер компонента подржава а тема проп. Пролазећи тема проп то тхе ЦхакраПровидер компонента осигурава да све компоненте корисничког интерфејса Цхакра у апликацији могу приступити датој теми и контексту стила. Тхе тема проп је опционо; ако га не прођете, Цхакра УИ ће користити подразумевану тему.
Креирање прилагођеног упозорења помоћу компоненти упозорења
Цхакра УИ нуди четири компоненте које вам омогућавају да креирате прилагођено упозорење: Алерт, АлертИцон, АлертТитле, и АлертДесцриптион.
Да бисте креирали своју поруку упозорења, увезите ове компоненте из Цхакра УИ библиотеке и користите их на следећи начин:
увоз Реаговати из'реаговати';
увоз {Алерт, АлертИцон, АлертДесцриптион, АлертТитле} из'@цхакра-уи/реагуј'функцијаАпликација() {
повратак ('успех'> Добродошли!!!</AlertTitle> Лепо је имати те овде</AlertDescription>
</Alert>
</div>
)
}
извозУобичајено Апликација
Након увоза компоненти, Алерт компонента приказује поруку кориснику. Има а статус проп постављен на „успех“, што указује да је порука порука о успеху.
Постоје још три статуса: „инфо“, „грешка“ и „упозорење“. Шема боја и икона које упозорење користи зависиће од статуса поруке.
Тхе Алерт компонента садржи троје деце: АлертИцон, АлертТитле, и АлертДесцриптион. Тхе АлертИцон компонента приказује малу икону поред поруке, АлертТитле приказује главну поруку и АлертДесцриптион приказује детаљнији опис поруке.
Претходни блок кода ће генерисати упозорење које изгледа овако:
Прилагођавање порука упозорења помоћу опције Вариант Проп
Да бисте прилагодили изглед поруке упозорења, користите варијанта проп оф тхе Алерт саставни део. Тхе варијанта проп дефинише визуелни изглед поруке упозорења и одређује шему боја, икону и тежину фонта поруке на основу вредности коју јој проследите.
Тхе варијанта проп прихвата неколико вредности стрингова као нпр суптилно, чврст, лево-акценат, врхунски акценат, десно-акценат, и доњи акценат. Свака вредност представља другачији визуелни стил поруке упозорења.
Ево примера четири компоненте упозорења са различитим варијантама:
увоз Реаговати из'реаговати';
увоз {Алерт, АлертИцон, АлертДесцриптион, АлертТитле, Флек} из'@цхакра-уи/реагуј'функцијаАпликација() {
повратак ('центар' гап='3' правац='колона' мт='4'> 'успех' варијанта='чврст'> Добродошли!!!</AlertTitle> Лепо је имати те овде</AlertDescription>
</Alert>
'успех' варијанта='суптилан'> Добродошли!!!</AlertTitle> Лепо је имати те овде</AlertDescription>
</Alert>
'успех' варијанта='топ-акцент'> Добродошли!!!</AlertTitle> Лепо је имати те овде</AlertDescription>
</Alert>
'успех' варијанта='леви акценат'> Добродошли!!!</AlertTitle> Лепо је имати те овде</AlertDescription>
</Alert>
</Flex>
</div>
)
}
извозУобичајено Апликација
Приказивање блока кода изнад ће приказати прилагођено упозорење попут овог:
Прилагођавање ваших порука упозорења помоћу цлассНаме Проп
Уместо да се држите подразумеваног изгледа порука упозорења, можете га прилагодити користећи Назив класе проп. Ви користите Назив класе проп да бисте дефинисали ЦСС класу и применили свој прилагођени стил на поруку упозорења.
На пример:
увоз Реаговати из'реаговати';
увоз {Алерт, АлертИцон, АлертДесцриптион, АлертТитле} из'@цхакра-уи/реагуј'функцијаАпликација() {
повратак ('успех' цлассНаме='упозорење'> Добродошли!!!</AlertTitle> Лепо је имати те овде</AlertDescription>
</Alert>
</div>
)
}
извозУобичајено Апликација;
У овом примеру, компонента упозорења има ЦСС класу „упозорење“. Након што дефинишете ЦСС класу, можете дефинисати своје стилове у својој ЦСС датотеци.
Овако:
.алерт {
боја црвена;
фонт-фамили: цурсиве;
дисплеј: флек;
флек-дирецтион: колона;
јаз: 0.4рем;
}
Горњи код ће применити ЦСС стилове на компоненту упозорења. Ако сте упознати са реквизитима у стилу Цхакра корисничког интерфејса, требало би да их користите за стилизовање порука упозорења уместо за Назив класе проп.
Након примене горњих ЦСС стилова, компонента упозорења ће се приказати као што се види на слици испод:
Покретање порука упозорења као одговор на корисничке догађаје
Направили сте компоненту упозорења која доследно приказује поруку упозорења на екрану. Међутим, да бисте побољшали корисничко искуство, можете покренути поруку упозорења као одговор на одређене догађаје које корисник покрене, користећи ЈаваСцрипт слушаоце догађаја. Ови догађаји могу укључивати кликање на дугме, слање обрасца или наилазак на грешку.
Да бисте покренули вашу поруку упозорења као одговор на догађаје, користите стање Реацт и приказ подршка компоненти корисничког интерфејса Цхакра.
На пример:
увоз Реаговати из'реаговати';
увоз {Алерт, АлертИцон, АлертДесцриптион, АлертТитле, Буттон, ЦлосеБуттон} из'@цхакра-уи/реагуј'функцијаАпликација() {
конст [дисплаи, сетДисплаи] = Реацт.усеСтате('ниједан');функцијаобавестити() {
сетДисплаи('савијати');
}функцијаБлизу() {
сетДисплаи('ниједан');
}повратак (
"апликација">'успех' дисплаи={дисплаи} варијанта='чврст'> Добродошли!!!</AlertTitle> Лепо је имати те овде</AlertDescription> 'апсолутно' топ='6пк' десно='6пк' онЦлицк={цлосе}/>
</Alert>
извозУобичајено Апликација
Овај блок кода управља стањем приказа обавештења помоћу усеСтате кука. Поставља почетно стање приказа обавештења на „нема“, што сакрива обавештење.
Када корисник кликне на Дугме, то зове обавестити функција. Позивање функције нотифи мења вредност приказ стање са „ноне“ на „флек.“, чинећи обавештење видљивим.
Када корисник кликне на цлосеБуттон, позива функцију затварања. Враћа стање екрана у „нема“ што сакрива обавештење.
Сада можете креирати прилагодљива упозорења
Сада сте научили како да креирате прилагођено упозорење у вашој Реацт апликацији користећи Цхакра УИ. Са Цхакра УИ, креирање прилагођених упозорења у Реацт-у је лако и интуитивно, омогућавајући нам да пружимо јасне и концизне информације нашим корисницима. Цхакра УИ пружа многе друге прилагодљиве и доступне компоненте корисничког интерфејса које ће вам помоћи да направите сјајне Реацт апликације.