Чакра вам даје једноставне компоненте са чистим, употребљивим стиловима.

Стилизирање апликација са прилагођеним ЦСС-ом је забавно док пројекат не постане сложенији. Изазов лежи у обликовању и одржавању доследног дизајна током целе апликације.

Иако још увек можете да користите ЦСС, често је ефикасније користити библиотеку за стилизовање корисничког интерфејса као што је Цхакра УИ. Ова библиотека пружа брз и једноставан начин за стилизовање ваших апликација користећи унапред дефинисане компоненте корисничког интерфејса и помоћне реквизите.

Почетак рада са корисничким интерфејсом Цхакра у Реацт апликацијама

За почетак са Цхакра УИ, само напред и, направите основну Реацт апликацију користећи цреате-реацт-апп команда. Алтернативно, можете користите Вите за креирање Реацт пројекта.

Затим инсталирајте ове зависности:

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

Код овог пројекта можете пронаћи у њему ГитХуб репозиторијум.

Додајте добављача тема чакре

Након што инсталирате ове зависности, морате да обмотате апликацију са

instagram viewer
ЦхакраПровидер. Можете додати провајдера или у свој индек.јск, маин.јск, или Апп.јск као што следи:

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

Омотавање апликације са ЦхакраПровидер је неопходан за приступ компонентама корисничког интерфејса Цхакра и својствима стила у целој апликацији.

Пребаци различите теме

Цхакра УИ пружа подразумевану унапред изграђену тему која укључује подршку за светле, тамне и системске режиме боја. Међутим, можете додатно прилагодити теме корисничког интерфејса ваше апликације и друга својства стила унутар објекта теме као што је наведено у Документација чакре.

Да бисте променили тамну и светлу тему, креирајте а компоненте/ТхемеТогглер.јск фајл у срц директоријум и укључите следећи код.

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

Сада, само напред и увезите пакет икона:

npm i @chakra-ui/icons

Тхе ТхемеТогглер компонента ће приказати дугме које омогућава корисницима да прелазе између светлих и тамних тема у апликацији.

Ова компонента приступа тренутном режиму боја усеЦолорМоде кука и користи тогглеЦолорМоде функција за пребацивање између режима.

Тхе ИцонБуттон компонента преузима карактеристике иконе, а истовремено има и могућности дугмета на које се може кликнути.

Креирајте кориснички интерфејс обрасца за пријаву

Створити нова Логин.јск фајл у компоненте директоријум и додајте му следећи код:

Прво додајте ове увозе.

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

Након увоза ових компоненти корисничког интерфејса, дефинишите Реацт функционалну компоненту и главне компоненте контејнера које ће садржати све елементе корисничког интерфејса за пријаву.

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

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



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

exportdefault Login;

Тхе Кутија компонента приказује а див елемент—он служи као основни градивни блок на коме градите све остале компоненте корисничког интерфејса чакре. Флек, с друге стране, је Бок компонента са својством приказа постављеним на флек. То значи да можете користити флек својства за стилизовање компоненте.

И Центер и Стацк компоненте су компоненте изгледа, међутим, имају мале разлике у функционалности. Централна компонента је одговорна за поравнавање свих подређених компоненти у свом центру, док Стацк групише елементе корисничког интерфејса и додаје размак између њих.

Сада, хајде да направимо одељак заглавља обрасца. Компонента Хеадер ће бити од велике помоћи за овај део. Унутар компоненте Стацк додајте овај код.

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

Тхе ВСтацк компонента слаже своје подређене елементе у вертикалном правцу. Затим креирајте компоненту картице у којој ће се налазити образац за пријаву и његови елементи.

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

Само напред и ажурирајте своје Апп.јск датотеку за увоз Логин, као и компоненту ТхемеТогглер.

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




 </div>
 )
}

Велики! Покрените развојни сервер да бисте ажурирали промене.

npm run dev

Сада, када се страница учита у претраживачу, у почетку ће приказати подразумевану тему светлосног режима.

Сада кликните на Пребаци тему дугме са иконом да бисте променили режим теме.

Управљање стањем обрасца помоћу Реацт кука

У овом тренутку, образац за пријаву садржи само два поља за унос и дугме за пријаву. Да бисмо га учинили функционалним, почнимо са имплементацијом логике управљања стањем користећи Реацт куке.

Дефинишите следећа стања унутар функционалне компоненте Логин.

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

Затим додајте онЦханге функција руковаоца која ће ослушкивати промене у пољима за унос, ухватити уносе и ажурирати стање е-поште и лозинке у складу са тим.

Додајте ове наредбе кода у поља за унос.

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

Са овим променама, сада снимате уносе корисника.

Имплементација валидације обрасца и руковања грешкама са уграђеним функцијама корисничког интерфејса Цхакра

Сада додајте функцију руковања која ће обрадити улазе и вратити одговарајуће резултате. На форму елемент отварања ознаке, додајте онСубмит функција руковаоца на следећи начин.

Затим дефинишите хандлеСубмит функција. Одмах испод стања које сте дефинисали укључите следећи код.

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

Овај асинхрони хандлеСубмит функција ће се покренути када неко пошаље образац. Функција поставља стање учитавања на тачно—симулирајући радњу обраде. Можете да прикажете спинер за учитавање корисничког интерфејса Цхакра да бисте пружили визуелни знак кориснику.

Штавише, функција хандлеСубмит ће позвати Улаз за кориснике функција која узима е-пошту и лозинку као параметре за њихову валидацију.

Симулирајте АПИ захтев за аутентификацију

Да бисте проверили да ли су улази које је корисник пружио валидни, можете симулирати АПИ позив дефинисањем Улаз за кориснике функција која ће верификовати акредитиве за пријаву слично као што би то урадио бацкенд АПИ.

Одмах испод функције хандлеСубмит додајте овај код:

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

Овај код дефинише асинхрону функцију која изводи једноставну логику валидације логике.

Карактеристике корисничког интерфејса за обраду грешака чакре.

Можете пружити одговарајућу визуелну повратну информацију корисницима на основу њихових интеракција на обрасцу користећи компоненте повратне информације Чакре. Да бисте то урадили, почните са увозом ових компоненти из Цхакрине УИ библиотеке.

Alert, AlertIcon, AlertTitle, CircularProgress

Сада додајте следећи код одмах испод ознаке за отварање елемента обрасца.

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

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

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

На крају, извршите ово ажурирање дугмета за слање да бисте укључили компоненту за окретање учитавања, ЦирцуларПрогресс.

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

Ево шта ће корисник видети када се успешно пријави:

Ако постоји грешка у процесу пријављивања, требало би да виде одговор попут овог:

Побољшајте свој развојни процес помоћу корисничког интерфејса Цхакра

Цхакра УИ пружа скуп добро дизајнираних и прилагодљивих УИ компоненти које можете користити за брзу изградњу Реацт УИс. Без обзира на то колико су ваши дизајни једноставни или сложени, чакра има компоненте за скоро сав кориснички интерфејс задатака.