Chakra bietet Ihnen einfache Komponenten mit klaren, benutzerfreundlichen Stilen.
Das Gestalten von Anwendungen mit benutzerdefiniertem CSS macht Spaß, bis die Komplexität eines Projekts zunimmt. Die Herausforderung besteht darin, während der gesamten Anwendung ein einheitliches Design zu gestalten und beizubehalten.
Obwohl Sie immer noch CSS verwenden können, ist es oft effektiver, eine UI-Stilbibliothek wie Chakra UI zu verwenden. Diese Bibliothek bietet eine schnelle und problemlose Möglichkeit, Ihre Apps mit vordefinierten UI-Komponenten und Hilfsprogrammen zu gestalten.
Erste Schritte mit der Chakra-Benutzeroberfläche in React-Anwendungen
Zum Einstieg Chakra-Benutzeroberfläche, fahre fort und, Erstellen Sie mit der Create-React-App ein Gerüst für eine grundlegende React-Anwendung Befehl. Alternativ können Sie Verwenden Sie Vite, um ein React-Projekt zu erstellen.
Als nächstes installieren Sie diese Abhängigkeiten:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionDen Code dieses Projekts finden Sie in seiner GitHub Repository.
Fügen Sie den Theme-Anbieter von Chakra hinzu
Nachdem Sie diese Abhängigkeiten installiert haben, müssen Sie die Anwendung mit umschließen ChakraProvider. Sie können den Anbieter entweder in Ihrem hinzufügen index.jsx, main.jsx, oder App.jsx wie folgt:
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>,
)
Verpacken Sie die Anwendung mit dem ChakraProvider ist erforderlich, um in Ihrer gesamten Anwendung auf die Komponenten und Stileigenschaften der Chakra-Benutzeroberfläche zuzugreifen.
Verschiedene Themen umschalten
Die Chakra-Benutzeroberfläche bietet ein standardmäßig vorgefertigtes Design, das die Modi Hell, Dunkel und Systemfarbe unterstützt. Sie können jedoch die UI-Designs und andere Stileigenschaften Ihrer Anwendung innerhalb eines Designobjekts weiter anpassen, wie in angegeben Dokumentation von Chakra.
Um zwischen den dunklen und hellen Themen umzuschalten, erstellen Sie eine Komponenten/ThemeToggler.jsx Datei in der src Verzeichnis und fügen Sie den folgenden Code ein.
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>
);
}
Fahren Sie nun fort und importieren Sie das Symbolpaket:
npm i @chakra-ui/iconsDer ThemeToggler Die Komponente rendert eine Schaltfläche, mit der Benutzer zwischen hellen und dunklen Themen in der App wechseln können.
Diese Komponente greift auf den aktuellen Farbmodus zu useColorMode Haken und nutzt die toggleColorMode Funktion zum Wechseln zwischen den Modi.
Der IconButton Die Komponente übernimmt die Eigenschaften eines Symbols und verfügt gleichzeitig über die anklickbaren Funktionen einer Schaltfläche.
Erstellen Sie eine Benutzeroberfläche für das Anmeldeformular
Erstelle eine neue Login.jsx Datei in der Komponenten Verzeichnis und fügen Sie den folgenden Code hinzu:
Fügen Sie zunächst diese Importe hinzu.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
Definieren Sie nach dem Importieren dieser UI-Komponenten die React-Funktionskomponente und die Hauptcontainerkomponenten, die alle Elemente für die Anmeldebenutzeroberfläche enthalten.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
Der Kasten Komponente rendert a div Element – es dient als Basisbaustein, auf dem Sie alle anderen Chakra-UI-Komponenten aufbauen. Biegen, hingegen ist eine Box-Komponente, deren Anzeigeeigenschaft auf festgelegt ist biegen. Dies bedeutet, dass Sie die Flex-Eigenschaften zum Stylen der Komponente verwenden können.
Sowohl Center- als auch Stack-Komponenten sind Layoutkomponenten, weisen jedoch geringfügige Unterschiede in der Funktionalität auf. Die mittlere Komponente ist dafür verantwortlich, alle untergeordneten Komponenten in ihrer Mitte auszurichten, während Stack UI-Elemente gruppiert und Abstände zwischen ihnen hinzufügt.
Lassen Sie uns nun den Kopfbereich des Formulars erstellen. Die Header-Komponente wird für diesen Teil sehr hilfreich sein. Fügen Sie diesen Code innerhalb der Stack-Komponente hinzu.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> Der VStack Die Komponente stapelt ihre untergeordneten Elemente in vertikaler Richtung. Als nächstes erstellen Sie die Kartenkomponente, die das Anmeldeformular und seine Elemente enthält.
'#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>
Machen Sie weiter und aktualisieren Sie Ihre App.jsx Datei zum Importieren des Logins sowie der ThemeToggler-Komponente.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Großartig! Starten Sie den Entwicklungsserver, um die Änderungen zu aktualisieren.
npm run devSobald die Seite nun im Browser geladen wird, wird zunächst das Standarddesign für den Lichtmodus angezeigt.
Klicken Sie nun auf Thema umschalten Symboltaste, um den Themenmodus zu wechseln.
Verwalten des Formularstatus mithilfe von React Hooks
Zu diesem Zeitpunkt enthält das Anmeldeformular nur zwei Eingabefelder und eine Anmeldeschaltfläche. Um es funktionsfähig zu machen, beginnen wir mit der Implementierung der Statusverwaltungslogik mit React-Hooks.
Definieren Sie die folgenden Zustände innerhalb der Login-Funktionskomponente.
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);Als nächstes fügen Sie die hinzu bei Änderung Handler-Funktion, die Änderungen an den Eingabefeldern abhört, die Eingaben erfasst und den E-Mail- und Passwortstatus entsprechend aktualisiert.
Fügen Sie diese Codeanweisungen zu den Eingabefeldern hinzu.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Mit diesen Änderungen erfassen Sie nun Benutzereingaben.
Implementierung der Formularvalidierung und Fehlerbehandlung mit den integrierten Funktionen der Chakra-Benutzeroberfläche
Fügen Sie nun eine Handlerfunktion hinzu, die die Eingaben verarbeitet und entsprechende Ergebnisse zurückgibt. Auf der bilden Element-Öffnungs-Tag, fügen Sie das hinzu onSubmit Handler-Funktion wie folgt.
Als nächstes definieren Sie die handleSubmit Funktion. Fügen Sie direkt unter den von Ihnen definierten Zuständen den folgenden Code ein.
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('');
}
};
Dies asynchron handleSubmit Die Funktion wird ausgelöst, wenn jemand das Formular absendet. Die Funktion setzt den Ladezustand auf „True“ und simuliert so eine Verarbeitungsaktion. Sie können den Lade-Spinner der Chakra-Benutzeroberfläche rendern, um dem Benutzer einen visuellen Hinweis zu geben.
Darüber hinaus ruft die Funktion handleSubmit auf Benutzer-Anmeldung Funktion, die die E-Mail-Adresse und das Passwort als Parameter zur Validierung übernimmt.
Simulieren Sie eine Authentifizierungs-API-Anfrage
Um zu überprüfen, ob die von einem Benutzer bereitgestellten Eingaben gültig sind, können Sie einen API-Aufruf simulieren, indem Sie Folgendes definieren Benutzer-Anmeldung Funktion, die die Anmeldeinformationen ähnlich wie eine Backend-API überprüft.
Fügen Sie direkt unter der handleSubmit-Funktion diesen Code hinzu:
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};Dieser Code definiert eine asynchrone Funktion, die eine einfache Logikvalidierungslogik ausführt.
Chakras Fehlerbehandlungs-Benutzeroberflächenfunktionen.
Mithilfe der Feedback-Komponenten von Chakra können Sie Benutzern basierend auf ihren Interaktionen auf dem Formular geeignetes visuelles Feedback geben. Importieren Sie dazu zunächst diese Komponenten aus der UI-Bibliothek von Chakra.
Alert, AlertIcon, AlertTitle, CircularProgressFügen Sie nun den folgenden Code direkt unter dem Öffnungs-Tag des Formularelements hinzu.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Nehmen Sie abschließend dieses Update an der Schaltfläche „Senden“ vor, um die Load-Spinner-Komponente „CircularProgress“ einzuschließen.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Folgendes sieht ein Benutzer, wenn er sich erfolgreich angemeldet hat:
Wenn beim Anmeldevorgang ein Fehler auftritt, sollte eine Antwort wie diese angezeigt werden:
Verbessern Sie Ihren Entwicklungsprozess mit der Chakra-Benutzeroberfläche
Chakra UI bietet eine Reihe gut gestalteter und anpassbarer UI-Komponenten, mit denen Sie schnell erstellen können Reagieren Sie auf Benutzeroberflächen. Unabhängig davon, wie einfach oder komplex Ihre Designs sind, verfügt Chakra über Komponenten für fast alle Benutzeroberflächen Aufgaben.