Το τσάκρα σας δίνει απλά εξαρτήματα με καθαρά, χρησιμοποιήσιμα στυλ.

Η διαμόρφωση εφαρμογών στυλ με προσαρμοσμένο CSS είναι διασκεδαστική έως ότου ένα έργο μεγαλώσει σε πολυπλοκότητα. Η πρόκληση έγκειται στο στυλ και τη διατήρηση ενός συνεπούς σχεδίου σε όλη την εφαρμογή.

Ενώ μπορείτε ακόμα να χρησιμοποιήσετε το CSS, είναι συχνά πιο αποτελεσματικό να χρησιμοποιείτε μια βιβλιοθήκη με στυλ UI, όπως το Chakra UI. Αυτή η βιβλιοθήκη παρέχει έναν γρήγορο και απροβλημάτιστο τρόπο διαμόρφωσης των εφαρμογών σας χρησιμοποιώντας προκαθορισμένα στοιχεία διεπαφής χρήστη και βοηθητικά στηρίγματα.

Ξεκινώντας με το Chakra UI στο React Applications

Για να ξεκινήσετε με Chakra UI, προχωρήστε και, δημιουργήστε μια βασική εφαρμογή React χρησιμοποιώντας την εφαρμογή δημιουργίας-react-app εντολή. Εναλλακτικά, μπορείτε χρησιμοποιήστε το Vite για να δημιουργήσετε ένα έργο React.

Στη συνέχεια, εγκαταστήστε αυτές τις εξαρτήσεις:

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

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό GitHub αποθήκη.

instagram viewer

Προσθέστε τον πάροχο θεμάτων του Τσάκρα

Αφού εγκαταστήσετε αυτές τις εξαρτήσεις, πρέπει να τυλίξετε την εφαρμογή με το 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 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'
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 γάντζο και χρησιμοποιεί το toggleColorMode λειτουργία για εναλλαγή μεταξύ των λειτουργιών.

ο IconButton Το στοιχείο αποκτά τα χαρακτηριστικά ενός εικονιδίου, ενώ έχει επίσης τις δυνατότητες ενός κουμπιού με δυνατότητα κλικ.

Δημιουργήστε μια διεπαφή χρήστη φόρμας σύνδεσης

Δημιούργησε ένα νέο Είσοδος.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 με την ιδιότητα εμφάνισης ρυθμισμένη σε καλώδιο. Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε τις ιδιότητες flex για να διαμορφώσετε το στοιχείο.

Και τα δύο στοιχεία Center και Stack είναι στοιχεία διάταξης, ωστόσο, έχουν μικρές διαφορές στη λειτουργικότητα. Το κεντρικό στοιχείο είναι υπεύθυνο για την ευθυγράμμιση όλων των θυγατρικών στοιχείων στο κέντρο του, ενώ το 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.

Ορίστε τις ακόλουθες καταστάσεις μέσα στο λειτουργικό στοιχείο Σύνδεση.

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 λειτουργία χειριστή που θα ακούει τις αλλαγές στα πεδία εισαγωγής, θα καταγράφει τις εισόδους και θα ενημερώνει ανάλογα τις καταστάσεις email και κωδικού πρόσβασης.

Προσθέστε αυτές τις δηλώσεις κώδικα στα πεδία εισαγωγής.

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

Με αυτές τις αλλαγές, καταγράφετε πλέον εισόδους χρηστών.

Εφαρμογή επικύρωσης φόρμας και διαχείρισης σφαλμάτων με τις ενσωματωμένες δυνατότητες του Chakra UI

Τώρα, προσθέστε μια συνάρτηση χειριστή που θα επεξεργαστεί τις εισόδους και θα επιστρέψει τα κατάλληλα αποτελέσματα. Στο μορφή ετικέτα ανοίγματος στοιχείου, προσθέστε το onΥποβολή ο χειριστής λειτουργεί ως εξής.

Στη συνέχεια, ορίστε το 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 θα καλέσει το σύνδεση χρήστη λειτουργία που λαμβάνει το email και τον κωδικό πρόσβασης ως παραμέτρους για την επικύρωσή τους.

Προσομοίωση ενός αιτήματος API ελέγχου ταυτότητας

Για να επαληθεύσετε ότι οι είσοδοι που παρέχονται από έναν χρήστη είναι έγκυρες, μπορείτε να προσομοιώσετε μια κλήση API ορίζοντας το σύνδεση χρήστη λειτουργία που θα επαληθεύσει τα διαπιστευτήρια σύνδεσης παρόμοια με αυτό που θα έκανε ένα backend 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')}

Δείτε τι θα δει ένας χρήστης μόλις συνδεθεί με επιτυχία:

Εάν υπάρχει σφάλμα στη διαδικασία σύνδεσης, θα πρέπει να δουν μια απάντηση όπως αυτή:

Βελτιώστε τη διαδικασία ανάπτυξής σας με το Chakra UI

Το Chakra UI παρέχει ένα σύνολο καλά σχεδιασμένων και προσαρμόσιμων στοιχείων διεπαφής που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε γρήγορα React UIs. Ανεξάρτητα από το πόσο απλά ή σύνθετα είναι τα σχέδιά σας, το Chakra έχει στοιχεία για σχεδόν όλα τα UI καθήκοντα.