Chakra oferuje proste komponenty o czystym, użytecznym stylu.

Stylizowanie aplikacji za pomocą niestandardowego CSS jest zabawą, dopóki projekt nie stanie się bardziej złożony. Wyzwanie polega na stylizacji i utrzymaniu spójnego projektu w całej aplikacji.

Chociaż nadal możesz używać CSS, często bardziej efektywne jest użycie biblioteki stylizacji interfejsu użytkownika, takiej jak Chakra UI. Ta biblioteka zapewnia szybki i bezproblemowy sposób stylizowania aplikacji przy użyciu wstępnie zdefiniowanych komponentów interfejsu użytkownika i rekwizytów narzędziowych.

Pierwsze kroki z interfejsem użytkownika Chakra w aplikacjach React

Na początek Interfejs czakry, śmiało i, Stwórz podstawową aplikację React za pomocą aplikacji create-react-app Komenda. Alternatywnie, możesz użyj Vite, aby stworzyć projekt React.

Następnie zainstaluj te zależności:

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

Kod tego projektu znajdziesz w jego pliku GitHub magazyn.

Dodaj dostawcę motywów Chakra

instagram viewer

Po zainstalowaniu tych zależności musisz owinąć aplikację rozszerzeniem Dostawca Czakry. Możesz dodać dostawcę albo w pliku indeks.jsx, główny.jsx, Lub Aplikacja.jsx następująco:

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

Zawijanie aplikacji za pomocą Dostawca Czakry jest niezbędny, aby uzyskać dostęp do komponentów interfejsu Chakra i właściwości stylizacji w całej aplikacji.

Przełącz różne motywy

Interfejs użytkownika Chakra zapewnia domyślny, wstępnie zbudowany motyw, który obejmuje obsługę jasnych, ciemnych i systemowych trybów kolorów. Można jednak dodatkowo dostosować motywy interfejsu użytkownika aplikacji i inne właściwości stylu w obiekcie motywu, jak określono w Dokumentacja Chakry.

Aby przełączać motywy ciemne i jasne, utwórz plik komponenty/ThemeToggler.jsx plik w źródło katalogu i dołącz następujący kod.

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 śmiało i zaimportuj pakiet ikon:

npm i @chakra-ui/icons

The Przełącznik motywów komponent wyrenderuje przycisk umożliwiający użytkownikom przełączanie między jasnymi i ciemnymi motywami w aplikacji.

Ten komponent uzyskuje dostęp do bieżącego trybu kolorów użyj trybu koloru hak i używa przełącz tryb koloru funkcja przełączania pomiędzy trybami.

The IkonaPrzycisk Komponent nabiera cech ikony, a jednocześnie ma klikalne możliwości przycisku.

Utwórz interfejs formularza logowania

Stwórz nowy Zaloguj.jsx plik w składniki katalogu i dodaj do niego następujący kod:

Najpierw dodaj te 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 zaimportowaniu tych komponentów interfejsu użytkownika zdefiniuj komponent funkcjonalny React i główne komponenty kontenera, które będą przechowywać wszystkie elementy interfejsu użytkownika logowania.

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

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



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

exportdefault Login;

The Skrzynka komponent renderuje a div element — służy jako podstawowy element konstrukcyjny, na którym budujesz wszystkie inne komponenty interfejsu użytkownika czakry. Przewódz drugiej strony jest komponentem Box z ustawioną właściwością wyświetlania przewód. Oznacza to, że możesz użyć właściwości flex do stylizowania komponentu.

Zarówno komponenty Center, jak i Stack są komponentami układu, jednak różnią się nieznacznie funkcjonalnością. Komponent środkowy jest odpowiedzialny za wyrównywanie wszystkich komponentów podrzędnych w swoim środku, podczas gdy Stack grupuje elementy interfejsu użytkownika i dodaje odstępy między nimi.

Teraz zbudujmy sekcję nagłówka formularza. Komponent Header będzie bardzo pomocny w tej części. Wewnątrz komponentu Stack dodaj ten kod.

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

The VStack komponent układa swoje elementy podrzędne w kierunku pionowym. Następnie utwórz komponent karty, który będzie zawierał formularz logowania i jego elementy.

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

Śmiało, zaktualizuj swoje Aplikacja.jsx plik, aby zaimportować login, a także komponent ThemeToggler.

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




 </div>
 )
}

Świetnie! Uruchom serwer programistyczny, aby zaktualizować zmiany.

npm run dev

Teraz, gdy strona zostanie załadowana w przeglądarce, początkowo wyświetli się domyślny motyw trybu jasnego.

Teraz kliknij Przełącz motyw ikona przycisku, aby przełączyć tryb motywu.

Zarządzanie stanem formularza za pomocą hooków reagujących

W tym momencie formularz logowania zawiera tylko dwa pola wejściowe i przycisk logowania. Aby było to funkcjonalne, zacznijmy od zaimplementowania logiki zarządzania stanem za pomocą haków React.

Zdefiniuj następujące stany wewnątrz komponentu funkcjonalnego 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);

Następnie dodaj naZmień handler, która będzie nasłuchiwać zmian w polach wejściowych, przechwytywać dane wejściowe i odpowiednio aktualizować stany adresu e-mail i hasła.

Dodaj te instrukcje kodu do pól wejściowych.

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

Dzięki tym zmianom możesz teraz przechwytywać dane wejściowe użytkownika.

Wdrażanie sprawdzania poprawności formularzy i obsługi błędów za pomocą wbudowanych funkcji interfejsu użytkownika Chakra

Teraz dodaj funkcję obsługi, która przetworzy dane wejściowe i zwróci odpowiednie wyniki. Na formularz znacznik otwierający element, dodaj naPrześlij funkcję obsługi w następujący sposób.

Następnie zdefiniuj uchwytPrześlij funkcjonować. Tuż pod zdefiniowanymi stanami umieść następujący kod.

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

Ta asynchroniczna uchwytPrześlij funkcja zostanie uruchomiona, gdy ktoś prześle formularz. Funkcja ustawia stan ładowania na true — symulując akcję przetwarzania. Możesz wyrenderować pokrętło ładowania interfejsu Chakra, aby zapewnić użytkownikowi wizualną wskazówkę.

Co więcej, funkcja handleSubmit wywoła metodę login użytkownika funkcja, która przyjmuje adres e-mail i hasło jako parametry w celu ich sprawdzenia.

Symuluj żądanie uwierzytelniania API

Aby sprawdzić, czy dane wejściowe dostarczone przez użytkownika są prawidłowe, możesz symulować wywołanie API, definiując login użytkownika funkcja, która zweryfikuje dane logowania w podobny sposób, jak zrobiłby to interfejs API zaplecza.

Tuż pod funkcją handleSubmit dodaj ten kod:

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

Ten kod definiuje funkcję asynchroniczną, która wykonuje prostą logikę sprawdzania logiki.

Funkcje interfejsu użytkownika dotyczące obsługi błędów Chakry.

Możesz zapewnić użytkownikom odpowiednią wizualną informację zwrotną na podstawie ich interakcji w formularzu, korzystając z komponentów opinii Chakry. Aby to zrobić, zacznij od zaimportowania tych komponentów z biblioteki interfejsu użytkownika Chakry.

Alert, AlertIcon, AlertTitle, CircularProgress

Teraz dodaj następujący kod bezpośrednio pod tagiem otwierającym element formularza.

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

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

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

Na koniec wprowadź tę aktualizację przycisku przesyłania, aby uwzględnić moduł ładujący CircularProgress.

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

Oto, co zobaczy użytkownik po pomyślnym zalogowaniu się:

Jeśli w procesie logowania wystąpi błąd, powinna pojawić się następująca odpowiedź:

Ulepsz swój proces rozwoju dzięki interfejsowi Chakra

Chakra UI zapewnia zestaw dobrze zaprojektowanych i konfigurowalnych komponentów interfejsu użytkownika, których można użyć do szybkiego zbudowania Reaguj interfejsy użytkownika. Niezależnie od tego, jak proste lub złożone są Twoje projekty, Chakra zawiera komponenty dla prawie każdego interfejsu użytkownika zadania.