چاکرا اجزای ساده با سبک های تمیز و قابل استفاده به شما می دهد.
استایل دادن به برنامه‌های کاربردی با CSS سفارشی تا زمانی که یک پروژه در پیچیدگی‌های خود رشد کند بسیار سرگرم کننده است. چالش در یک ظاهر طراحی و حفظ یک طراحی ثابت در سراسر برنامه نهفته است.
در حالی که هنوز می‌توانید از CSS استفاده کنید، اغلب استفاده از یک کتابخانه سبک رابط کاربری مانند Chakra UI موثرتر است. این کتابخانه روشی سریع و بدون دردسر برای استایل دادن به برنامه‌های شما با استفاده از اجزای رابط کاربری از پیش تعریف‌شده و ابزارهای کاربردی فراهم می‌کند.
شروع کار با Chakra UI در React Applications
برای شروع کار با Chakra UI، پیش بروید و با استفاده از دستور create-react-app، یک برنامه اصلی React را داربست کنید. یا می توانید از Vite برای ایجاد یک پروژه React استفاده کنید.
بعد، این وابستگی ها را نصب کنید:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
می توانید کد این پروژه را در مخزن GitHub آن پیدا کنید.
ارائه دهنده تم چاکرا را اضافه کنید
بعد از اینکه این وابستگی ها را نصب کردید، باید برنامه را با 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(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>,
)
بسته بندی برنامه با ChakraProvider برای دسترسی به اجزای Chakra UI و ویژگی های ظاهری در سراسر برنامه شما ضروری است.
تم های مختلف را تغییر دهید
Chakra UI یک تم پیش‌فرض از پیش ساخته شده ارائه می‌کند که شامل پشتیبانی از حالت‌های رنگ روشن، تاریک و سیستم می‌شود. با این حال، می‌توانید تم‌های رابط کاربری برنامه‌تان و سایر ویژگی‌های سبک را در داخل یک موضوع تم، همانطور که در مستندات چاکرا مشخص شده است، سفارشی کنید.
برای جابجایی تم های تیره و روشن، یک فایل components/ThemeToggler.jsx در دایرکتوری src ایجاد کنید و کد زیر را وارد کنید.
import React from 'react'
import { useColorMode, Box, IconButton} from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons'
export default function ThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Box textAlign="center" py={4} >
<IconButton
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
variant="ghost"
/>
<h2>Toggle Theme</h2>
</Box>
);
}
اکنون، ادامه دهید و بسته نمادها را وارد کنید:
npm i @chakra-ui/icons
مؤلفه ThemeToggler دکمه‌ای را ارائه می‌کند که به کاربران امکان می‌دهد بین تم‌های روشن و تاریک در برنامه جابجا شوند.
این مؤلفه به حالت رنگ فعلی قلاب useColorMode دسترسی پیدا می کند و از عملکرد toggleColorMode برای جابجایی بین حالت ها استفاده می کند.
مؤلفه 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';
پس از وارد کردن این مؤلفه‌های رابط کاربری، مؤلفه عملکردی React و مؤلفه‌های کانتینر اصلی را تعریف کنید که همه عناصر رابط کاربری ورود به سیستم را در خود نگه می‌دارد.
function Login() {
const { colorMode } = useColorMode();
return (
<Box>
<Flex justify="center" align="center" height="80vh" >
<Center>
<Stack>
</Stack>
</Center>
</Flex>
</Box>
);
}
export default Login;
مولفه Box یک عنصر div را ارائه می‌کند – به عنوان بلوک ساختمانی پایه عمل می‌کند که در بالای آن همه اجزای دیگر Chakra UI را می‌سازید. از طرف دیگر، Flex یک جزء Box است که ویژگی نمایش آن روی flex تنظیم شده است. این بدان معنی است که می توانید از ویژگی های flex برای استایل دادن به کامپوننت استفاده کنید.
هر دو مؤلفه Center و Stack اجزای طرح بندی هستند، با این حال، تفاوت های جزئی در عملکرد دارند. مؤلفه مرکزی مسئول تراز کردن همه مؤلفه‌های فرزند در مرکز خود است، در حالی که Stack، عناصر UI را با هم گروه‌بندی می‌کند و فاصله بین آنها را اضافه می‌کند.
حالا بیایید بخش هدر فرم را بسازیم. کامپوننت Header برای این قسمت واقعا مفید خواهد بود. داخل کامپوننت Stack، این کد را اضافه کنید.
<VStack spacing='6'>
<Heading
fontWeight='500'
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack>
مؤلفه VStack عناصر فرزند خود را در جهت عمودی روی هم قرار می دهد. سپس، مؤلفه کارتی را ایجاد کنید که فرم ورود و عناصر آن را در خود جای دهد.
<Card bg='#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
size="lg" borderRadius={8} boxShadow="lg"
>
<CardBody>
<form>
<Stack spacing='4'>
<FormControl isRequired>
<FormLabel size='sm'
color={colorMode === 'dark' ? 'black' : 'black'}
>Email Address</FormLabel>
<Input
type='text'
bg='white'
borderColor='#d8dee4'
size='sm'
borderRadius='6px'
color={colorMode === 'dark' ? 'black' : 'black'}
value={email}
/>
</FormControl>
<FormControl isRequired>
<HStack justify='space-between'>
<FormLabel size='sm'
color={colorMode === 'dark' ? 'black' : 'black'}
>Password</FormLabel>
<Button
as='a'
href='#'
variant='link'
size='xs'
color='#0969da'
fontWeight='500'
>
Forgot password?
</Button>
</HStack>
<Input
type='password'
bg='white'
borderColor='#d8dee4'
size='sm'
borderRadius='6px'
color={colorMode === 'dark' ? 'black' : 'black'}
value={password}
/>
</FormControl>
<Button
type="submit"
bg='#2da44e'
color='white'
size='sm'
_hover={{ bg: '#2c974b' }}
_active={{ bg: '#298e46' }}
>
Sign in
</Button>
</Stack>
</form>
</CardBody>
</Card>
برای وارد کردن Login و همچنین مؤلفه ThemeToggler، فایل App.jsx خود را به‌روزرسانی کنید.
import React from 'react'
import Login from './components/login'
import ThemeToggler from './components/ThemeToggler'
export default function App() {
return (
<div>
<ThemeToggler />
<Login />
</div>
)
}
عالی! سرور توسعه را برای به روز رسانی تغییرات راه اندازی کنید.
npm run dev
اکنون، هنگامی که صفحه در مرورگر بارگیری می شود، در ابتدا موضوع حالت نور پیش فرض را نمایش می دهد.
اکنون، روی دکمه Toggle Theme icon کلیک کنید تا حالت تم را تغییر دهید.
مدیریت حالت فرم با استفاده از React Hooks
در این مرحله، فرم ورود فقط شامل دو فیلد ورودی و یک دکمه ورود است. برای کاربردی کردن آن، اجازه دهید با پیاده سازی منطق مدیریت حالت با استفاده از قلاب های React شروع کنیم.
حالات زیر را در مولفه عملکردی Login تعریف کنید.
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 handler را اضافه کنید که به تغییرات فیلدهای ورودی گوش می دهد، ورودی ها را ضبط می کند و وضعیت های ایمیل و رمز عبور را متناسب با آن به روز می کند.
این عبارات کد را به فیلدهای ورودی اضافه کنید.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}
با این تغییرات، اکنون ورودی های کاربر را می گیرید.
پیاده سازی اعتبار سنجی فرم و مدیریت خطا با ویژگی های داخلی Chakra UI
اکنون، یک تابع کنترل کننده اضافه کنید که ورودی ها را پردازش کرده و نتایج مناسب را برمی گرداند. در تگ باز کردن عنصر فرم، تابع onSubmit handler را به صورت زیر اضافه کنید.
<form onSubmit={handleSubmit}>
سپس تابع 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 ناهمزمان زمانی فعال می شود که شخصی فرم را ارسال کند. تابع حالت بارگذاری را روی true تنظیم می کند – شبیه سازی یک عمل پردازشی. شما می توانید چرخش بارگذاری Chakra UI را برای ارائه یک نشانه بصری به کاربر رندر کنید.
علاوه بر این، تابع handleSubmit تابع userLogin را فراخوانی می‌کند که ایمیل و رمز عبور را به‌عنوان پارامترهایی برای اعتبارسنجی آنها می‌گیرد.
یک درخواست API Authentication را شبیه سازی کنید
برای تأیید معتبر بودن ورودی‌های ارائه‌شده توسط کاربر، می‌توانید یک فراخوانی API را با تعریف تابع userLogin شبیه‌سازی کنید که اعتبار ورود به سیستم را مشابه آنچه API پشتیبان انجام می‌دهد تأیید می‌کند.
درست در زیر تابع handleSubmit، این کد را اضافه کنید:
const userLogin = async ({ email, password }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === 'test@email.com' && password === 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};
این کد یک تابع ناهمزمان را تعریف می کند که یک منطق اعتبارسنجی منطقی ساده را انجام می دهد.
ویژگی‌های رابط کاربری خطای چاکرا.
شما می توانید با استفاده از اجزای بازخورد چاکرا، بازخورد بصری مناسبی را بر اساس تعامل آنها بر روی فرم به کاربران ارائه دهید. برای انجام این کار، با وارد کردن این اجزا از کتابخانه UI چاکرا شروع کنید.
Alert, AlertIcon, AlertTitle, CircularProgress
حالا کد زیر را درست زیر تگ باز کردن عنصر فرم اضافه کنید.
{error && !isLoggedIn &&
<Alert status='error' variant='solid'>
<AlertIcon />
<AlertTitle>{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
<Alert status="success" variant='solid'>
<AlertIcon />
<AlertTitle>{success}</AlertTitle>
</Alert>
)}
در نهایت، این به‌روزرسانی را روی دکمه ارسال قرار دهید تا شامل چرخاننده بارگیری، CircularProgress، مؤلفه باشد.
{isLoading
? (<CircularProgress isIndeterminate size="24px" color="teal" />)
: ('Sign In')}
در اینجا چیزی است که کاربر پس از ورود با موفقیت مشاهده می کند:
اگر در فرآیند ورود خطایی وجود داشته باشد، باید پاسخی مانند زیر ببینند:
فرآیند توسعه خود را با رابط کاربری چاکرا بهبود بخشید
Chakra UI مجموعه‌ای از مؤلفه‌های رابط کاربری با طراحی خوب و قابل تنظیم را ارائه می‌کند که می‌توانید برای ساخت سریع رابط‌های React از آنها استفاده کنید. صرف نظر از اینکه طرح های شما چقدر ساده یا پیچیده هستند، چاکرا اجزایی برای تقریباً تمام وظایف رابط کاربری دارد.