Čakra vám dáva jednoduché komponenty s čistými, použiteľnými štýlmi.

Štylizácia aplikácií pomocou vlastného CSS je zábava, kým sa projekt nezväčší na komplexnosti. Výzva spočíva v štýle a zachovaní konzistentného dizajnu počas celej aplikácie.

Aj keď stále môžete používať CSS, často je efektívnejšie použiť knižnicu na úpravu používateľského rozhrania, ako je napríklad používateľské rozhranie Chakra. Táto knižnica poskytuje rýchly a bezproblémový spôsob úpravy vašich aplikácií pomocou preddefinovaných komponentov používateľského rozhrania a pomocných prvkov.

Začíname s používateľským rozhraním Chakra v aplikáciách React

Na začiatok Čakrové používateľské rozhranie, pokračuj a, lešenie základnej aplikácie React pomocou aplikácie create-react-app príkaz. Prípadne môžete použite Vite na vytvorenie projektu React.

Ďalej nainštalujte tieto závislosti:

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

Kód tohto projektu nájdete v ňom GitHub Úložisko.

Pridajte poskytovateľa tém čakry

instagram viewer

Po nainštalovaní týchto závislostí musíte aplikáciu zabaliť do súboru ChakraProvider. Poskytovateľa môžete pridať buď vo svojom index.jsx, main.jsx, alebo App.jsx nasledovne:

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

Balenie aplikácie s ChakraProvider je potrebný na prístup ku komponentom používateľského rozhrania Chakra a vlastnostiam štýlu v celej vašej aplikácii.

Prepnúť rôzne motívy

Používateľské rozhranie Chakra poskytuje predvolenú predpripravenú tému, ktorá zahŕňa podporu pre svetlé, tmavé a systémové farebné režimy. Môžete však ďalej prispôsobiť motívy používateľského rozhrania vašej aplikácie a ďalšie vlastnosti štýlu v rámci objektu témy, ako je uvedené v Dokumentácia čakry.

Ak chcete prepínať tmavé a svetlé témy, vytvorte a komponenty/ThemeToggler.jsx súbor v src adresár a zahrňte nasledujúci kód.

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

Teraz pokračujte a importujte balík ikon:

npm i @chakra-ui/icons

The ThemeToggler komponent vykreslí tlačidlo, ktoré umožňuje používateľom prepínať medzi svetlými a tmavými témami v aplikácii.

Tento komponent pristupuje k aktuálnemu farebnému režimu použiteColorMode háčik a používa toggleColorMode funkcia na prepínanie medzi režimami.

The IconButton komponent preberá vlastnosti ikony a zároveň má klikacie možnosti tlačidla.

Vytvorte používateľské rozhranie prihlasovacieho formulára

Vytvorte nový Login.jsx súbor v komponentov adresár a pridajte doň nasledujúci kód:

Najprv pridajte tieto importy.

import React, { useState } from'react';
import { 
 Box,
 Button,
 Card,
 CardBody,
 Center,
 Flex,
 FormControl,
 FormLabel,
 Heading,
 HStack,
 Input,
 Stack,
 VStack,
 useColorMode,
} from'@chakra-ui/react';

Po importovaní týchto komponentov používateľského rozhrania definujte funkčný komponent React a hlavné komponenty kontajnera, ktoré budú obsahovať všetky prvky prihlasovacieho používateľského rozhrania.

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

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



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

exportdefault Login;

The Box komponent vykresľuje a div prvok — slúži ako základný stavebný blok, na ktorom staviate všetky ostatné komponenty používateľského rozhrania čakry. Flex, na druhej strane je komponentom Box s vlastnosťou display nastavenou na flex. To znamená, že na štýl komponentu môžete použiť vlastnosti flex.

Komponenty Center aj Stack sú komponentmi rozloženia, majú však malé rozdiely vo funkčnosti. Stredový komponent je zodpovedný za zarovnanie všetkých podradených komponentov do jeho stredu, zatiaľ čo zásobník zoskupuje prvky používateľského rozhrania a pridáva medzi ne medzery.

Teraz zostavme hlavičku formulára. Komponent Header bude pre túto časť skutočne užitočný. Tento kód pridajte do komponentu Stack.

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

The VStack komponent ukladá svoje podradené prvky vo vertikálnom smere. Ďalej vytvorte komponent karty, ktorý bude obsahovať prihlasovací formulár a jeho prvky.

'#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>

Pokračujte a aktualizujte svoje App.jsx importovať prihlásenie, ako aj komponent ThemeToggler.

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




 </div>
 )
}

Skvelé! Spustite vývojový server a aktualizujte zmeny.

npm run dev

Po načítaní stránky v prehliadači sa na začiatku zobrazí predvolená téma svetelného režimu.

Teraz kliknite na Prepnúť tému tlačidlom ikony prepnete režim témy.

Správa stavu formulára pomocou React Hooks

V tomto bode prihlasovací formulár obsahuje iba dve vstupné polia a prihlasovacie tlačidlo. Aby to bolo funkčné, začnime implementáciou logiky riadenia štátu pomocou háčikov React.

Definujte nasledujúce stavy vo funkčnom komponente 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);

Ďalej pridajte pri zmene handler funkciu, ktorá bude počúvať zmeny vo vstupných poliach, zachytávať vstupy a podľa toho aktualizovať stav e-mailu a hesla.

Pridajte tieto kódové príkazy do vstupných polí.

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

Pomocou týchto zmien teraz zachytávate vstupy používateľov.

Implementácia overovania formulárov a spracovania chýb pomocou vstavaných funkcií používateľského rozhrania Chakra

Teraz pridajte funkciu obsluhy, ktorá spracuje vstupy a vráti príslušné výsledky. Na formulár element otvárania tag, pridajte onOdoslať funkciu handlera nasledovne.

Ďalej definujte rukoväťOdoslať funkciu. Hneď pod stavmi, ktoré ste definovali, uveďte nasledujúci kód.

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('');
 }
};

Tento asynchrónny rukoväťOdoslať funkcia sa spustí, keď niekto odošle formulár. Funkcia nastaví stav načítania na hodnotu true – simuluje akciu spracovania. Môžete vykresliť číselník načítania používateľského rozhrania Chakra, aby ste používateľovi poskytli vizuálnu pomôcku.

Okrem toho funkcia handleSubmit zavolá userLogin funkcia, ktorá berie e-mail a heslo ako parametre na ich overenie.

Simulujte požiadavku rozhrania API na overenie totožnosti

Ak chcete overiť, či sú vstupy poskytnuté používateľom platné, môžete simulovať volanie API definovaním userLogin funkcia, ktorá overí prihlasovacie údaje podobne ako backend API.

Hneď pod funkciu handleSubmit pridajte tento kód:

const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
 setTimeout(() => {
if (email '[email protected]' && password 'password') {
 resolve();
 } else {
 reject();
 }
 }, 1000);
 });
};

Tento kód definuje asynchrónnu funkciu, ktorá vykonáva jednoduchú logiku overenia logiky.

Funkcie používateľského rozhrania na spracovanie chýb čakry.

Môžete poskytnúť vhodnú vizuálnu spätnú väzbu používateľom na základe ich interakcií s formulárom pomocou komponentov spätnej väzby čakry. Ak to chcete urobiť, začnite importovaním týchto komponentov z knižnice používateľského rozhrania Chakra.

Alert, AlertIcon, AlertTitle, CircularProgress

Teraz pridajte nasledujúci kód priamo pod otváraciu značku prvku formulára.

{error && !isLoggedIn && 
'error' variant='solid'> 

{error}</AlertTitle>
 </Alert>
}
{isLoggedIn && ( 
"success" variant='solid'>

{success}</AlertTitle>
 </Alert>
)}

Nakoniec vykonajte túto aktualizáciu tlačidla odoslania tak, aby obsahovala prvok načítavania, CircularProgress.

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

Tu je to, čo používateľ uvidí po úspešnom prihlásení:

Ak sa v procese prihlásenia vyskytne chyba, mala by sa im zobraziť takáto odpoveď:

Zlepšite svoj vývojový proces pomocou používateľského rozhrania Chakra

Používateľské rozhranie Chakra poskytuje súbor dobre navrhnutých a prispôsobiteľných komponentov používateľského rozhrania, ktoré môžete použiť na rýchle zostavenie Používateľské rozhrania React. Bez ohľadu na to, aké jednoduché alebo zložité sú vaše návrhy, Chakra má komponenty pre takmer všetky používateľské rozhrania úlohy.