Chakra vam daje jednostavne komponente čistih, upotrebljivih stilova.
Oblikovanje aplikacija s prilagođenim CSS-om zabavno je sve dok projekt ne postane složeniji. Izazov leži u oblikovanju i održavanju dosljednog dizajna tijekom cijele aplikacije.
Iako još uvijek možete koristiti CSS, često je učinkovitije koristiti biblioteku za stiliziranje korisničkog sučelja kao što je Chakra UI. Ova biblioteka pruža brz i jednostavan način oblikovanja vaših aplikacija pomoću unaprijed definiranih komponenti korisničkog sučelja i pomoćnih rekvizita.
Početak rada s Chakra UI u React aplikacijama
Za početak Čakra korisničko sučelje, samo naprijed i, izradite osnovnu React aplikaciju koristeći create-react-app naredba. Alternativno, možete koristite Vite za izradu React projekta.
Zatim instalirajte ove ovisnosti:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionKôd ovog projekta možete pronaći u GitHub spremište.
Dodajte dobavljača teme Chakra
Nakon što ste instalirali ove ovisnosti, trebate omotati aplikaciju s
ChakraProvider. Davatelja možete dodati ili u svoj indeks.jsx, glavni.jsx, ili App.jsx kako slijedi:import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { ChakraProvider } from'@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root')).render(
</ChakraProvider>
</React.StrictMode>,
)
Omotavanje aplikacije s ChakraProvider je neophodan za pristup komponentama korisničkog sučelja Chakra i svojstvima stila u cijeloj aplikaciji.
Uključivanje/isključivanje različitih tema
Sučelje Chakra pruža zadanu unaprijed izgrađenu temu koja uključuje podršku za svijetle, tamne i sustavne načine boja. Međutim, možete dodatno prilagoditi teme korisničkog sučelja svoje aplikacije i druga svojstva stila unutar objekta teme kako je navedeno u Čakrina dokumentacija.
Za promjenu tamne i svijetle teme stvorite a komponente/ThemeToggler.jsx datoteka u src imenik i uključite sljedeći kod.
import React from'react'
import { useColorMode, Box, IconButton} from'@chakra-ui/react';
import { SunIcon, MoonIcon } from'@chakra-ui/icons'exportdefaultfunctionThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return ("center" py={4} > icon={colorMode 'light'? <MoonIcon />: <SunIcon />}
onClick={toggleColorMode}
variant="ghost"
/>Toggle Theme</h2>
</Box>
);
}
Sada samo naprijed i uvezite paket ikona:
npm i @chakra-ui/iconsThe ThemeToggler komponenta će prikazati gumb koji korisnicima omogućuje prebacivanje između svijetlih i tamnih tema u aplikaciji.
Ova komponenta pristupa trenutnom načinu rada u boji useColorMode kuka i koristi prebaciNačinBoje funkcija za prebacivanje između načina rada.
The IconButton komponenta preuzima karakteristike ikone, a istovremeno ima mogućnosti klikanja gumba.
Stvorite korisničko sučelje obrasca za prijavu
Stvorite novi Prijava.jsx datoteka u komponente imenik i dodajte mu sljedeći kod:
Prvo dodajte ove uvoze.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
Nakon uvoza ovih komponenti korisničkog sučelja, definirajte React funkcionalnu komponentu i komponente glavnog spremnika koji će sadržavati sve elemente korisničkog sučelja za prijavu.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
The Kutija komponenta prikazuje a div element—služi kao osnovni građevni blok na čijem se vrhu izgrađuju sve ostale komponente korisničkog sučelja Chakra. Savijati, s druge strane, je Box komponenta sa svojstvom prikaza postavljenim na savijati. To znači da možete koristiti flex svojstva za stiliziranje komponente.
I središnja i skupna komponenta su komponente izgleda, međutim, imaju male razlike u funkcionalnosti. Središnja komponenta odgovorna je za poravnavanje svih podređenih komponenti u središtu, dok Stack grupira elemente korisničkog sučelja zajedno i dodaje razmak između njih.
Sada, napravimo odjeljak zaglavlja obrasca. Komponenta zaglavlja će biti od velike pomoći za ovaj dio. Unutar komponente Stack dodajte ovaj kod.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> The VStack komponenta slaže svoje podređene elemente u okomitom smjeru. Zatim izradite komponentu kartice koja će sadržavati obrazac za prijavu i njegove elemente.
'#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
size="lg" borderRadius={8} boxShadow="lg"
>
type="submit"
bg='#2da44e'
color='white'
size='sm'
_hover={{ bg: '#2c974b' }}
_active={{ bg: '#298e46' }}
>
Sign in
</Button>
</Stack>
</form>
</CardBody>
</Card>
Samo naprijed i ažurirajte svoje App.jsx datoteku za uvoz prijave, kao i komponentu ThemeToggler.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Sjajno! Pokrenite razvojni poslužitelj za ažuriranje promjena.
npm run devSada, kada se stranica učita u pregledniku, početno će prikazati zadanu temu svijetlog načina rada.
Sada kliknite na Uključi/isključi temu gumb ikone za promjenu načina rada teme.
Upravljanje stanjem obrasca pomoću React kukica
U ovom trenutku obrazac za prijavu sadrži samo dva polja za unos i gumb za prijavu. Kako bismo ga učinili funkcionalnim, počnimo s implementacijom logike upravljanja stanjem koristeći React kuke.
Definirajte sljedeća stanja unutar funkcionalne komponente Prijava.
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [success, setSuccess] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);Zatim dodajte onChange funkcija rukovatelja koja će slušati promjene u poljima za unos, hvatati unose i ažurirati stanja e-pošte i lozinke u skladu s tim.
Dodajte ove naredbe koda u polja za unos.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}S ovim promjenama sada bilježite unose korisnika.
Implementacija provjere valjanosti obrazaca i rukovanje pogreškama s ugrađenim značajkama korisničkog sučelja Chakra
Sada dodajte funkciju rukovatelja koja će obraditi ulaze i vratiti odgovarajuće rezultate. Na oblik element otvaranja oznake, dodajte onSubmit funkcija rukovatelja kako slijedi.
Zatim definirajte rukovanjePošalji funkcija. Odmah ispod stanja koje ste definirali uključite sljedeći kod.
const handleSubmit = async event => {
event.preventDefault();
setIsLoading(true);
try {
await userLogin({ email, password });
setSuccess('Logged in successfully!');
setIsLoading(false);
setIsLoggedIn(true);
} catch (error) {
setError('Invalid username or password!');
setIsLoading(false);
setEmail('');
setPassword('');
}
};
Ovaj asinkroni rukovanjePošalji funkcija će se pokrenuti kada netko pošalje obrazac. Funkcija postavlja stanje učitavanja na istinito—simulirajući radnju obrade. Možete renderirati pokazivač učitavanja korisničkog sučelja Chakra kako biste korisniku pružili vizualni znak.
Štoviše, funkcija handleSubmit će pozvati prijava korisnika funkcija koja uzima e-poštu i lozinku kao parametre za njihovu provjeru.
Simulirajte API zahtjev za autentifikaciju
Kako biste provjerili jesu li unosi koje daje korisnik valjani, možete simulirati API poziv definiranjem prijava korisnika funkcija koja će provjeriti vjerodajnice za prijavu slično kao što bi to učinio pozadinski API.
Odmah ispod funkcije handleSubmit dodajte ovaj kod:
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};Ovaj kod definira asinkronu funkciju koja izvodi jednostavnu logiku provjere valjanosti.
Chakrine značajke korisničkog sučelja za rukovanje pogreškama.
Korisnicima možete pružiti odgovarajuće vizualne povratne informacije na temelju njihovih interakcija na obrascu pomoću Chakrinih komponenti povratnih informacija. Da biste to učinili, započnite s uvozom ovih komponenti iz Chakrine knjižnice korisničkog sučelja.
Alert, AlertIcon, AlertTitle, CircularProgressSada dodajte sljedeći kod točno ispod oznake otvaranja elementa obrasca.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Konačno, ažurirajte gumb za slanje kako biste uključili komponentu CircularProgress za učitavanje.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Evo što će korisnik vidjeti nakon što se uspješno prijavi:
Ako postoji pogreška u procesu prijave, trebali bi vidjeti ovakav odgovor:
Poboljšajte svoj razvojni proces pomoću korisničkog sučelja Chakra
Chakra UI pruža skup dobro dizajniranih i prilagodljivih komponenti korisničkog sučelja koje možete koristiti za brzu izgradnju React korisničko sučelje. Bez obzira na to koliko su vaši dizajni jednostavni ili složeni, Chakra ima komponente za gotovo sva sučelja zadaci.