Chakra piedāvā vienkāršus komponentus ar tīru, lietojamu stilu.
Lietojumprogrammu veidošana, izmantojot pielāgotu CSS, ir jautra, līdz projekts kļūst sarežģītāks. Izaicinājums ir veidot un uzturēt konsekventu dizainu visā lietojuma laikā.
Lai gan joprojām varat izmantot CSS, bieži vien ir efektīvāk izmantot UI stila bibliotēku, piemēram, Chakra UI. Šī bibliotēka nodrošina ātru un netraucētu veidu, kā veidot savas lietotnes, izmantojot iepriekš definētus lietotāja interfeisa komponentus un utilītas.
Darba sākšana ar Chakra UI programmā React
Lai sāktu ar Chakra UI, uz priekšu un izveidot pamata React lietojumprogrammu, izmantojot lietotni Create-React-app komandu. Alternatīvi, jūs varat izmantojiet Vite, lai izveidotu React projektu.
Pēc tam instalējiet šīs atkarības:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionJūs varat atrast šī projekta kodu tajā GitHub krātuve.
Pievienojiet Chakras motīvu nodrošinātāju
Kad esat instalējis šīs atkarības, jums ir jāaptver lietojumprogramma ar
ChakraProvider. Varat pievienot pakalpojumu sniedzēju vai nu savā index.jsx, galvenais.jsx, vai App.jsx sekojoši: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>,
)
Aplikācijas iesaiņošana ar ChakraProvider ir nepieciešams, lai visā lietojumprogrammā piekļūtu Chakra UI komponentiem un stila īpašībām.
Pārslēgt dažādus motīvus
Chakra UI nodrošina noklusējuma iepriekš izveidotu motīvu, kas ietver atbalstu gaišiem, tumšiem un sistēmas krāsu režīmiem. Tomēr varat vēl vairāk pielāgot savas lietojumprogrammas lietotāja interfeisa motīvus un citus stila rekvizītus motīva objektā, kā norādīts Čakras dokumentācija.
Lai pārslēgtu tumšos un gaišos motīvus, izveidojiet a komponenti/ThemeToggler.jsx failu mapē src direktorijā un iekļaujiet šādu kodu.
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>
);
}
Tagad turpiniet un importējiet ikonu pakotni:
npm i @chakra-ui/iconsThe ThemeToggler komponents atveidos pogu, kas ļauj lietotājiem lietotnē pārslēgties starp gaišajiem un tumšajiem motīviem.
Šis komponents piekļūst pašreizējam krāsu režīmam izmantot ColorMode āķis un izmanto pārslēgt ColorMode funkcija, lai pārslēgtos starp režīmiem.
The IconButton komponents iegūst ikonas īpašības, vienlaikus nodrošinot arī pogas noklikšķināmās iespējas.
Izveidojiet pieteikšanās veidlapas lietotāja interfeisu
Izveidojiet jaunu Login.jsx failu mapē sastāvdaļas direktorijā un pievienojiet tam šādu kodu:
Vispirms pievienojiet šos importētos datus.
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ēc šo UI komponentu importēšanas definējiet funkcionālo komponentu React un galvenos konteinera komponentus, kuros būs visi pieteikšanās lietotāja interfeisa elementi.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
The Kaste komponents padara a div elements — tas kalpo kā pamatelements, uz kura tiek veidoti visi pārējie Chakra UI komponenti. Flex, no otras puses, ir Box komponents, kura displeja rekvizīts ir iestatīts uz flex. Tas nozīmē, ka varat izmantot flex īpašības, lai veidotu komponentu.
Gan Center, gan Stack komponenti ir izkārtojuma komponenti, taču tiem ir nelielas funkcionalitātes atšķirības. Centrālais komponents ir atbildīgs par visu pakārtoto komponentu izlīdzināšanu tā centrā, savukārt Stack grupē lietotāja interfeisa elementus kopā un pievieno atstarpi starp tiem.
Tagad izveidosim veidlapas galvenes sadaļu. Šai daļai ļoti noderēs komponents Header. Komponenta Stack iekšpusē pievienojiet šo kodu.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> The VStack komponents sakrauj savus bērnu elementus vertikālā virzienā. Pēc tam izveidojiet kartes komponentu, kurā tiks ievietota pieteikšanās veidlapa un tās elementi.
'#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>
Iet uz priekšu un atjauniniet savu App.jsx failu, lai importētu pieteikšanos, kā arī komponentu ThemeToggler.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Lieliski! Sāciet izstrādes serveri, lai atjauninātu izmaiņas.
npm run devTagad, kad lapa tiek ielādēta pārlūkprogrammā, tā sākotnēji parādīs noklusējuma gaismas režīma motīvu.
Tagad noklikšķiniet uz Pārslēgt motīvu ikonas pogu, lai pārslēgtu motīva režīmu.
Veidlapas stāvokļa pārvaldība, izmantojot React Hooks
Šajā brīdī pieteikšanās veidlapā ir tikai divi ievades lauki un pierakstīšanās poga. Lai tas būtu funkcionāls, sāksim ar valsts vadības loģikas ieviešanu izmantojot React āķus.
Funkcionālajā komponentā Pieteikšanās definējiet šādus stāvokļus.
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);Tālāk pievienojiet onChange apdarinātāja funkcija, kas noklausīsies izmaiņas ievades laukos, uztvers ievades datus un attiecīgi atjauninās e-pasta un paroles statusus.
Pievienojiet šos koda paziņojumus ievades laukiem.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Izmantojot šīs izmaiņas, jūs tagad tverat lietotāja ievadi.
Veidlapu apstiprināšanas un kļūdu apstrādes ieviešana, izmantojot Chakra UI iebūvētās funkcijas
Tagad pievienojiet apdarinātāja funkciju, kas apstrādās ievades un atgriezīs atbilstošus rezultātus. Uz formā elementa atvēršanas tagu, pievienojiet onSubmit apstrādātāja funkciju šādi.
Tālāk definējiet rokturisIesniegt funkciju. Tieši zem jūsu definētajiem stāvokļiem iekļaujiet tālāk norādīto kodu.
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 asinhronais rokturisIesniegt funkcija tiks aktivizēta, kad kāds iesniegs veidlapu. Funkcija iestata ielādes stāvokli uz True — imitējot apstrādes darbību. Varat renderēt Chakra lietotāja interfeisa ielādes griezni, lai sniegtu lietotājam vizuālu norādi.
Turklāt funkcija handleSubmit izsauks lietotājsPieteikšanās funkcija, kas izmanto e-pastu un paroli kā parametrus, lai tos apstiprinātu.
Imitējiet autentifikācijas API pieprasījumu
Lai pārbaudītu, vai lietotāja sniegtās ievades ir derīgas, varat simulēt API izsaukumu, definējot lietotājsPieteikšanās funkcija, kas pārbaudīs pieteikšanās akreditācijas datus līdzīgi kā aizmugursistēmas API.
Tieši zem funkcijas handleSubmit pievienojiet šo kodu:
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};Šis kods definē asinhronu funkciju, kas veic vienkāršu loģikas validācijas loģiku.
Čakras kļūdu apstrādes lietotāja interfeisa funkcijas.
Izmantojot Chakra atgriezeniskās saites komponentus, varat sniegt lietotājiem piemērotu vizuālo atgriezenisko saiti, pamatojoties uz viņu mijiedarbību veidlapā. Lai to izdarītu, vispirms importējiet šos komponentus no Chakras UI bibliotēkas.
Alert, AlertIcon, AlertTitle, CircularProgressTagad pievienojiet šo kodu tieši zem formas elementa atvēršanas taga.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Visbeidzot veiciet šo atjauninājumu iesniegšanas pogai, lai iekļautu iekraušanas sviru, CircularProgress komponentu.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Lūk, ko lietotājs redzēs pēc veiksmīgas pieteikšanās:
Ja pieteikšanās procesā rodas kļūda, viņiem vajadzētu redzēt šādu atbildi:
Uzlabojiet savu attīstības procesu, izmantojot Chakra UI
Chakra UI nodrošina labi izstrādātu un pielāgojamu lietotāja interfeisa komponentu kopu, ko varat izmantot, lai ātri izveidotu Reaģēt lietotāja saskarnēs. Neatkarīgi no tā, cik vienkārši vai sarežģīti ir jūsu dizaini, Chakra ir komponenti gandrīz visiem lietotāja interfeisiem uzdevumus.
