Chakra suteikia jums paprastus komponentus, kurių stilius yra švarus, tinkamas naudoti.

Stiliaus programų kūrimas naudojant pasirinktinį CSS yra smagus, kol projektas tampa sudėtingesnis. Iššūkis yra sukurti stilių ir išlaikyti nuoseklų dizainą visos programos metu.

Nors vis dar galite naudoti CSS, dažnai efektyviau naudoti UI stiliaus biblioteką, pvz., Chakra UI. Ši biblioteka suteikia greitą ir be rūpesčių būdą, kaip sukurti programų stilių naudojant iš anksto nustatytus vartotojo sąsajos komponentus ir paslaugų rekvizitus.

Darbo su „Chakra“ vartotojo sąsaja „React“ programose pradžia

Norėdami pradėti nuo čakros vartotojo sąsaja, pirmyn ir, sukurti pagrindinę „React“ programą naudodami „create-react-app“. komandą. Arba galite naudokite Vite, kad sukurtumėte React projektą.

Tada įdiekite šias priklausomybes:

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

Šio projekto kodą galite rasti jame GitHub saugykla.

Pridėti Chakros temų teikėją

Įdiegę šias priklausomybes, turite apvynioti programą su

instagram viewer
ChakraProvider. Teikėją galite pridėti bet kuriame savo puslapyje index.jsx, pagrindinis.jsx, arba App.jsx taip:

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

Paraiškos apvyniojimas su ChakraProvider būtina norint pasiekti Chakra UI komponentus ir stiliaus savybes visoje programoje.

Perjungti skirtingas temas

„Chakra“ vartotojo sąsaja suteikia numatytąją iš anksto sukurtą temą, kuri apima šviesių, tamsių ir sistemos spalvų režimų palaikymą. Tačiau galite toliau tinkinti programos vartotojo sąsajos temas ir kitas stiliaus ypatybes temos objekte, kaip nurodyta Chakros dokumentacija.

Norėdami perjungti tamsias ir šviesias temas, sukurkite a komponentai/ThemeToggler.jsx failą src katalogą ir įtraukite šį 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>
 );
}

Dabar eikite į priekį ir importuokite piktogramų paketą:

npm i @chakra-ui/icons

The ThemeToggler komponentas pateiks mygtuką, leidžiantį vartotojams programoje perjungti šviesias ir tamsias temas.

Šis komponentas pasiekia esamą spalvų režimą naudoti ColorMode kablys ir naudoja perjungti spalvų režimą funkcija perjungti režimus.

The IconButton komponentas įgauna piktogramos ypatybes, kartu turi ir mygtuko spustelėjimo galimybes.

Sukurkite prisijungimo formos vartotojo sąsają

Sukurti naują Prisijungimas.jsx failą komponentai katalogą ir pridėkite prie jo šį kodą:

Pirmiausia pridėkite šiuos importuotus produktus.

import React, { useState } from'react';
import { 
 Box,
 Button,
 Card,
 CardBody,
 Center,
 Flex,
 FormControl,
 FormLabel,
 Heading,
 HStack,
 Input,
 Stack,
 VStack,
 useColorMode,
} from'@chakra-ui/react';

Importavę šiuos vartotojo sąsajos komponentus, apibrėžkite funkcinį komponentą „React“ ir pagrindinius konteinerio komponentus, kuriuose bus visi prisijungimo vartotojo sąsajos elementai.

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

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



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

exportdefault Login;

The Dėžė komponentas suteikia a div elementas – jis tarnauja kaip pagrindinis statybinis blokas, ant kurio statote visus kitus „Chakra“ vartotojo sąsajos komponentus. FlexKita vertus, yra dėžutės komponentas, kurio rodymo ypatybė nustatyta į lankstus. Tai reiškia, kad galite naudoti lankstumo savybes, kad sukurtumėte komponento stilių.

Tiek „Center“, tiek „Stack“ komponentai yra išdėstymo komponentai, tačiau jų funkcionalumas šiek tiek skiriasi. Centrinis komponentas yra atsakingas už visų antrinių komponentų išlygiavimą centre, o Stack sugrupuoja vartotojo sąsajos elementus ir prideda tarpus tarp jų.

Dabar sukurkime formos antraštės skyrių. Antraštės komponentas bus tikrai naudingas šiai daliai. Komponento „Stack“ viduje pridėkite šį kodą.

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

The VStack komponentas sukrauna antrinius elementus vertikalia kryptimi. Tada sukurkite kortelės komponentą, kuriame bus prisijungimo forma ir jos elementai.

'#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>

Pirmyn ir atnaujinkite savo App.jsx failą, kad importuotumėte prisijungimo vardą, taip pat komponentą ThemeToggler.

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




 </div>
 )
}

Puiku! Paleiskite kūrimo serverį, kad atnaujintumėte pakeitimus.

npm run dev

Dabar, kai puslapis įkeliamas į naršyklę, iš pradžių bus rodoma numatytoji šviesos režimo tema.

Dabar spustelėkite Perjungti temą piktogramos mygtuką, kad perjungtumėte temos režimą.

Formos būsenos valdymas naudojant „React Hooks“.

Šiuo metu prisijungimo formoje yra tik du įvesties laukai ir prisijungimo mygtukas. Kad jis veiktų, pradėkime nuo valstybės valdymo logikos įgyvendinimo naudojant React kabliukus.

Funkcinio prisijungimo komponento viduje apibrėžkite šias būsenas.

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

Tada pridėkite onChange tvarkyklės funkcija, kuri išklausys įvesties laukų pakeitimus, užfiksuos įvestis ir atitinkamai atnaujins el. pašto ir slaptažodžio būsenas.

Pridėkite šiuos kodo teiginius į įvesties laukus.

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

Atlikę šiuos pakeitimus, dabar fiksuojate vartotojo įvestį.

Formos patvirtinimo ir klaidų apdorojimo įgyvendinimas naudojant Chakra UI integruotas funkcijas

Dabar pridėkite tvarkyklės funkciją, kuri apdoros įvestis ir pateiks tinkamus rezultatus. Ant forma elemento atidarymo žymą, pridėkite onSubmit tvarkyklės funkciją, kaip nurodyta toliau.

Toliau apibrėžkite rankenaPateikti funkcija. Iš karto po jūsų apibrėžtomis būsenomis įtraukite šį 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('');
 }
};

Šis asinchroninis rankenaPateikti funkcija suaktyvins, kai kas nors pateiks formą. Funkcija nustato įkėlimo būseną į true – imituojant apdorojimo veiksmą. Galite pateikti „Chakra“ vartotojo sąsajos įkėlimo suktuką, kad vartotojui pateiktumėte vaizdinį užuominą.

Be to, funkcija handleSubmit iškvies vartotojo prisijungimas el. pašto adresą ir slaptažodį kaip parametrus, kad juos patvirtintų.

Imituokite autentifikavimo API užklausą

Norėdami patikrinti, ar vartotojo pateiktos įvestys yra tinkamos, galite imituoti API iškvietimą, apibrėždami vartotojo prisijungimas funkcija, kuri patikrins prisijungimo kredencialus, panašiai kaip tai darytų užpakalinės programos API.

Tiesiogiai po funkcija HandSubmit pridėkite šį kodą:

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

Šis kodas apibrėžia asinchroninę funkciją, kuri atlieka paprastą logikos patvirtinimo logiką.

Chakros klaidų tvarkymo vartotojo sąsajos funkcijos.

Galite pateikti tinkamą vaizdinį grįžtamąjį ryšį vartotojams, atsižvelgdami į jų sąveiką formoje, naudodami „Chakra“ grįžtamojo ryšio komponentus. Norėdami tai padaryti, pradėkite importuodami šiuos komponentus iš „Chakra“ vartotojo sąsajos bibliotekos.

Alert, AlertIcon, AlertTitle, CircularProgress

Dabar pridėkite šį kodą tiesiai po formos elemento atidarymo žyma.

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

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

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

Galiausiai atnaujinkite pateikimo mygtuką, kad įtrauktumėte įkėlimo suktuką, „CircularProgress“ komponentą.

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

Štai ką vartotojas matys sėkmingai prisijungęs:

Jei prisijungimo procese įvyko klaida, jie turėtų matyti tokį atsakymą:

Pagerinkite savo vystymosi procesą naudodami „Chakra“ vartotojo sąsają

„Chakra“ vartotojo sąsaja yra gerai suprojektuotų ir pritaikomų vartotojo sąsajos komponentų rinkinys, kurį galite naudoti norėdami greitai sukurti Reaguoti UI. Nepriklausomai nuo to, koks paprastas ar sudėtingas jūsų dizainas, „Chakra“ turi komponentų beveik visoms vartotojo sąsajoms užduotys.