צ'אקרה מעניקה לך רכיבים פשוטים עם סגנונות נקיים ושמישים.

עיצוב יישומים עם CSS מותאם אישית זה כיף עד שפרויקט יגדל במורכבותו. האתגר טמון בעיצוב ובשמירה על עיצוב עקבי לאורך היישום.

אמנם אתה עדיין יכול להשתמש ב-CSS, אבל לעתים קרובות יותר יעיל להשתמש בספריית עיצוב ממשק משתמש כמו ממשק משתמש צ'אקרה. ספרייה זו מספקת דרך מהירה וללא טרחה לעצב את האפליקציות שלך באמצעות רכיבי ממשק משתמש מוגדרים מראש ואביזרים.

תחילת העבודה עם ממשק המשתמש של צ'אקרה ביישומי React

כדי להתחיל עם UI של צ'אקרה, קדימה ו, פיגום אפליקציית React בסיסית באמצעות אפליקציית create-react- פקודה. לחילופין, אתה יכול השתמש ב-Vite כדי ליצור פרויקט React.

לאחר מכן, התקן את התלות הבאים:

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

אתה יכול למצוא את הקוד של הפרויקט הזה בו GitHub מאגר.

הוסף את ספק הנושא של צ'אקרה

לאחר התקנת התלות הללו, עליך לעטוף את היישום עם ה ספק צ'אקרה. אתה יכול להוסיף את הספק גם ב- 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'





instagram viewer

ReactDOM.createRoot(document.getElementById('root')).render(



 </ChakraProvider>
 </React.StrictMode>,
)

עטיפת האפליקציה עם ה ספק צ'אקרה הכרחי כדי לגשת לרכיבים ולמאפייני הסגנון של Chakra UI בכל היישום שלך.

החלף נושאים שונים

ממשק המשתמש של צ'אקרה מספק ערכת נושא בנוי מראש הכוללת תמיכה במצבי אור, כהה וצבע מערכת. עם זאת, תוכל להתאים אישית יותר את ערכות הנושא של ממשק המשתמש של היישום שלך ומאפייני סגנון אחרים בתוך אובייקט ערכת נושא כפי שצוין ב תיעוד של צ'אקרה.

כדי להחליף בין הנושאים הכהים והבהירים, צור א רכיבים/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

ה ThemeToggler הרכיב יציג כפתור המאפשר למשתמשים לעבור בין נושאים בהירים לכהים באפליקציה.

רכיב זה ניגש למצב הצבע הנוכחי השתמש ב-ColorMode וו ומשתמש ב להחליף מצב צבע פונקציה למעבר בין מצבים.

ה 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 ואת רכיבי הקונטיינר הראשיים שיכילו את כל האלמנטים עבור ממשק המשתמש לכניסה.

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

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



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

exportdefault Login;

ה קופסא רכיב הופך את א div אלמנט - הוא משמש כאבן הבניין הבסיסי שעליו אתה בונה את כל שאר רכיבי ממשק המשתמש של הצ'אקרה. לְהַגמִישׁ, מצד שני, הוא רכיב Box עם מאפיין התצוגה שלו מוגדר ל לְהַגמִישׁ. זה אומר שאתה יכול להשתמש במאפייני הגמישות כדי לסגנן את הרכיב.

גם רכיבי המרכז והסטאק הם רכיבי פריסה, עם זאת, יש להם הבדלים קלים בפונקציונליות. הרכיב המרכזי אחראי ליישור כל רכיבי הילד במרכזו, בעוד ש-Stack מקבץ רכיבי ממשק משתמש יחד ומוסיף מרווח ביניהם.

כעת, בואו נבנה את קטע הכותרת של הטופס. רכיב ה-Header יהיה מאוד מועיל עבור החלק הזה. בתוך רכיב Stack, הוסף את הקוד הזה.

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

ה 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 קובץ כדי לייבא את ההתחברות, כמו גם את רכיב ThemeToggler.

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




 </div>
 )
}

גדול! הפעל את שרת הפיתוח כדי לעדכן את השינויים.

npm run dev

כעת, ברגע שהדף נטען בדפדפן, הוא יציג בתחילה את ערכת ברירת המחדל של מצב האור.

כעת, לחץ על החלף נושא לחצן סמל כדי להחליף את מצב הנושא.

ניהול מצב טופס באמצעות 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={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}

עם השינויים האלה, אתה לוכד כעת קלט של משתמשים.

יישום אימות טפסים וטיפול בשגיאות עם התכונות המובנות של ממשק המשתמש של צ'אקרה

כעת, הוסף פונקציית מטפל שתעבד את התשומות ותחזיר תוצאות מתאימות. על טופס תג פתיחת אלמנט, הוסף את ב-Submit פונקציית המטפל כדלקמן.

לאחר מכן, הגדר את ה 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 תקרא ל- כניסת משתמש פונקציה שמקבלת את האימייל והסיסמה כפרמטרים כדי לאמת אותם.

הדמיית בקשת API של אימות

כדי לוודא שהקלט שסופק על ידי משתמש חוקי, אתה יכול לדמות קריאת API על ידי הגדרת ה כניסת משתמש פונקציה שתאמת את אישורי הכניסה בדומה לאופן שבו יעשה ממשק API עורפי.

ממש מתחת לפונקציה handleSubmit, הוסף את הקוד הזה:

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

לבסוף, בצע עדכון זה לכפתור השליחה כדי לכלול את רכיב הטעינה, CircularProgress.

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

הנה מה שמשתמש יראה ברגע שייכנס בהצלחה:

אם יש שגיאה בתהליך הכניסה, הם אמורים לראות תגובה כזו:

שפר את תהליך הפיתוח שלך עם ממשק המשתמש של צ'אקרה

ממשק המשתמש של צ'אקרה מספק קבוצה של רכיבי ממשק משתמש מעוצבים וניתנים להתאמה אישית שבהם אתה יכול להשתמש כדי לבנות במהירות ממשק משתמשי תגובה. לא משנה כמה פשוטים או מורכבים העיצובים שלך, לצ'אקרה יש רכיבים כמעט לכל ממשק המשתמש משימות.