Kako zgraditi uporabniku prijazne obrazce z uporabniškim vmesnikom Chakra v Reactu

Oblikovanje aplikacij s CSS po meri je zabavno, dokler projekt ne postane kompleksnejši. Izziv je v oblikovanju in ohranjanju doslednega dizajna v celotni aplikaciji.

Čeprav še vedno lahko uporabljate CSS, je pogosto bolj učinkovito uporabiti knjižnico za oblikovanje uporabniškega vmesnika, kot je Chakra UI. Ta knjižnica omogoča hiter in enostaven način oblikovanja vaših aplikacij z uporabo vnaprej določenih komponent uporabniškega vmesnika in pripomočkov.

Začetek uporabe uporabniškega vmesnika Chakra v aplikacijah React

Za začetek Uporabniški vmesnik Chakra, pojdi naprej in, ustvarite osnovno aplikacijo React z aplikacijo create-react-app ukaz. Lahko pa tudi uporabite Vite za ustvarjanje projekta React.

Nato namestite te odvisnosti:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Kodo tega projekta najdete v GitHub repozitorij.

Dodajte ponudnika teme Chakra

Ko namestite te odvisnosti, morate aplikacijo oviti z

ChakraProvider. Ponudnika lahko dodate v svoj index.jsx, main.jsx, oz App.jsx kot sledi:

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>,
)

Ovijanje aplikacije z ChakraProvider je potreben za dostop do komponent uporabniškega vmesnika Chakra in lastnosti oblikovanja v vaši aplikaciji.

Preklopi različne teme

Uporabniški vmesnik Chakra ponuja privzeto vnaprej izdelano temo, ki vključuje podporo za svetle, temne in sistemske barvne načine. Vendar pa lahko dodatno prilagodite teme uporabniškega vmesnika vaše aplikacije in druge lastnosti sloga znotraj predmeta teme, kot je določeno v Čakrina dokumentacija.

Če želite preklopiti med temno in svetlo temo, ustvarite a komponente/ThemeToggler.jsx datoteka v src imenik in vključite naslednjo kodo.

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>
 );
}

Zdaj pa nadaljujte in uvozite paket ikon:

npm i @chakra-ui/icons

The ThemeToggler komponenta bo upodobila gumb, ki uporabnikom omogoča preklapljanje med svetlimi in temnimi temami v aplikaciji.

Ta komponenta dostopa do trenutnega barvnega načina useColorMode kavelj in uporablja toggleColorMode funkcijo za preklapljanje med načini.

The IconButton komponenta prevzame značilnosti ikone, hkrati pa ima tudi možnosti klikanja gumba.

Ustvarite uporabniški vmesnik prijavnega obrazca

Ustvari novo Login.jsx datoteka v komponente imenik in vanj dodajte naslednjo kodo:

Najprej dodajte te 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';

Po uvozu teh komponent uporabniškega vmesnika definirajte funkcionalno komponento React in komponente glavnega vsebnika, ki bodo vsebovale vse elemente za uporabniški vmesnik za prijavo.

functionLogin() {
const { colorMode } = useColorMode();
return (

"center" align="center" height="80vh" >



 </Stack>
 </Center>
 </Flex>
 </Box>
 );
}
exportdefault Login;

The Škatla komponenta upodablja a div element—služi kot osnovni gradnik, na katerem zgradite vse druge komponente uporabniškega vmesnika Chakra. Flex, na drugi strani pa je komponenta Box z lastnostjo prikaza nastavljeno na flex. To pomeni, da lahko uporabite lastnosti flex za oblikovanje komponente.

Obe komponenti Center in Stack sta komponenti postavitve, vendar imata majhne razlike v funkcionalnosti. Sredinska komponenta je odgovorna za poravnavo vseh podrejenih komponent v svojem središču, medtem ko Stack združuje elemente uporabniškega vmesnika in dodaja razmik med njimi.

Sedaj pa sestavimo razdelek glave obrazca. Komponenta Header bo za ta del zelo koristna. Znotraj komponente Stack dodajte to kodo.

'6'>
 fontWeight='500'
 fontSize='30px'
 letterSpacing='-0.5px'
 >
 Login
 </Heading> 
</VStack>

The VStack komponenta zlaga svoje podrejene elemente v navpični smeri. Nato ustvarite komponento kartice, ki bo vsebovala obrazec za prijavo in njegove elemente.

'#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
 size="lg" borderRadius={8} boxShadow="lg"
>



'4'>

'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Email Address</FormLabel>
 type='text'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={email}
 />
 </FormControl>

'space-between'>
'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Password</FormLabel>
as='a'
 href='#'
 variant='link'
 size='xs'
 color='#0969da'
 fontWeight='500'
 >
 Forgot password?
 </Button>
 </HStack>
 type='password'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={password}
 />
 </FormControl>
 type="submit"
 bg='#2da44e'
 color='white'
 size='sm'
 _hover={{ bg: '#2c974b' }}
 _active={{ bg: '#298e46' }}
 >
 Sign in
 </Button>
 </Stack>
 </form>
 </CardBody>
 </Card>

Nadaljujte in posodobite svoje App.jsx datoteko za uvoz prijave ter komponento ThemeToggler.

import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (




 </div>
 )
}

Super! Zaženite razvojni strežnik, da posodobite spremembe.

npm run dev

Zdaj, ko se stran naloži v brskalnik, bo najprej prikazala privzeto temo svetlobnega načina.

Zdaj kliknite na Preklopi temo gumb z ikono za preklop načina teme.

Upravljanje stanja obrazca z uporabo React Hooks

Na tej točki obrazec za prijavo vsebuje samo dve vnosni polji in gumb za prijavo. Da bo deloval, začnimo z implementacijo logike upravljanja stanja z uporabo kavljev React.

Znotraj funkcionalne komponente Login definirajte naslednja stanja.

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);

Nato dodajte onChange funkcija obravnave, ki bo poslušala spremembe vnosnih polj, zajela vnose in ustrezno posodobila stanje e-pošte in gesla.

Te stavke kode dodajte v vnosna polja.

onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}

S temi spremembami zdaj zajemate uporabniške vnose.

Implementacija preverjanja obrazcev in obravnavanja napak z vgrajenimi funkcijami uporabniškega vmesnika Chakra

Zdaj dodajte funkcijo obdelovalca, ki bo obdelala vnose in vrnila ustrezne rezultate. Na oblika začetno oznako elementa, dodajte onSubmit funkcija obdelovalca, kot sledi.

Nato definirajte handleSubmit funkcijo. Tik pod stanji, ki ste jih definirali, vključite naslednjo kodo.

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('');
 }
};

Ta asinhroni handleSubmit funkcija se bo sprožila, ko nekdo odda obrazec. Funkcija nastavi stanje nalaganja na resnično – simulira dejanje obdelave. Lahko upodabljate vrtljivko za nalaganje uporabniškega vmesnika Chakra, da uporabniku zagotovite vizualno iztočnico.

Poleg tega bo funkcija handleSubmit poklicala prijava uporabnika funkcija, ki vzame e-pošto in geslo kot parametra za njuno potrditev.

Simulirajte zahtevo API za preverjanje pristnosti

Če želite preveriti, ali so vnosi, ki jih zagotovi uporabnik, veljavni, lahko simulirate klic API-ja tako, da definirate prijava uporabnika funkcijo, ki bo preverila poverilnice za prijavo, podobno kot bi to storil zaledni API.

Tik pod funkcijo handleSubmit dodajte to kodo:

const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
 setTimeout(() => {
if (email '[email protected]' && password 'password') {
 resolve();
 } else {
 reject();
 }
 }, 1000);
 });
};

Ta koda definira asinhrono funkcijo, ki izvaja preprosto logiko preverjanja veljavnosti.

Funkcije uporabniškega vmesnika za obravnavanje napak Chakra.

Z uporabo komponent za povratne informacije Chakra lahko zagotovite ustrezne vizualne povratne informacije uporabnikom na podlagi njihovih interakcij na obrazcu. Če želite to narediti, začnite z uvozom teh komponent iz knjižnice uporabniškega vmesnika Chakra.

Alert, AlertIcon, AlertTitle, CircularProgress

Zdaj dodajte naslednjo kodo tik pod začetno oznako elementa obrazca.

{error && !isLoggedIn && 
'error' variant='solid'> 

{error}</AlertTitle>
 </Alert>
}
{isLoggedIn && ( 
"success" variant='solid'>

{success}</AlertTitle>
 </Alert>
)}

Nazadnje naredite to posodobitev gumba za oddajo, da vključite komponento CircularProgress za nalaganje.

{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}

Tole bo videl uporabnik, ko se bo uspešno prijavil:

Če pride do napake v procesu prijave, bi morali videti tak odgovor:

Izboljšajte svoj razvojni proces z uporabniškim vmesnikom Chakra

Uporabniški vmesnik Chakra ponuja nabor dobro zasnovanih in prilagodljivih komponent uporabniškega vmesnika, ki jih lahko uporabite za hitro gradnjo Uporabniški vmesniki React. Ne glede na to, kako preproste ali zapletene so vaše zasnove, ima Chakra komponente za skoraj vse uporabniške vmesnike naloge.