Chakra geeft je eenvoudige componenten met schone, bruikbare stijlen.
Het stylen van applicaties met aangepaste CSS is allemaal leuk totdat een project in complexiteit groeit. De uitdaging ligt in het stylen en behouden van een consistent ontwerp gedurende de hele toepassing.
Hoewel je nog steeds CSS kunt gebruiken, is het vaak effectiever om een UI-stylingbibliotheek zoals Chakra UI te gebruiken. Deze bibliotheek biedt een snelle en probleemloze manier om uw apps te stylen met behulp van vooraf gedefinieerde UI-componenten en hulpprogramma's.
Aan de slag met Chakra UI in React-applicaties
Om mee te beginnen Chakra-UI, ga je gang en, bouw een eenvoudige React-applicatie op met behulp van de create-react-app commando. Als alternatief kunt u dat ook doen gebruik Vite om een React-project te maken.
Installeer vervolgens deze afhankelijkheden:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionU kunt de code van dit project vinden in zijn GitHub opslagplaats.
Voeg Chakra's themaprovider toe
Nadat u deze afhankelijkheden hebt geïnstalleerd, moet u de toepassing omwikkelen met de ChakraProvider. U kunt de provider toevoegen in uw index.jsx, hoofd.jsx, of App.jsx als volgt:
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>,
)
De applicatie omwikkelen met de ChakraProvider is nodig om toegang te krijgen tot de componenten en stylingeigenschappen van Chakra UI in uw hele toepassing.
Schakel tussen verschillende thema's
Chakra UI biedt een standaard vooraf gebouwd thema dat ondersteuning biedt voor de lichte, donkere en systeemkleurmodi. U kunt de UI-thema's en andere stijleigenschappen van uw toepassing echter verder aanpassen binnen een themaobject, zoals gespecificeerd in Chakra's documentatie.
Als u tussen de donkere en lichte thema's wilt schakelen, maakt u een componenten/ThemeToggler.jsx bestand in de src directory en voeg de volgende code toe.
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>
);
}
Ga nu door en importeer het pictogrammenpakket:
npm i @chakra-ui/iconsDe ThemaToggler component zal een knop weergeven waarmee gebruikers kunnen schakelen tussen lichte en donkere thema's in de app.
Deze component heeft toegang tot de huidige kleurmodus gebruikColorMode haak en maakt gebruik van de schakelKleurmodus functie om tussen modi te schakelen.
De PictogramKnop component neemt de kenmerken van een pictogram over en heeft ook de klikbare mogelijkheden van een knop.
Maak een gebruikersinterface voor het inlogformulier
Maak een nieuwe Inloggen.jsx bestand in de componenten directory en voeg daar de volgende code aan toe:
Voeg eerst deze import toe.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
Na het importeren van deze UI-componenten definieert u de functionele React-component en de hoofdcontainercomponenten die alle elementen voor de login-gebruikersinterface bevatten.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
De Doos component geeft a weer div element: het dient als de basisbouwsteen waarop je alle andere Chakra UI-componenten bouwt. Buigen, aan de andere kant, is een Box-component waarvan de weergave-eigenschap is ingesteld op buigen. Dit betekent dat u de flex-eigenschappen kunt gebruiken om de component op te maken.
Zowel de Center- als de Stack-componenten zijn lay-outcomponenten, maar er zijn kleine verschillen in functionaliteit. De middelste component is verantwoordelijk voor het uitlijnen van alle onderliggende componenten in het midden, terwijl Stack de UI-elementen groepeert en de afstand ertussen toevoegt.
Laten we nu het koptekstgedeelte van het formulier bouwen. De Header-component zal erg nuttig zijn voor dit onderdeel. Voeg deze code toe in de Stack-component.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> De VStack component stapelt zijn onderliggende elementen in verticale richting. Maak vervolgens de kaartcomponent waarin het inlogformulier en de bijbehorende elementen zijn ondergebracht.
'#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>
Ga je gang en update je App.jsx -bestand om de Login- en de ThemeToggler-component te importeren.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Geweldig! Start de ontwikkelingsserver om de wijzigingen bij te werken.
npm run devZodra de pagina in de browser is geladen, wordt nu in eerste instantie het standaardlichtmodusthema weergegeven.
Klik nu op de Thema wisselen pictogramknop om de themamodus te schakelen.
Formulierstatus beheren met behulp van React Hooks
Op dit moment bevat het inlogformulier slechts twee invoervelden en een inlogknop. Om het functioneel te maken, beginnen we met het implementeren van logica voor staatsbeheer met behulp van React-haken.
Definieer de volgende statussen binnen de functionele component Inloggen.
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);Voeg vervolgens de opWijzigen handler-functie die luistert naar wijzigingen in de invoervelden, de invoer vastlegt en de e-mail- en wachtwoordstatus dienovereenkomstig bijwerkt.
Voeg deze code-instructies toe aan de invoervelden.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Met deze wijzigingen legt u nu gebruikersinvoer vast.
Formuliervalidatie en foutafhandeling implementeren met de ingebouwde functies van Chakra UI
Voeg nu een handlerfunctie toe die de invoer verwerkt en de juiste resultaten retourneert. Op de formulier element openingstag, voeg de opVerzenden De handlerfunctie is als volgt.
Definieer vervolgens de handvatVerzenden functie. Voeg direct onder de statussen die u hebt gedefinieerd de volgende code toe.
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('');
}
};
Dit asynchroon handvatVerzenden De functie wordt geactiveerd wanneer iemand het formulier indient. De functie stelt de laadstatus in op true, waardoor een verwerkingsactie wordt gesimuleerd. U kunt de laadspinner van Chakra UI weergeven om de gebruiker een visueel signaal te geven.
Bovendien zal de handleSubmit-functie de gebruiker login functie die het e-mailadres en wachtwoord als parameters gebruikt om ze te valideren.
Simuleer een Authentication API Request
Om te verifiëren dat de invoer van een gebruiker geldig is, kunt u een API-aanroep simuleren door de gebruiker login functie die de inloggegevens verifieert, vergelijkbaar met hoe een backend-API dat zou doen.
Voeg direct onder de handleSubmit-functie deze code toe:
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};Deze code definieert een asynchrone functie die een eenvoudige logische validatielogica uitvoert.
Chakra's foutafhandeling van UI-functies.
U kunt geschikte visuele feedback geven aan gebruikers op basis van hun interacties op het formulier door de feedbackcomponenten van Chakra te gebruiken. Om dat te doen, begint u met het importeren van deze componenten uit de UI-bibliotheek van Chakra.
Alert, AlertIcon, AlertTitle, CircularProgressVoeg nu de volgende code toe direct onder de openingstag van het formulierelement.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Maak ten slotte deze update van de verzendknop om de laadspinner, CircularProgress, component op te nemen.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Dit is wat een gebruiker te zien krijgt zodra hij of zij succesvol heeft ingelogd:
Als er een fout is opgetreden tijdens het inlogproces, zouden ze een reactie als deze moeten zien:
Verbeter uw ontwikkelingsproces met Chakra UI
Chakra UI biedt een reeks goed ontworpen en aanpasbare UI-componenten die u kunt gebruiken om snel te bouwen Reageer UI's. Ongeacht hoe eenvoudig of complex uw ontwerpen zijn, Chakra heeft componenten voor bijna elke gebruikersinterface taken.
