Chakra ti offre componenti semplici con stili puliti e utilizzabili.
Applicare stili alle applicazioni con CSS personalizzati è divertente finché il progetto non diventa più complesso. La sfida sta nello stile e nel mantenimento di un design coerente in tutta l'applicazione.
Anche se puoi comunque utilizzare i CSS, spesso è più efficace utilizzare una libreria di stili dell'interfaccia utente come Chakra UI. Questa libreria fornisce un modo rapido e semplice per definire lo stile delle tue app utilizzando componenti dell'interfaccia utente e oggetti di utilità predefiniti.
Iniziare con l'interfaccia utente di Chakra nelle applicazioni React
Per iniziare Interfaccia utente dei Chakra, vai avanti e, impalcatura di un'applicazione React di base utilizzando create-react-app comando. In alternativa, puoi usa Vite per creare un progetto React.
Successivamente, installa queste dipendenze:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motionPuoi trovare il codice di questo progetto nel suo file GitHub deposito.
Aggiungi il fornitore di temi di Chakra
Dopo aver installato queste dipendenze, devi avvolgere l'applicazione con il file ChakraProvider. Puoi aggiungere il provider nel tuo file indice.jsx, main.jsx, O App.jsx come segue:
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>,
)
Avvolgendo l'applicazione con il file ChakraProvider è necessario per accedere ai componenti dell'interfaccia utente e alle proprietà di stile di Chakra in tutta l'applicazione.
Attiva/disattiva temi diversi
L'interfaccia utente di Chakra fornisce un tema predefinito predefinito che include il supporto per le modalità colore chiaro, scuro e di sistema. Tuttavia, puoi personalizzare ulteriormente i temi dell'interfaccia utente dell'applicazione e altre proprietà di stile all'interno di un oggetto tema come specificato in La documentazione di Chakra.
Per alternare i temi scuri e chiari, crea un file componenti/ThemeToggler.jsx file nel src directory e includere il seguente codice.
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>
);
}
Ora vai avanti e importa il pacchetto di icone:
npm i @chakra-ui/iconsIL ThemeToggler Il componente renderà un pulsante che consentirà agli utenti di alternare tra temi chiari e scuri nell'app.
Questo componente accede alla modalità colore corrente utilizzareColorMode agganciare e utilizzare il attiva/disattiva la modalità colore funzione per passare da una modalità all'altra.
IL Pulsante icona Il componente assume le caratteristiche di un'icona pur avendo le funzionalità cliccabili di un pulsante.
Creare un'interfaccia utente del modulo di accesso
Creane uno nuovo Login.jsx file nel componenti directory e aggiungervi il seguente codice:
Innanzitutto, aggiungi queste importazioni.
import React, { useState } from'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from'@chakra-ui/react';
Dopo aver importato questi componenti dell'interfaccia utente, definire il componente funzionale React e i principali componenti contenitore che conterranno tutti gli elementi per l'interfaccia utente di accesso.
functionLogin() {
const { colorMode } = useColorMode();return (
"center" align="center" height="80vh" >
</Stack>
</Center>
</Flex>
</Box>
);
}
exportdefault Login;
IL Scatola il componente esegue il rendering a div elemento: funge da elemento base su cui costruire tutti gli altri componenti dell'interfaccia utente di Chakra. Flettere, d'altro canto, è un componente Box con la proprietà display impostata su flettere. Ciò significa che puoi utilizzare le proprietà flessibili per modellare il componente.
Entrambi i componenti Center e Stack sono componenti di layout, tuttavia presentano lievi differenze nella funzionalità. Il componente centrale è responsabile dell'allineamento di tutti i componenti figlio al suo centro, mentre Stack raggruppa insieme gli elementi dell'interfaccia utente e aggiunge spaziatura tra loro.
Ora costruiamo la sezione di intestazione del modulo. Il componente Header sarà davvero utile per questa parte. All'interno del componente Stack, aggiungi questo codice.
'6'>
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack> IL VStack Il componente impila i suoi elementi figlio nella direzione verticale. Successivamente, crea il componente della carta che ospiterà il modulo di accesso e i suoi elementi.
'#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>
Vai avanti e aggiorna il tuo App.jsx file per importare il Login, così come il componente ThemeToggler.
import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (
</div>
)
}
Grande! Avviare il server di sviluppo per aggiornare le modifiche.
npm run devOra, una volta caricata la pagina nel browser, verrà inizialmente visualizzato il tema della modalità luce predefinita.
Ora fai clic su Attiva/disattiva tema pulsante icona per cambiare la modalità del tema.
Gestione dello stato del modulo utilizzando gli hook React
A questo punto, il modulo di accesso contiene solo due campi di input e un pulsante di accesso. Per renderlo funzionale, iniziamo implementando la logica di gestione dello stato utilizzando gli hook React.
Definire i seguenti stati all'interno del componente funzionale 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);Successivamente, aggiungi il onChange funzione di gestione che ascolterà le modifiche ai campi di input, acquisirà gli input e aggiornerà di conseguenza gli stati di posta elettronica e password.
Aggiungi queste istruzioni di codice ai campi di input.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}Con queste modifiche, ora acquisisci gli input degli utenti.
Implementazione della convalida dei moduli e della gestione degli errori con le funzionalità integrate dell'interfaccia utente Chakra
Ora aggiungi una funzione di gestione che elaborerà gli input e restituirà i risultati appropriati. Sul modulo tag di apertura dell'elemento, aggiungi il file su Invia funzione del gestore come segue.
Successivamente, definire il handleSubmit funzione. Proprio sotto gli stati che hai definito, includi il seguente codice.
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('');
}
};
Questo asincrono handleSubmit la funzione si attiverà quando qualcuno invia il modulo. La funzione imposta lo stato di caricamento su true, simulando un'azione di elaborazione. Puoi eseguire il rendering dello spinner di caricamento dell'interfaccia utente di Chakra per fornire un segnale visivo all'utente.
Inoltre, la funzione handleSubmit chiamerà il file Login utente funzione che accetta email e password come parametri per validarli.
Simulare una richiesta API di autenticazione
Per verificare che gli input forniti da un utente siano validi, puoi simulare una chiamata API definendo il file Login utente funzione che verificherà le credenziali di accesso in modo simile a come farebbe un'API back-end.
Proprio sotto la funzione handleSubmit, aggiungi questo codice:
const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (email '[email protected]' && password 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};Questo codice definisce una funzione asincrona che esegue una semplice logica di convalida logica.
Funzionalità dell'interfaccia utente nella gestione degli errori di Chakra.
Puoi fornire un feedback visivo adeguato agli utenti in base alle loro interazioni sul modulo utilizzando i componenti feedback di Chakra. Per fare ciò, inizia importando questi componenti dalla libreria dell'interfaccia utente di Chakra.
Alert, AlertIcon, AlertTitle, CircularProgressOra aggiungi il seguente codice proprio sotto il tag di apertura dell'elemento del modulo.
{error && !isLoggedIn &&
'error' variant='solid'>
{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
"success" variant='solid'>
{success}</AlertTitle>
</Alert>
)} Infine, apporta questo aggiornamento al pulsante di invio per includere lo spinner di caricamento, il componente CircularProgress.
{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}Ecco cosa vedrà un utente una volta effettuato l'accesso con successo:
Se si verifica un errore nel processo di accesso, dovrebbe vedere una risposta come questa:
Migliora il tuo processo di sviluppo con l'interfaccia utente di Chakra
Chakra UI fornisce una serie di componenti dell'interfaccia utente ben progettati e personalizzabili che puoi utilizzare per creare rapidamente Reagire alle UI. Indipendentemente da quanto semplici o complessi siano i tuoi progetti, Chakra dispone di componenti per quasi tutta l'interfaccia utente compiti.
