Uz ovu biblioteku dobivajte dosljedna, atraktivna upozorenja na cijeloj svojoj React stranici.
Upozorenja su poruke prikazane na web stranici/web aplikaciji za prenošenje važnih informacija korisniku. Oni igraju ključnu ulogu u web aplikacijama. Postoji mnogo načina za stvaranje upozorenja u Reactu; Chakra UI čini proces lakim i učinkovitim.
Chakra UI je popularna biblioteka komponenti za React koja pruža skup prilagodljivih i pristupačnih komponenti korisničkog sučelja.
Instaliranje korisničkog sučelja Chakra
Za korištenje biblioteke korisničkog sučelja Chakra, jedna od mnogih biblioteka react komponenti, prvo ga morate instalirati. Možete ga instalirati pokretanjem sljedeće naredbe terminala u direktoriju vašeg node.js projekta:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternativno, možete instalirati Chakra UI koristeći Yarn. Da biste to učinili, pokrenite sljedeću naredbu:
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Postavljanje korisničkog sučelja Chakra
Nakon instaliranja korisničkog sučelja Chakra, morate ga učiniti dostupnim u svojoj aplikaciji. Da biste to učinili, morate postaviti ChakraProvider komponenta.
The ChakraProvider komponenta je komponenta najviše razine koju pruža biblioteka korisničkog sučelja Chakra. Obuhvaća cijelu aplikaciju i daje temu i stilski kontekst svim njezinim komponentama.
Za postavljanje ChakraProvider komponentu, uvezite je iz @chakra-ui/reagiraj:
uvoz Reagirati iz'reagirati'
uvoz ReactDOM iz'react-dom/client'
uvoz aplikacija iz'./Aplikacija'
uvoz { ChakraProvider } iz'@chakra-ui/react'
ReactDOM.createRoot(dokument.getElementById('korijen') kao HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
The ChakraProvider komponenta podržava a tema oslonac Prolazeći tema oslonac za ChakraProvider komponenta osigurava da sve Chakra UI komponente u aplikaciji mogu pristupiti danoj temi i kontekstu stila. The tema oslonac nije obavezan; ako ga ne položite, Chakra UI koristit će zadanu temu.
Stvaranje prilagođenog upozorenja pomoću komponenti upozorenja
Sučelje Chakra nudi četiri komponente koje vam omogućuju stvaranje prilagođenog upozorenja: uzbuna, Ikona upozorenja, AlertTitle, i Opis upozorenja.
Da biste stvorili svoju poruku upozorenja, uvezite ove komponente iz biblioteke korisničkog sučelja Chakra i koristite ih na sljedeći način:
uvoz Reagirati iz'reagirati';
uvoz {Alert, AlertIcon, AlertDescription, AlertTitle} iz'@chakra-ui/react'funkcijaaplikacija() {
povratak ('uspjeh'> Dobrodošli!!!</AlertTitle> Lijepo je što ste ovdje</AlertDescription>
</Alert>
</div>
)
}
izvozzadano aplikacija
Nakon uvoza komponenti, uzbuna komponenta prikazuje poruku korisniku. Ono ima status prop postavljen na "uspjeh", što označava da je poruka uspješna poruka.
Postoje još tri statusa: "info", "greška" i "upozorenje". Shema boja i ikona koju upozorenje koristi ovisit će o statusu poruke.
The uzbuna komponenta sadrži tri djece: Ikona upozorenja, AlertTitle, i Opis upozorenja. The Ikona upozorenja komponenta prikazuje malu ikonu pored poruke, AlertTitle prikazuje glavnu poruku i Opis upozorenja prikazuje detaljniji opis poruke.
Prethodni blok koda će generirati upozorenje koje izgleda ovako:
Prilagodba poruka upozorenja pomoću opcije Variant Prop
Da biste prilagodili izgled poruke upozorenja, koristite varijanta oslonac od uzbuna komponenta. The varijanta prop definira vizualni izgled poruke upozorenja i određuje shemu boja, ikonu i težinu fonta poruke na temelju vrijednosti koju joj proslijedite.
The varijanta prop prihvaća nekoliko vrijednosti niza kao što su suptilan, čvrsta, lijevonaglasni, vrh-naglasak, pravo-naglasak, i donji naglasak. Svaka vrijednost predstavlja drugačiji vizualni stil poruke upozorenja.
Evo primjera četiri komponente upozorenja s različitim varijantama:
uvoz Reagirati iz'reagirati';
uvoz {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} iz'@chakra-ui/react'funkcijaaplikacija() {
povratak ('centar' praznina='3' smjer='stupac' mt='4'> 'uspjeh' varijanta='čvrsto'> Dobrodošli!!!</AlertTitle> Lijepo je što ste ovdje</AlertDescription>
</Alert>
'uspjeh' varijanta='suptilan'> Dobrodošli!!!</AlertTitle> Lijepo je što ste ovdje</AlertDescription>
</Alert>
'uspjeh' varijanta='gornji naglasak'> Dobrodošli!!!</AlertTitle> Lijepo je što ste ovdje</AlertDescription>
</Alert>
'uspjeh' varijanta='lijevi naglasak'> Dobrodošli!!!</AlertTitle> Lijepo je što ste ovdje</AlertDescription>
</Alert>
</Flex>
</div>
)
}
izvozzadano aplikacija
Renderiranje gornjeg bloka koda prikazat će prilagođeno upozorenje poput ovog:
Prilagodba vaših poruka upozorenja pomoću className Prop
Umjesto da se držite zadanog izgleda poruka upozorenja, možete ga prilagoditi pomoću naziv klase oslonac Vi koristite naziv klase prop za definiranje CSS klase i primjenu prilagođenog stila na poruku upozorenja.
Na primjer:
uvoz Reagirati iz'reagirati';
uvoz {Alert, AlertIcon, AlertDescription, AlertTitle} iz'@chakra-ui/react'funkcijaaplikacija() {
povratak ('uspjeh' ime klase='upozorenje'> Dobrodošli!!!</AlertTitle> Lijepo je što ste ovdje</AlertDescription>
</Alert>
</div>
)
}
izvozzadano aplikacija;
U ovom primjeru, komponenta upozorenja ima CSS klasu "upozorenje". Nakon definiranja CSS klase, možete definirati svoje stilove u svojoj CSS datoteci.
ovako:
.alert {
boja: crvena;
obitelj-fontova: kurziv;
zaslon: savitljiv;
smjer savijanja: stupac;
jaz: 0.4rem;
}
Gornji kod će primijeniti CSS stilove na komponentu upozorenja. Ako ste upoznati sa stilskim rekvizitima Chakra UI, trebali biste ih koristiti za stiliziranje poruka upozorenja umjesto naziv klase oslonac
Nakon primjene gornjih CSS stilova, komponenta upozorenja će se prikazati kao što se vidi na slici ispod:
Pokretanje poruka upozorenja kao odgovor na korisničke događaje
Napravili ste komponentu upozorenja koja dosljedno prikazuje poruku upozorenja na ekranu. Međutim, kako biste poboljšali korisničko iskustvo, možete pokrenuti poruku upozorenja kao odgovor na određene događaje koje korisnik pokrene, koristeći JavaScript slušatelje događaja. Ti događaji mogu uključivati klik na gumb, slanje obrasca ili nailazak na pogrešku.
Da biste pokrenuli svoju poruku upozorenja kao odgovor na događaje, upotrijebite stanje React i prikaz oslonac komponenti korisničkog sučelja Chakra.
Na primjer:
uvoz Reagirati iz'reagirati';
uvoz {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} iz'@chakra-ui/react'funkcijaaplikacija() {
konst [display, setDisplay] = React.useState('ništa');funkcijaobavijestiti() {
setDisplay('savijati');
}funkcijaZatvoriti() {
setDisplay('ništa');
}povratak (
"aplikacija">'uspjeh' prikaz={prikaz} varijanta='čvrsto'> Dobrodošli!!!</AlertTitle> Lijepo je što ste ovdje</AlertDescription> 'apsolutno' vrh='6px' desno='6px' onClick={close}/>
</Alert>
izvozzadano aplikacija
Ovaj blok koda upravlja stanjem prikaza obavijesti s useState kuka. Postavlja početno stanje prikaza obavijesti na "ništa", čime se obavijest skriva.
Kada korisnik klikne na Dugme, naziva se obavijestiti funkcija. Pozivanjem funkcije obavijesti mijenja se vrijednost prikaz stanje od "none" do "flex.", čineći obavijest vidljivom.
Kada korisnik klikne na closeButton, poziva funkciju zatvaranja. Mijenja stanje prikaza natrag u "ništa" čime se sakriva obavijest.
Sada možete izraditi prilagodljiva upozorenja
Sada ste naučili kako stvoriti prilagođeno upozorenje u svojoj React aplikaciji koristeći Chakra UI. Uz Chakra UI, stvaranje prilagođenih upozorenja u Reactu jednostavno je i intuitivno, što nam omogućuje da našim korisnicima pružimo jasne i sažete informacije. Chakra UI pruža mnoge druge prilagodljive i pristupačne komponente korisničkog sučelja koje vam pomažu u izradi sjajnih React aplikacija.