Chakra vă oferă componente simple cu stiluri curate, utilizabile.
Stilarea aplicațiilor cu CSS personalizat este distractivă până când un proiect crește în complexitate. Provocarea constă în stilizarea și menținerea unui design consistent în întreaga aplicație.
Deși puteți folosi în continuare CSS, este adesea mai eficient să utilizați o bibliotecă de stiluri UI, cum ar fi Chakra UI. Această bibliotecă oferă o modalitate rapidă și fără probleme de a vă stila aplicațiile folosind componente predefinite ale interfeței de utilizare și elemente de recuzită utilitare.
Noțiuni introductive cu Chakra UI în aplicațiile React
Pentru a începe cu Chakra UI, merge mai departe și, schelete o aplicație React de bază folosind aplicația create-react-app comanda. Alternativ, puteți utilizați Vite pentru a crea un proiect React.
Apoi, instalați aceste dependențe:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionPuteți găsi codul acestui proiect în documentul său GitHub repertoriu.
Adăugați furnizorul de teme Chakra
După ce ați instalat aceste dependențe, trebuie să împachetați aplicația cu ChakraProvider. Puteți adăuga furnizorul fie în contul dvs index.jsx, main.jsx, sau App.jsx după cum urmează:
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>,
)
Încheierea aplicației cu ChakraProvider este necesar pentru a accesa componentele și proprietățile de stil ale Chakra UI în aplicația dvs.
Comutați diferite teme
Chakra UI oferă o temă predefinită implicită care include suport pentru modurile de culoare deschisă, întunecată și de sistem. Cu toate acestea, puteți personaliza în continuare temele aplicației dvs. UI și alte proprietăți de stil într-un obiect temă, așa cum este specificat în Documentația Chakrei.
Pentru a comuta între temele întunecate și luminoase, creați a componente/ThemeToggler.jsx dosar în src director și includeți următorul cod.
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>
);
}
Acum, mergeți mai departe și importați pachetul de pictograme:
npm i @chakra-ui/iconsThe ThemeToggler componenta va reda un buton care le permite utilizatorilor să comute între temele luminoase și întunecate în aplicație.
Această componentă accesează modul de culoare curent utilizațiColorMode cârlig și folosește comuta ColorMode funcția de comutare între moduri.
The IconButton componenta preia caracteristicile unei pictograme, având și capabilitățile de clic ale unui buton.
Creați o interfață de utilizare a formularului de conectare
Creaza un nou Login.jsx dosar în componente director și adăugați următorul cod la acesta:
Mai întâi, adăugați aceste importuri.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
După importarea acestor componente UI, definiți componenta funcțională React și componentele principale ale containerului care vor deține toate elementele pentru interfața utilizator de conectare.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
The Cutie componenta reda a div element — servește ca element de bază pe care construiești toate celelalte componente Chakra UI. Contracta, pe de altă parte, este o componentă Box cu proprietatea de afișare setată la contracta. Aceasta înseamnă că puteți utiliza proprietățile flex pentru a stila componenta.
Atât componentele Center cât și Stack sunt componente de aspect, cu toate acestea, au ușoare diferențe de funcționalitate. Componenta centrală este responsabilă pentru alinierea tuturor componentelor copil în centrul său, în timp ce Stack, grupează elementele UI și adaugă distanță între ele.
Acum, să construim secțiunea antet a formularului. Componenta Header va fi foarte utilă pentru această parte. În interiorul componentei Stack, adăugați acest cod.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> The VStack componenta își stivuiește elementele copil în direcția verticală. Apoi, creați componenta card care va găzdui formularul de autentificare și elementele acestuia.
'#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
size="lg" borderRadius={8} boxShadow="lg"
>
type="submit"
bg='#2da44e'
color='white'
size='sm'
_hover={{ bg: '#2c974b' }}
_active={{ bg: '#298e46' }}
>
Sign in
</Button>
</Stack>
</form>
</CardBody>
</Card>
Continuați și actualizați-vă App.jsx fișier pentru a importa Login, precum și componenta ThemeToggler.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Grozav! Porniți serverul de dezvoltare pentru a actualiza modificările.
npm run devAcum, odată ce pagina se încarcă în browser, va afișa inițial tema implicită a modului de lumină.
Acum, faceți clic pe Comutați tema butonul pictogramă pentru a comuta modul temă.
Gestionarea stării formularului folosind React Hooks
În acest moment, formularul de conectare conține doar două câmpuri de introducere și un buton de conectare. Pentru a-l face funcțional, să începem prin a implementa logica de gestionare a stării folosind cârlige React.
Definiți următoarele stări în interiorul componentei funcționale 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);Apoi, adăugați cu privire la schimbările funcția de gestionare care va asculta modificările în câmpurile de intrare, va captura intrările și va actualiza e-mailul și starea parolei în consecință.
Adăugați aceste instrucțiuni de cod în câmpurile de intrare.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Cu aceste modificări, acum capturați intrările utilizatorilor.
Implementarea validării formularelor și a gestionării erorilor cu funcțiile încorporate ale Chakra UI
Acum, adăugați o funcție de gestionare care va procesa intrările și va returna rezultatele corespunzătoare. Pe formă eticheta de deschidere a elementului, adăugați onSubmit funcția de manipulare după cum urmează.
Apoi, definiți handleSubmit funcţie. Chiar sub stările pe care le-ați definit, includeți următorul cod.
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('');
}
};
Acest asincron handleSubmit funcția se va declanșa atunci când cineva trimite formularul. Funcția setează starea de încărcare la adevărat - simulând o acțiune de procesare. Puteți reda dispozitivul de încărcare al lui Chakra UI pentru a oferi un indiciu vizual utilizatorului.
În plus, funcția handleSubmit va apela logare utilizator funcție care ia e-mailul și parola ca parametri pentru a le valida.
Simulați o solicitare API de autentificare
Pentru a verifica dacă intrările furnizate de un utilizator sunt valide, puteți simula un apel API prin definirea logare utilizator funcție care va verifica acreditările de conectare similare cu cea a unui API backend.
Chiar sub funcția handleSubmit, adăugați acest cod:
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};Acest cod definește o funcție asincronă care realizează o logică simplă de validare a logicii.
Caracteristicile interfeței de utilizare a erorilor Chakra.
Puteți oferi feedback vizual adecvat utilizatorilor pe baza interacțiunilor lor pe formular, utilizând componentele de feedback ale Chakra. Pentru a face asta, începeți prin a importa aceste componente din biblioteca UI Chakra.
Alert, AlertIcon, AlertTitle, CircularProgressAcum, adăugați următorul cod chiar sub eticheta de deschidere a elementului de formular.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} În cele din urmă, faceți această actualizare la butonul de trimitere pentru a include componenta de încărcare, CircularProgress.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Iată ce va vedea un utilizator după ce se conectează cu succes:
Dacă există o eroare în procesul de conectare, ar trebui să vadă un răspuns ca acesta:
Îmbunătățiți-vă procesul de dezvoltare cu Chakra UI
Chakra UI oferă un set de componente UI bine concepute și personalizabile pe care le puteți folosi pentru a construi rapid React UI-uri. Indiferent de cât de simple sau complexe sunt design-urile tale, Chakra are componente pentru aproape toată interfața de utilizare sarcini.
