A Chakra egyszerű összetevőket kínál tiszta, használható stílusokkal.
Az alkalmazások egyedi CSS-sel történő stílusbeállítása mindaddig szórakoztató, amíg egy projekt bonyolultabbá nem válik. A kihívás a stílus kialakításában és az egységes kialakítás fenntartásában rejlik az alkalmazás során.
Bár továbbra is használhatja a CSS-t, gyakran hatékonyabb egy olyan felhasználói felület-stílusú könyvtár használata, mint a Chakra UI. Ez a könyvtár gyors és problémamentes módot biztosít az alkalmazások stílusának kialakítására előre meghatározott felhasználói felület-összetevők és segédprogram-rekvizíciók segítségével.
A Chakra felhasználói felületének első lépései a React alkalmazásokban
A kezdéshez Csakra UI, menj előre és állványozzon egy alap React alkalmazást a Create-react-app segítségével parancs. Alternatív megoldásként megteheti a Vite segítségével hozzon létre egy React projektet.
Ezután telepítse ezeket a függőségeket:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionA projekt kódja megtalálható benne GitHub adattár.
Adja hozzá a Chakra témaszolgáltatóját
Miután telepítette ezeket a függőségeket, be kell csomagolnia az alkalmazást a ChakraProvider. Hozzáadhatja a szolgáltatót a sajátjához index.jsx, main.jsx, vagy App.jsx alábbiak szerint:
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>,
)
Az alkalmazás becsomagolása a ChakraProvider szükséges a Chakra UI összetevőihez és stílustulajdonságaihoz az alkalmazás során.
Váltás a különböző témák között
A Chakra UI alapértelmezett előre beépített témát biztosít, amely támogatja a világos, sötét és a rendszerszín módokat. Az alkalmazás felhasználói felületi témáit és egyéb stílustulajdonságait azonban tovább testreszabhatja a témaobjektumokon belül, ahogyan azt a: Chakra dokumentációja.
A sötét és világos témák közötti váltáshoz hozzon létre a összetevők/ThemeToggler.jsx fájl a src könyvtárat, és tartalmazza a következő kódot.
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>
);
}
Most folytassa, és importálja az ikoncsomagot:
npm i @chakra-ui/iconsA ThemeToggler komponens egy gombot jelenít meg, amely lehetővé teszi a felhasználók számára, hogy váltsanak a világos és sötét témák között az alkalmazásban.
Ez a komponens hozzáfér az aktuális színmódhoz használd a ColorMode-ot horog és használja a váltson ColorMode funkció az üzemmódok közötti váltáshoz.
A IconButton komponens egy ikon jellemzőit veszi fel, miközben rendelkezik egy gomb kattintható képességével is.
Hozzon létre egy bejelentkezési űrlap felhasználói felületet
Újat csinálni Bejelentkezés.jsx fájl a alkatrészek könyvtárat, és adja hozzá a következő kódot:
Először is adja hozzá ezeket az importokat.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
A felhasználói felület összetevőinek importálása után határozza meg a React funkcionális összetevőt és a fő tároló összetevőket, amelyek a bejelentkezési felhasználói felület összes elemét tartalmazzák.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
A Doboz komponens teszi a div elem – ez szolgál az alap építőelemként, amelyre ráépíted az összes többi Chakra UI komponenst. Flex, másrészt egy Box komponens, amelynek megjelenítési tulajdonsága a következőre van állítva Flex. Ez azt jelenti, hogy a flex tulajdonságokat használhatja az összetevő stílusához.
Mind a Center, mind a Stack komponensek elrendezési összetevők, azonban funkcionalitásukban vannak kis eltérések. A középső komponens felelős azért, hogy az összes alárendelt komponenst a középpontjába igazítsa, míg a Stack a felhasználói felület elemeit csoportosítja, és távolságot ad közöttük.
Most építsük fel az űrlap fejléc részét. A Fejléc komponens nagyon hasznos lesz ehhez a részhez. Adja hozzá ezt a kódot a Stack komponensen belül.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> A VStack komponens függőleges irányban egymásra rakja gyermekelemeit. Ezután hozza létre a bejelentkezési űrlapot és annak elemeit tartalmazó kártyakomponenst.
'#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>
Menj előre, és frissítsd App.jsx fájlt a bejelentkezés, valamint a ThemeToggler összetevő importálásához.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Nagy! Indítsa el a fejlesztőkiszolgálót a módosítások frissítéséhez.
npm run devMost, ha az oldal betöltődik a böngészőben, először az alapértelmezett világos mód témája jelenik meg.
Most kattintson a Téma váltása ikon gombbal válthat a téma mód között.
Űrlapállapot kezelése React Hook segítségével
Ezen a ponton a bejelentkezési űrlap csak két beviteli mezőt és egy bejelentkezési gombot tartalmaz. Ahhoz, hogy működőképes legyen, kezdjük az állapotkezelési logika megvalósításával React horgok segítségével.
Határozza meg a következő állapotokat a Login funkcionális komponensen belül.
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);Ezután adja hozzá a onChange kezelő funkció, amely figyeli a beviteli mezők változásait, rögzíti a bemeneteket, és ennek megfelelően frissíti az e-mail- és jelszóállapotokat.
Adja hozzá ezeket a kódutasításokat a beviteli mezőkhöz.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Ezekkel a változtatásokkal mostantól rögzítheti a felhasználói bemeneteket.
Űrlapérvényesítés és hibakezelés megvalósítása a Chakra UI beépített funkcióival
Most adjon hozzá egy kezelő függvényt, amely feldolgozza a bemeneteket, és megfelelő eredményeket ad vissza. A forma elem nyitó címkéjét, adja hozzá a onSubmit kezelő funkciót az alábbiak szerint.
Ezután határozza meg a handleSubmit funkció. Közvetlenül az Ön által meghatározott állapotok alatt írja be a következő kódot.
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('');
}
};
Ez aszinkron handleSubmit függvény akkor aktiválódik, amikor valaki elküldi az űrlapot. A függvény a betöltési állapotot igazra állítja – egy feldolgozási műveletet szimulálva. Megjelenítheti a Chakra UI betöltési forgóját, hogy vizuális jelzést adjon a felhasználónak.
Ezenkívül a handleSubmit függvény meghívja a bejelentkezés függvény, amely paraméterként veszi az e-mailt és a jelszót az érvényesítésükhöz.
Hitelesítési API-kérés szimulálása
Annak ellenőrzésére, hogy a felhasználó által megadott bemenetek érvényesek, szimulálhat egy API-hívást a következő megadásával bejelentkezés függvény, amely a háttér API-hoz hasonlóan ellenőrzi a bejelentkezési hitelesítő adatokat.
Közvetlenül a handleSubmit függvény alatt adja hozzá ezt a kódot:
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};Ez a kód egy aszinkron függvényt határoz meg, amely egyszerű logikai ellenőrzési logikát hajt végre.
A Chakra hibakezelési felhasználói felület funkciói.
A Chakra visszajelzési komponenseinek használatával megfelelő vizuális visszajelzést adhat a felhasználóknak az űrlapon végzett interakcióik alapján. Ehhez először importálja ezeket az összetevőket a Chakra UI könyvtárából.
Alert, AlertIcon, AlertTitle, CircularProgressMost adja hozzá a következő kódot közvetlenül az űrlapelem nyitócímkéje alá.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Végül végezze el ezt a frissítést a beküldés gombon, hogy tartalmazza a betöltési pörgetőt, a CircularProgress összetevőt.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}A sikeres bejelentkezés után a felhasználó a következőket fogja látni:
Ha hiba történik a bejelentkezési folyamatban, a következő választ kell látniuk:
Javítsa fejlesztési folyamatát a Chakra UI segítségével
A Chakra UI jól megtervezett és testreszabható felhasználói felület-összetevőket kínál, amelyek segítségével gyorsan építhet React UI-k. Függetlenül attól, hogy mennyire egyszerűek vagy összetettek a tervei, a Chakra szinte minden felhasználói felülethez rendelkezik összetevőkkel feladatokat.