Selle teegi abil saate oma Reacti saidil järjepidevaid ja atraktiivseid hoiatusi.
Märguanded on veebisaidil/veebirakenduses kuvatavad sõnumid, mis edastavad kasutajale olulist teavet. Nad mängivad veebirakendustes üliolulist rolli. Reactis on märguannete loomiseks palju võimalusi; Chakra kasutajaliides muudab protsessi lihtsaks ja tõhusaks.
Chakra UI on Reacti populaarne komponentide teek, mis pakub kohandatavate ja juurdepääsetavate kasutajaliidese komponentide komplekti.
Chakra kasutajaliidese installimine
Chakra kasutajaliidese raamatukogu kasutamiseks üks paljudest reageerivate komponentide raamatukogudest, peate selle esmalt installima. Saate selle installida, käivitades oma node.js projekti kataloogis järgmise terminali käsu:
npm i @chakra-ui/reage @emotsioon/reage @emotsioon/stiilis kaadri-liikumine
Teise võimalusena saate installida Chakra kasutajaliidese, kasutades lõnga. Selleks käivitage järgmine käsk:
lõng lisa @chakra-ui/react @emotsioon/reage @emotsioon/stiilis framer-motion
Chakra kasutajaliidese seadistamine
Pärast Chakra kasutajaliidese installimist peate selle oma rakenduses kättesaadavaks tegema. Selleks peate seadistama ChakraProvider komponent.
The ChakraProvider komponent on tipptasemel komponent, mida Chakra UI teek pakub. See ümbritseb kogu rakenduse ja pakub kõigile selle komponentidele teema ja stiilikonteksti.
Et seadistada ChakraProvider komponent, importige see @chakra-ui/reageerida:
importida Reageerige alates'reageeri'
importida ReactDOM alates'reageerimis-/klient'
importida Rakendus alates'./Rakendus'
importida { ChakraProvider } alates"@chakra-ui/reageerida"
ReactDOM.createRoot(dokument.getElementById("juur") nagu HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
The ChakraProvider komponent toetab a teema prop. Möödudes teema toetada ChakraProvider komponent tagab, et kõik rakenduse Chakra kasutajaliidese komponendid pääsevad juurde pakutavale teema- ja stiilikontekstile. The teema rekvisiit on vabatahtlik; kui te seda ei läbi, kasutab Chakra kasutajaliides vaiketeemat.
Kohandatud hoiatuse loomine hoiatuskomponentide abil
Chakra kasutajaliides pakub nelja komponenti, mis võimaldavad teil luua kohandatud hoiatuse: Hoiatus, AlertIcon, AlertTitleja AlertDescription.
Hoiatusteate loomiseks importige need komponendid Chakra kasutajaliidese teegist ja kasutage neid järgmiselt.
importida Reageerige alates'reageeri';
importida {Alert, AlertIcon, AlertDescription, AlertTitle} alates"@chakra-ui/reageerida"funktsiooniRakendus() {
tagasi ('edu'> Tere tulemast!!!</AlertTitle> Tore, et sa siin oled </AlertDescription>
</Alert>
</div>
)
}
eksportidavaikimisi Rakendus
Pärast komponentide importimist Hoiatus komponent kuvab kasutajale sõnumi. Sellel on olek prop seatud väärtusele "edu", mis näitab, et sõnum on edusõnum.
Olekuid on veel kolm: "teave", "viga" ja "hoiatus". Hoiatuse kasutatav värviskeem ja ikoon sõltuvad sõnumi olekust.
The Hoiatus komponent sisaldab kolme last: AlertIcon, AlertTitleja AlertDescription. The AlertIcon komponent kuvab sõnumi kõrval väikese ikooni, AlertTitle kuvab põhisõnumi ja AlertDescription kuvab sõnumi üksikasjalikuma kirjelduse.
Eelmine koodiplokk genereerib hoiatuse, mis näeb välja järgmine:
Hoiatusteadete kohandamine Variant Prop abil
Hoiatusteate välimuse kohandamiseks kasutage nuppu variant prop of the Hoiatus komponent. The variant prop määrab hoiatusteate visuaalse välimuse ja määrab sõnumi värviskeemi, ikooni ja fondi kaalu vastavalt sellele edastatavale väärtusele.
The variant prop aktsepteerib mitmeid stringiväärtusi, näiteks peen, tahke, vasak-aktsent, top-aktsent, parem-aktsentja põhja-aktsent. Iga väärtus tähistab hoiatusteate erinevat visuaalset stiili.
Siin on näide neljast erineva variandiga hoiatuskomponendist.
importida Reageerige alates'reageeri';
importida {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} alates"@chakra-ui/reageerida"funktsiooniRakendus() {
tagasi ('Keskus' vahe='3' suund='veerg' mt='4'> 'edu' variant='kindel'> Tere tulemast!!!</AlertTitle> Tore, et sa siin oled </AlertDescription>
</Alert>
'edu' variant='peen'> Tere tulemast!!!</AlertTitle> Tore, et sa siin oled </AlertDescription>
</Alert>
'edu' variant="ülemine aktsent"> Tere tulemast!!!</AlertTitle> Tore, et sa siin oled </AlertDescription>
</Alert>
'edu' variant="vasak aktsent"> Tere tulemast!!!</AlertTitle> Tore, et sa siin oled </AlertDescription>
</Alert>
</Flex>
</div>
)
}
eksportidavaikimisi Rakendus
Ülaltoodud koodiploki renderdamisel kuvatakse selline kohandatud hoiatus:
Hoiatusteadete kohandamine, kasutades klassinime prop
Selle asemel, et järgida hoiatusteadete vaikimisi välimust, saate seda kohandada, kasutades klassi nimi prop. Sa kasutad klassi nimi prop CSS-klassi määratlemiseks ja oma kohandatud stiili rakendamiseks hoiatussõnumile.
Näiteks:
importida Reageerige alates'reageeri';
importida {Alert, AlertIcon, AlertDescription, AlertTitle} alates"@chakra-ui/reageerida"funktsiooniRakendus() {
tagasi ('edu' klassinimi='hoiatus'> Tere tulemast!!!</AlertTitle> Tore, et sa siin oled </AlertDescription>
</Alert>
</div>
)
}
eksportidavaikimisi Rakendus;
Selles näites on hoiatuskomponendil CSS-i klass „hoiatus”. Pärast CSS-klassi määratlemist saate oma stiilid oma CSS-failis määratleda.
Nagu nii:
.alert {
värv: punane;
font-perekond: kursiiv;
ekraan: flex;
paindesuund: veerg;
vahe: 0.4rem;
}
Ülaltoodud kood rakendab hoiatuskomponendile CSS-i stiile. Kui olete tuttav Chakra kasutajaliidese stiilis rekvisiitidega, peaksite neid kasutama hoiatusteadete kujundamiseks klassi nimi prop.
Pärast ülaltoodud CSS-stiilide rakendamist kuvatakse hoiatuskomponent nagu alloleval pildil:
Hoiatusteadete käivitamine vastuseks kasutaja sündmustele
Olete loonud hoiatuskomponendi, mis kuvab ekraanil pidevalt hoiatusteate. Kasutajakogemuse parandamiseks saate aga käivitada hoiatusteate vastuseks konkreetsetele sündmustele, mille kasutaja algatab, kasutades JavaScripti sündmuste kuulajaid. Need sündmused võivad hõlmata nupul klõpsamist, vormi esitamist või vea ilmnemist.
Hoiatusteate käivitamiseks vastuseks sündmustele kasutage Reaktsiooni olekut ja kuva Chakra kasutajaliidese komponentide tugi.
Näiteks:
importida Reageerige alates'reageeri';
importida {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} alates"@chakra-ui/reageerida"funktsiooniRakendus() {
konst [display, setDisplay] = React.useState('mitte ükski');funktsiooniteatama() {
setDisplay('painduma');
}funktsiooniSulge() {
setDisplay('mitte ükski');
}tagasi (
"rakendus">'edu' display={kuva} variant='kindel'> Tere tulemast!!!</AlertTitle> Tore, et sa siin oled </AlertDescription> 'absoluutne' ülemine ='6px' õige ='6px' onClick={close}/>
</Alert>
eksportidavaikimisi Rakendus
See koodiplokk haldab teavituskuva olekut rakendusega useState konks. See seab teavituskuva algolekuks "puudub", mis peidab teate.
Kui kasutaja klõpsab nuppu Nupp, kutsub see üles teatama funktsiooni. Teavitusfunktsiooni kutsumine muudab funktsiooni väärtust kuva seadke "puudub" kuni "flex", muutes teatise nähtavaks.
Kui kasutaja klõpsab nuppu sulgemisnupp, kutsub see sulgemisfunktsiooni. See muudab ekraani oleku tagasi "puudub", mis peidab teatise.
Nüüd saate luua kohandatavaid hoiatusi
Nüüd olete õppinud, kuidas Chakra kasutajaliidese abil oma Reacti rakenduses kohandatud märguannet luua. Chakra kasutajaliidese abil on kohandatud hoiatuste loomine Reactis lihtne ja intuitiivne, võimaldades meil kasutajatele selget ja ülevaatlikku teavet pakkuda. Chakra kasutajaliides pakub palju muid kohandatavaid ja juurdepääsetavaid kasutajaliidese komponente, mis aitavad teil luua suurepäraseid Reacti rakendusi.
