Chakra ви дава прости компоненти с чисти, използваеми стилове.

Стилизирането на приложения с персонализиран CSS е забавно, докато проектът не стане по-сложен. Предизвикателството се състои в стилизирането и поддържането на последователен дизайн в цялото приложение.

Въпреки че все още можете да използвате CSS, често е по-ефективно да използвате библиотека за стилизиране на потребителския интерфейс като Chakra UI. Тази библиотека осигурява бърз и безпроблемен начин за стилизиране на вашите приложения с помощта на предварително дефинирани компоненти на потребителския интерфейс и помощни реквизити.

Първи стъпки с потребителския интерфейс на Chakra в приложенията на React

За да започнете с Чакра потребителски интерфейс, давай напред и, скеле основно React приложение с помощта на create-react-app команда. Като алтернатива можете използвайте Vite, за да създадете React проект.

След това инсталирайте тези зависимости:

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

Можете да намерите кода на този проект в него GitHub хранилище.

instagram viewer

Добавяне на доставчик на тема на Chakra

След като инсталирате тези зависимости, трябва да обвиете приложението с ChakraProvider. Можете да добавите доставчика във вашия index.jsx, main.jsx, или App.jsx както следва:

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

Обвиване на приложението с ChakraProvider е необходим за достъп до компонентите на потребителския интерфейс на Chakra и свойствата за стилизиране във вашето приложение.

Превключване на различни теми

Chakra UI предоставя предварително изградена тема по подразбиране, която включва поддръжка за светли, тъмни и системни цветови режими. Въпреки това можете допълнително да персонализирате темите на потребителския интерфейс на вашето приложение и други свойства на стила в обект на тема, както е посочено в Документация на Чакра.

За да превключвате между тъмните и светлите теми, създайте a компоненти/ThemeToggler.jsx файл в src директория и включете следния код.

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

The ThemeToggler ще изобрази бутон, който позволява на потребителите да превключват между светли и тъмни теми в приложението.

Този компонент има достъп до текущия цветови режим useColorMode кука и използва toggleColorMode функция за превключване между режимите.

The IconButton компонентът приема характеристиките на икона, като същевременно има възможностите за кликване на бутон.

Създайте потребителски интерфейс на формуляр за вход

Създайте нов Login.jsx файл в компоненти директория и добавете следния код към нея:

Първо добавете тези импортирания.

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

След като импортирате тези UI компоненти, дефинирайте функционалния компонент на React и основните компоненти на контейнера, които ще съдържат всички елементи за потребителския интерфейс за влизане.

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

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



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

exportdefault Login;

The Кутия компонент изобразява a див елемент—той служи като основен градивен елемент, върху който изграждате всички други компоненти на потребителския интерфейс на Chakra. Flex, от друга страна, е компонент Box със свойството му display, зададено на flex. Това означава, че можете да използвате свойствата на flex за стилизиране на компонента.

Компонентите Center и Stack са компоненти на оформлението, но имат леки разлики във функционалността. Централният компонент е отговорен за подравняването на всички дъщерни компоненти в своя център, докато Stack групира елементите на потребителския интерфейс заедно и добавя разстояние между тях.

Сега нека изградим заглавната част на формуляра. Компонентът Header ще бъде наистина полезен за тази част. Вътре в компонента Stack добавете този код.

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

The 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>

Продължете и актуализирайте своя App.jsx файл за импортиране на Login, както и компонента ThemeToggler.

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




 </div>
 )
}

Страхотен! Стартирайте сървъра за разработка, за да актуализирате промените.

npm run dev

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

Сега щракнете върху Превключване на темата бутон с икона за превключване на режима на тема.

Управление на състоянието на формуляра с помощта на React Hooks

На този етап формулярът за влизане съдържа само две полета за въвеждане и бутон за влизане. За да го направим функционален, нека започнем с внедряване на логика за управление на състоянието използвайки куки React.

Дефинирайте следните състояния във функционалния компонент за влизане.

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 функция за манипулиране, която ще слуша промените в полетата за въвеждане, ще улавя входовете и съответно ще актуализира състоянията на имейла и паролата.

Добавете тези кодови изрази към полетата за въвеждане.

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

С тези промени вече улавяте въведените от потребителите данни.

Внедряване на проверка на формуляр и обработка на грешки с вградените функции на Chakra UI

Сега добавете манипулираща функция, която ще обработва входовете и ще връща подходящи резултати. На форма отварящ етикет на елемент, добавете onSubmit функция на манипулатора, както следва.

След това дефинирайте handleSubmit функция. Точно под състоянията, които сте дефинирали, включете следния код.

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

Това асинхронно handleSubmit функцията ще се задейства, когато някой изпрати формуляра. Функцията задава състоянието на зареждане на истина - симулиране на действие за обработка. Можете да изобразите въртящия се бутон за зареждане на потребителския интерфейс на Chakra, за да предоставите визуална подсказка на потребителя.

Освен това функцията handleSubmit ще извика потребителски вход функция, която приема имейла и паролата като параметри, за да ги валидира.

Симулирайте заявка за API за удостоверяване

За да проверите дали въведените данни от даден потребител са валидни, можете да симулирате извикване на API, като дефинирате потребителски вход функция, която ще провери идентификационните данни за вход, подобно на начина, по който би направил backend API.

Точно под функцията handleSubmit добавете този код:

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

Този код дефинира асинхронна функция, която изпълнява проста логика за проверка на логиката.

Функции на потребителския интерфейс за обработка на грешки на Chakra.

Можете да предоставите подходяща визуална обратна връзка на потребителите въз основа на техните взаимодействия във формуляра, като използвате компонентите за обратна връзка на Chakra. За да направите това, започнете с импортиране на тези компоненти от UI библиотеката на Chakra.

Alert, AlertIcon, AlertTitle, CircularProgress

Сега добавете следния код точно под отварящия таг на елемента на формуляра.

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

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

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

И накрая, направете тази актуализация на бутона за изпращане, за да включите компонента за зареждане, CircularProgress.

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

Ето какво ще види потребителят, след като влезе успешно:

Ако има грешка в процеса на влизане, те трябва да видят отговор като този:

Подобрете процеса на разработка с Chakra UI

Chakra UI предоставя набор от добре проектирани и адаптивни UI компоненти, които можете да използвате за бързо изграждане Потребителски интерфейси на React. Независимо колко прости или сложни са вашите проекти, Chakra има компоненти за почти всички потребителски интерфейси задачи.