Chakra pakub lihtsaid komponente puhta ja kasutatava stiiliga.
Rakenduste kujundamine kohandatud CSS-iga on lõbus, kuni projekt muutub keerukamaks. Väljakutse seisneb stiili kujundamises ja ühtse disaini säilitamises kogu rakenduse vältel.
Kuigi saate endiselt kasutada CSS-i, on sageli tõhusam kasutada kasutajaliidese stiiliga teeki, nagu Chakra UI. See teek pakub kiiret ja probleemivaba viisi oma rakenduste stiili kujundamiseks, kasutades eelmääratletud kasutajaliidese komponente ja utiliidi rekvisiite.
Chakra kasutajaliidese kasutamise alustamine Reacti rakendustes
Alustuseks Chakra kasutajaliides, mine edasi ja luua põhirakendus React, kasutades rakendust loo-reageeri käsk. Teise võimalusena saate kasutage Reacti projekti loomiseks Vitet.
Järgmisena installige need sõltuvused:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionSelle projekti koodi leiate sellest GitHub hoidla.
Lisage Chakra teemapakkuja
Pärast nende sõltuvuste installimist peate rakenduse pakkima ChakraProvider. Saate lisada teenusepakkuja kas oma index.jsx, main.jsx, või App.jsx järgnevalt:
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>,
)
Rakenduse pakkimine ChakraProvider on vajalik Chakra kasutajaliidese komponentidele ja stiiliomadustele juurdepääsuks kogu rakenduse vältel.
Erinevate teemade sisse- ja väljalülitamine
Chakra kasutajaliides pakub vaikimisi eelehitatud teemat, mis hõlmab heledate, tumedate ja süsteemi värvirežiimide tuge. Siiski saate oma rakenduse kasutajaliidese teemasid ja muid teemaobjekti stiili atribuute veelgi kohandada, nagu on täpsustatud punktis Chakra dokumentatsioon.
Tumedate ja heledate teemade vahetamiseks looge a komponendid/ThemeToggler.jsx faili src kataloogi ja lisage järgmine kood.
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>
);
}
Nüüd jätkake ja importige ikoonide pakett:
npm i @chakra-ui/iconsThe ThemeToggler komponent renderdab nupu, mis võimaldab kasutajatel rakenduses heledate ja tumedate teemade vahel lülituda.
See komponent avab praeguse värvirežiimi kasutage ColorMode'i konks ja kasutab Lülitage värvirežiim sisse funktsioon režiimide vahetamiseks.
The IconButton komponent omandab ikooni omadused, samas kui sellel on ka nupu klõpsatavad võimalused.
Looge sisselogimisvormi kasutajaliides
Loo uus Login.jsx faili komponendid kataloogi ja lisage sellele järgmine kood:
Esmalt lisage need impordid.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
Pärast nende kasutajaliidese komponentide importimist määratlege funktsionaalne komponent React ja peamised konteineri komponendid, mis sisaldavad kõiki sisselogimiskasutajaliidese elemente.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
The Kast komponent renderdab a div element – see toimib aluskivina, mille peale ehitate kõik teised Chakra kasutajaliidese komponendid. Flex, teisest küljest on Box komponent, mille kuvamise atribuut on seatud väärtusele painduv. See tähendab, et saate komponendi stiilimiseks kasutada paindeomadusi.
Nii kesk- kui ka virnakomponendid on paigutuskomponendid, kuid neil on funktsionaalsuses väikesed erinevused. Keskkomponent vastutab kõigi alamkomponentide joondamise eest oma keskel, samas kui Stack rühmitab kasutajaliidese elemendid kokku ja lisab nende vahele tühikuid.
Nüüd koostame vormi päise osa. Päise komponent on selle osa jaoks väga kasulik. Lisage see kood virnakomponendi sisse.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> The VStack komponent virnastab oma alamelemendid vertikaalsuunas. Järgmisena looge kaardikomponent, mis sisaldab sisselogimisvormi ja selle 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>
Jätkake ja värskendage oma App.jsx faili sisselogimise ja komponendi ThemeToggler importimiseks.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Suurepärane! Muudatuste värskendamiseks käivitage arendusserver.
npm run devNüüd, kui leht laaditakse brauserisse, kuvatakse see algselt valgusrežiimi vaiketeema.
Nüüd klõpsake nuppu Lülitage teema sisse ikooni nuppu teemarežiimi vahetamiseks.
Vormi oleku haldamine React Hookide abil
Praegu sisaldab sisselogimisvorm ainult kahte sisestusvälja ja sisselogimisnuppu. Et see toimiks, alustame olekujuhtimise loogika rakendamisest kasutades Reacti konkse.
Funktsionaalses komponendis Login määratlege järgmised olekud.
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);Järgmisena lisage onChange käitleja funktsioon, mis kuulab sisestusväljade muudatusi, salvestab sisendid ning värskendab vastavalt e-posti ja parooli olekuid.
Lisage need koodilaused sisestusväljadele.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Nende muudatustega jäädvustate nüüd kasutaja sisestusi.
Vormi kinnitamise ja tõrkekäsitluse rakendamine Chakra kasutajaliidese sisseehitatud funktsioonidega
Nüüd lisage töötleja funktsioon, mis töötleb sisendeid ja tagastab sobivad tulemused. peal vormi elemendi avamise silt, lisage on Submit käitleja funktsiooni järgmiselt.
Järgmisena määratlege käepide Esita funktsiooni. Otse määratletud olekute alla lisage järgmine kood.
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('');
}
};
See asünkroonne käepide Esita funktsioon käivitub, kui keegi vormi esitab. Funktsioon määrab laadimisolekuks tõene – simuleerides töötlemistoimingut. Saate kasutajale visuaalse vihje andmiseks renderdada Chakra kasutajaliidese laadimisvurri.
Veelgi enam, funktsioon handleSubmit kutsub esile kasutaja sisselogimine funktsioon, mis võtab nende kinnitamiseks parameetritena meili ja parooli.
Simuleerige autentimise API taotlust
Kontrollimaks, kas kasutaja sisestatud sisendid on õiged, saate simuleerida API-kutset, määratledes kasutaja sisselogimine funktsioon, mis kontrollib sisselogimismandaate sarnaselt taustarakenduse API-ga.
Lisage see kood otse funktsiooni handleSubmit alla:
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};See kood määratleb asünkroonse funktsiooni, mis teostab lihtsat loogika valideerimise loogikat.
Chakra vigade käsitlemise kasutajaliidese funktsioonid.
Chakra tagasiside komponente kasutades saate anda kasutajatele sobivat visuaalset tagasisidet nende vormis interaktsioonide põhjal. Selleks importige need komponendid Chakra kasutajaliidese teegist.
Alert, AlertIcon, AlertTitle, CircularProgressNüüd lisage järgmine kood otse vormielemendi avamärgendi alla.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Lõpuks värskendage saatmisnuppu, et lisada laadimisvurr, CircularProgress, komponent.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Pärast edukat sisselogimist näeb kasutaja järgmist:
Kui sisselogimisprotsessis ilmneb tõrge, peaksid nad nägema sellist vastust:
Parandage oma arendusprotsessi Chakra kasutajaliidese abil
Chakra kasutajaliides pakub hästi läbimõeldud ja kohandatavate kasutajaliidese komponentide komplekti, mida saate kasutada kiireks koostamiseks Reageeri kasutajaliidesed. Olenemata sellest, kui lihtsad või keerulised on teie kujundused, on Chakral komponendid peaaegu kõigi kasutajaliidese jaoks ülesandeid.