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

После того, как вы установили эти зависимости, вам необходимо обернуть приложение с помощью ЧакраПровайдер. Вы можете добавить провайдера в свой index.jsx, main.jsx, или Приложение.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>,
)

Обертывание приложения с помощью ЧакраПровайдер необходим для доступа к компонентам пользовательского интерфейса Chakra и свойствам стиля во всем приложении.

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

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

Чтобы переключить темную и светлую темы, создайте компоненты/ThemeToggler.jsx файл в источник каталог и включите следующий код.

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

Переключатель тем Компонент отобразит кнопку, которая позволит пользователям переключаться между светлой и темной темами в приложении.

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

ЗначокКнопка Компонент принимает характеристики значка, но при этом имеет возможности нажатия кнопки.

Создайте пользовательский интерфейс формы входа

Создать новый Логин.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';

После импорта этих компонентов пользовательского интерфейса определите функциональный компонент React и основные компоненты контейнера, которые будут содержать все элементы пользовательского интерфейса входа в систему.

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

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



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

exportdefault Login;

Коробка компонент отображает div элемент — он служит базовым строительным блоком, на основе которого вы строите все остальные компоненты пользовательского интерфейса Chakra. Гибкий, с другой стороны, является компонентом Box, свойство display которого имеет значение гибкий. Это означает, что вы можете использовать свойства flex для стилизации компонента.

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

Теперь давайте создадим раздел заголовка формы. Компонент Header будет очень полезен в этой части. Внутри компонента Stack добавьте этот код.

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

Обновите свой Приложение.jsx файл для импорта входа в систему, а также компонента 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={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}

Благодаря этим изменениям вы теперь фиксируете вводимые пользователем данные.

Реализация проверки формы и обработки ошибок с помощью встроенных функций пользовательского интерфейса Chakra

Теперь добавьте функцию-обработчик, которая будет обрабатывать входные данные и возвращать соответствующие результаты. На форма открывающий тег элемента, добавьте onSubmit функция обработчика следующим образом.

Далее определите handleОтправить функция. Прямо под определенными вами состояниями добавьте следующий код.

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

Этот асинхронный handleОтправить Функция сработает, когда кто-то отправит форму. Функция устанавливает состояние загрузки в значение true, моделируя действие обработки. Вы можете визуализировать индикатор загрузки пользовательского интерфейса Chakra, чтобы предоставить пользователю визуальную подсказку.

Более того, функция handleSubmit вызовет Логин пользователя функция, которая принимает адрес электронной почты и пароль в качестве параметров для их проверки.

Имитация запроса API аутентификации

Чтобы убедиться, что вводимые пользователем данные действительны, вы можете смоделировать вызов API, определив Логин пользователя функция, которая будет проверять учетные данные для входа аналогично тому, как это делает серверный API.

Прямо под функцией handleSubmit добавьте этот код:

const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
 setTimeout(() => {
if (email 'test@email.com' && password 'password') {
 resolve();
 } else {
 reject();
 }
 }, 1000);
 });
};

Этот код определяет асинхронную функцию, которая выполняет простую логику проверки.

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

Вы можете предоставить пользователям подходящую визуальную обратную связь на основе их взаимодействия с формой, используя компоненты обратной связи Chakra. Для этого начните с импорта этих компонентов из библиотеки пользовательского интерфейса 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

Chakra UI предоставляет набор хорошо продуманных и настраиваемых компонентов пользовательского интерфейса, которые вы можете использовать для быстрого создания Реагировать на пользовательские интерфейсы. Независимо от того, насколько просты или сложны ваши проекты, в Chakra есть компоненты практически для всех пользовательских интерфейсов. задания.