Sukurkite pasirinktinius įspėjimus savo „React“ programoje naudodami „Chakra“ vartotojo sąsają

Įspėjimai yra pranešimai, rodomi svetainėje / žiniatinklio programoje, siekiant perduoti vartotojui svarbią informaciją. Jie atlieka lemiamą vaidmenį interneto programose. Yra daug būdų, kaip sukurti įspėjimus „React“; Chakra vartotojo sąsaja palengvina ir efektyvina procesą.

„Chakra“ vartotojo sąsaja yra populiari „React“ komponentų biblioteka, kurioje pateikiamas tinkinamų ir pasiekiamų vartotojo sąsajos komponentų rinkinys.

Chakra vartotojo sąsajos diegimas

Norėdami naudoti Chakra UI biblioteką, viena iš daugelio reaguojančių komponentų bibliotekų, pirmiausia turite jį įdiegti. Jį galite įdiegti paleisdami šią terminalo komandą savo node.js projekto kataloge:

npm i @chakra-ui/reaguoti @emocija/reaguoti @emocija/stilingas kadravimo judesys

Arba galite įdiegti „Chakra“ vartotojo sąsają naudodami verpalus. Norėdami tai padaryti, paleiskite šią komandą:

verpalai pridėti @chakra-ui/react @emotion/react @emotion/styled framer-motion

„Chakra“ vartotojo sąsajos nustatymas

Įdiegę „Chakra“ vartotojo sąsają, turite padaryti ją prieinamą savo programoje. Norėdami tai padaryti, turite nustatyti ChakraProvider komponentas.

The ChakraProvider komponentas yra aukščiausio lygio komponentas, kurį teikia Chakra UI biblioteka. Tai apima visą programą ir suteikia temą bei stiliaus kontekstą visiems jos komponentams.

Norėdami nustatyti ChakraProvider komponentą, importuokite jį iš @chakra-ui/reaguoti:

importuoti Reaguoti iš'reaguoti'
importuoti ReactDOM iš'react-dom/client'
importuoti Programėlė iš„./Programa“
importuoti { ChakraProvider } iš„@chakra-ui/reaguoti“
ReactDOM.createRoot(dokumentas.getElementById("šaknis") kaip HTMLElement).render(



 </ChakraProvider>
 </React.StrictMode>
)

The ChakraProvider komponentas palaiko a tema prop. Pravažiuojant tema atrama prie ChakraProvider komponentas užtikrina, kad visi programos Chakra UI komponentai galėtų pasiekti pateiktą temą ir stiliaus kontekstą. The tema rekvizitas yra neprivalomas; jei jos neišlaikysite, „Chakra“ vartotojo sąsaja naudos numatytąją temą.

Pasirinktinio įspėjimo kūrimas naudojant įspėjimo komponentus

„Chakra UI“ siūlo keturis komponentus, leidžiančius sukurti pasirinktinį įspėjimą: Budrus, AlertIcon, AlertTitle, ir AlertDescription.

Norėdami sukurti įspėjimo pranešimą, importuokite šiuos komponentus iš Chakra UI bibliotekos ir naudokite juos taip:

importuoti Reaguoti iš'reaguoti';
importuoti {Alert, AlertIcon, AlertDescription, AlertTitle} iš„@chakra-ui/reaguoti“
funkcijaProgramėlė() {
grąžinti (



'sėkmė'>

Sveiki atvykę!!!</AlertTitle>
Smagu, kad tu čia </AlertDescription>
 </Alert>
 </div>
 )
}
eksportuotinumatytas Programėlė

Importavus komponentus, Budrus komponentas rodo pranešimą vartotojui. Tai turi statusą rekvizitas nustatytas į „sėkmė“, o tai rodo, kad pranešimas yra sėkmės pranešimas.

Yra trys kitos būsenos: „informacija“, „klaida“ ir „įspėjimas“. Spalvų schema ir piktograma, kurią naudos įspėjimas, priklausys nuo pranešimo būsenos.

The Budrus komponente yra trys vaikai: AlertIcon, AlertTitle, ir AlertDescription. The AlertIcon komponentas rodo mažą piktogramą šalia pranešimo, AlertTitle rodomas pagrindinis pranešimas ir AlertDescription rodomas išsamesnis pranešimo aprašymas.

Ankstesnis kodo blokas sugeneruos įspėjimą, kuris atrodys taip:

Įspėjimų pranešimų pritaikymas naudojant variantą Prop

Norėdami tinkinti įspėjimo pranešimo išvaizdą, naudokite variantas rekvizitas Budrus komponentas. The variantas rekvizitas apibrėžia įspėjimo pranešimo vaizdinę išvaizdą ir nustato pranešimo spalvų schemą, piktogramą ir šrifto svorį pagal jam perduodamą reikšmę.

The variantas prop priima keletą eilučių reikšmių, tokių kaip subtilus, kietas, kairysis kirtis, viršutinis akcentas, dešinysis kirtis, ir apatinis akcentas. Kiekviena reikšmė reiškia skirtingą įspėjimo pranešimo vaizdinį stilių.

Štai keturių įspėjimo komponentų su skirtingais variantais pavyzdys:

importuoti Reaguoti iš'reaguoti';
importuoti {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} iš„@chakra-ui/reaguoti“
funkcijaProgramėlė() {
grąžinti (



'centras' tarpas ='3' kryptis ='stulpelis' mt='4'>
'sėkmė' variantas='kietas'>

Sveiki atvykę!!!</AlertTitle>
Smagu, kad tu čia </AlertDescription>
 </Alert>

'sėkmė' variantas='subtilus'>

Sveiki atvykę!!!</AlertTitle>
Smagu, kad tu čia </AlertDescription>
 </Alert>
'sėkmė' variantas="viršutinis akcentas">

Sveiki atvykę!!!</AlertTitle>
Smagu, kad tu čia </AlertDescription>
 </Alert>
'sėkmė' variantas="kairiojo kirčio">

Sveiki atvykę!!!</AlertTitle>
Smagu, kad tu čia </AlertDescription>
 </Alert>
 </Flex>
 </div>
 )
}
eksportuotinumatytas Programėlė

Pateikus aukščiau esantį kodo bloką, bus rodomas toks tinkintas įspėjimas:

Įspėjimo pranešimų pritaikymas naudojant klasės pavadinimo pasiūlymą

Užuot laikydamiesi numatytosios įspėjimo pranešimų išvaizdos, galite ją tinkinti naudodami klasės pavadinimas prop. Jūs naudojate klasės pavadinimas pasiūlymas, kad apibrėžtumėte CSS klasę ir pritaikytumėte savo pasirinktinį stilių įspėjimo pranešimui.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti {Alert, AlertIcon, AlertDescription, AlertTitle} iš„@chakra-ui/reaguoti“
funkcijaProgramėlė() {
grąžinti (



'sėkmė' className='budrus'>

Sveiki atvykę!!!</AlertTitle>
Smagu, kad tu čia </AlertDescription>
 </Alert>
 </div>
 )
}
eksportuotinumatytas Programėlė;

Šiame pavyzdyje įspėjimo komponentas turi CSS klasę „alert“. Apibrėžę CSS klasę, galite apibrėžti savo stilius savo CSS faile.

Taip kaip:

.budrus {
 spalva: raudona;
 šriftų šeima: kursyvus;
 ekranas: lankstus;
 lankstumo kryptis: stulpelis;
 tarpas: 0.4rem;
}

Anksčiau pateiktas kodas įspėjimo komponentui taikys CSS stilius. Jei esate susipažinę su „Chakra UI“ stiliaus rekvizitais, turėtumėte juos naudoti, kad stilizuotų įspėjimo pranešimus, o ne klasės pavadinimas prop.

Pritaikius aukščiau nurodytus CSS stilius, įspėjimo komponentas bus rodomas taip, kaip parodyta toliau pateiktame paveikslėlyje:

Įspėjimo pranešimų suaktyvinimas reaguojant į vartotojo įvykius

Sukūrėte įspėjimo komponentą, kuris nuosekliai rodo įspėjimo pranešimą ekrane. Tačiau norėdami pagerinti naudotojo patirtį, galite suaktyvinti įspėjimo pranešimą reaguodami į konkrečius vartotojo inicijuotus įvykius, naudojant JavaScript įvykių klausytojus. Šie įvykiai gali būti mygtuko paspaudimas, formos pateikimas arba klaida.

Norėdami suaktyvinti įspėjimo pranešimą reaguojant į įvykius, naudokite Reagavimo būseną ir ekranas Chakra UI komponentų rekvizitas.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} iš„@chakra-ui/reaguoti“
funkcijaProgramėlė() {
konst [display, setDisplay] = React.useState('nė vienas');
funkcijapranešti() {
 setDisplay("lankstyti");
 }
funkcijaUždaryti() {
 setDisplay('nė vienas');
 }
grąžinti (

"programėlė">
'sėkmė' display={display} variantas='kietas'>

Sveiki atvykę!!!</AlertTitle>
Smagu, kad tu čia </AlertDescription>
'absoliutus' viršuje ='6px' teisingai ='6px' onClick={close}/>
 </Alert>

'4'>Spustelėkite mane</Button>
 </div>
 )
}
eksportuotinumatytas Programėlė

Šis kodo blokas valdo pranešimų rodymo būseną su useState kabliukas. Pradinė pranešimų rodymo būsena nustatoma į „nėra“, o tai paslepia pranešimą.

Kai vartotojas spustelėja Mygtukas, jis vadina pranešti funkcija. Iškvietus pranešimo funkciją, pakeičiama reikšmė ekranas nustatykite nuo „nėra“ iki „lanksti“, kad pranešimas būtų matomas.

Kai vartotojas spustelėja Uždaryti mygtuką, ji vadina uždarymo funkciją. Jis pakeičia ekrano būseną atgal į „nėra“, o tai paslepia pranešimą.

Dabar galite sukurti pritaikomus įspėjimus

Dabar jūs sužinojote, kaip sukurti pasirinktinį įspėjimą „React“ programoje naudodami „Chakra“ vartotojo sąsają. Naudojant „Chakra“ vartotojo sąsają, tinkintų įspėjimų kūrimas „React“ yra paprastas ir intuityvus, todėl naudotojams galime pateikti aiškią ir glaustą informaciją. „Chakra“ vartotojo sąsajoje yra daug kitų tinkinamų ir pasiekiamų vartotojo sąsajos komponentų, padedančių kurti puikias „React“ programas.