Chakra tarjoaa yksinkertaisia ​​komponentteja puhtailla, käyttökelpoisilla tyyleillä.

Sovellusten muotoilu mukautetulla CSS: llä on hauskaa, kunnes projektin monimutkaisuus kasvaa. Haasteena on muotoilu ja yhtenäisen suunnittelun ylläpitäminen koko sovelluksen ajan.

Vaikka voit edelleen käyttää CSS: ää, on usein tehokkaampaa käyttää käyttöliittymän tyylistä kirjastoa, kuten Chakra UI: ta. Tämä kirjasto tarjoaa nopean ja vaivattoman tavan muokata sovelluksiasi käyttämällä ennalta määritettyjä käyttöliittymäkomponentteja ja apuohjelmia.

Chakra-käyttöliittymän käytön aloittaminen React-sovelluksissa

Aloitaksesi Chakra UI, mene eteenpäin ja perusta React-perussovellus käyttämällä create-react-sovellusta komento. Vaihtoehtoisesti voit käytä Viteä React-projektin luomiseen.

Asenna seuraavaksi nämä riippuvuudet:

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

Löydät tämän projektin koodin siitä GitHub arkisto.

Lisää Chakran teemantarjoaja

Kun olet asentanut nämä riippuvuudet, sinun on käärittävä sovellus

instagram viewer
ChakraProvider. Voit lisätä palveluntarjoajan joko omaan index.jsx, main.jsx, tai App.jsx seuraavasti:

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

Sovelluksen kääriminen ChakraProvider on tarpeen käyttääksesi Chakra UI: n komponentteja ja tyyliominaisuuksia koko sovelluksesi ajan.

Vaihda eri teemoja

Chakra-käyttöliittymä tarjoaa oletusarvoisen valmiiksi rakennetun teeman, joka sisältää tuen vaaleille, tummille ja järjestelmän väritiloille. Voit kuitenkin mukauttaa edelleen sovelluksesi käyttöliittymäteemoja ja muita teemaobjektin tyyliominaisuuksia kohdassa määritetyllä tavalla Chakran dokumentaatio.

Voit vaihtaa tummat ja vaaleat teemat luomalla a komponentit/ThemeToggler.jsx tiedosto tiedostoon src hakemistoon ja sisällytä seuraava koodi.

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

Siirry nyt eteenpäin ja tuo kuvakepaketti:

npm i @chakra-ui/icons

The ThemeToggler komponentti tekee painikkeen, jonka avulla käyttäjät voivat vaihtaa vaaleiden ja tummien teemojen välillä sovelluksessa.

Tämä komponentti käyttää nykyistä väritilaa käytä ColorModea koukku ja käyttää vaihda ColorMode toiminto tilojen välillä vaihtamiseen.

The IconButton komponentti ottaa kuvakkeen ominaisuudet samalla kun sillä on painikkeen napsautettavat ominaisuudet.

Luo kirjautumislomakkeen käyttöliittymä

Luoda uusi Kirjaudu.jsx tiedosto tiedostoon komponentit hakemistoon ja lisää siihen seuraava koodi:

Lisää ensin nämä tuodut tuotteet.

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

Kun olet tuonut nämä käyttöliittymäkomponentit, määritä React-toiminnallinen komponentti ja pääsäiliökomponentit, jotka sisältävät kaikki sisäänkirjautumisen käyttöliittymän elementit.

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

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



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

exportdefault Login;

The Laatikko komponentti tekee a div elementti – se toimii perusrakennuspalikkana, jonka päälle rakennat kaikki muut Chakra UI -komponentit. Flex, toisaalta on Box-komponentti, jonka näyttöominaisuus on asetettu arvoon flex. Tämä tarkoittaa, että voit käyttää flex-ominaisuuksia komponentin tyyliin.

Sekä Center- että Stack-komponentit ovat asettelukomponentteja, mutta niiden toiminnassa on pieniä eroja. Keskikomponentti vastaa kaikkien alikomponenttien kohdistamisesta keskelle, kun taas pino ryhmittelee käyttöliittymäelementit yhteen ja lisää niiden väliin välilyöntejä.

Rakennetaan nyt lomakkeen otsikko-osa. Header-komponentti on todella hyödyllinen tässä osassa. Lisää tämä koodi Pino-komponenttiin.

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

The VStack komponentti pinoaa lapsielementit pystysuunnassa. Luo seuraavaksi korttikomponentti, joka sisältää kirjautumislomakkeen ja sen elementit.

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

Mene eteenpäin ja päivitä omasi App.jsx tiedosto sisäänkirjautumisen sekä ThemeToggler-komponentin tuomiseksi.

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




 </div>
 )
}

Loistava! Päivitä muutokset käynnistämällä kehityspalvelin.

npm run dev

Nyt kun sivu latautuu selaimeen, se näyttää aluksi valotilan oletusteeman.

Napsauta nyt Vaihda teema -kuvakepainiketta vaihtaaksesi teematilan.

Lomakkeen tilan hallinta React Hookeilla

Tässä vaiheessa kirjautumislomake sisältää vain kaksi syöttökenttää ja kirjautumispainikkeen. Jotta se toimisi, aloitetaan toteuttamalla tilanhallintalogiikka käyttämällä React-koukkuja.

Määritä seuraavat tilat Login-toiminnallisen komponentin sisällä.

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

Lisää seuraavaksi onChange Käsittelijätoiminto, joka kuuntelee syöttökenttien muutokset, tallentaa syötteet ja päivittää sähköpostin ja salasanan tilat vastaavasti.

Lisää nämä koodilausekkeet syöttökenttiin.

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

Näillä muutoksilla voit nyt kaapata käyttäjien syötteitä.

Lomakkeiden validoinnin ja virheiden käsittelyn toteuttaminen Chakra-käyttöliittymän sisäänrakennetuilla ominaisuuksilla

Lisää nyt käsittelijätoiminto, joka käsittelee syötteet ja palauttaa asianmukaiset tulokset. Käytössä muodossa elementin avaustunniste, lisää onSubmitissa käsittelijän toiminto seuraavasti.

Määritä seuraavaksi käsitteleLähetä toiminto. Sisällytä seuraava koodi suoraan määrittämiesi tilojen alle.

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

Tämä asynkroninen käsitteleLähetä toiminto käynnistyy, kun joku lähettää lomakkeen. Funktio asettaa lataustilan arvoon tosi – simuloiden käsittelytoimintoa. Voit renderöidä Chakra-käyttöliittymän latauspyörän antaaksesi käyttäjälle visuaalisen vihjeen.

Lisäksi handleSubmit-toiminto kutsuu käyttäjän kirjautuminen toiminto, joka ottaa sähköpostin ja salasanan parametreiksi vahvistaakseen ne.

Simuloi Authentication API -pyyntö

Voit varmistaa, että käyttäjän antamat syötteet ovat kelvollisia, simuloimalla API-kutsua määrittämällä käyttäjän kirjautuminen toiminto, joka tarkistaa kirjautumistiedot samalla tavalla kuin taustasovellusliittymä.

Lisää tämä koodi aivan handleSubmit-funktion alle:

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

Tämä koodi määrittelee asynkronisen toiminnon, joka suorittaa yksinkertaisen logiikan vahvistuslogiikan.

Chakran virheenkäsittelyn käyttöliittymäominaisuudet.

Chakran palautekomponenttien avulla voit antaa käyttäjille sopivaa visuaalista palautetta heidän vuorovaikutuksensa perusteella lomakkeella. Aloita tuomalla nämä komponentit Chakran käyttöliittymäkirjastosta.

Alert, AlertIcon, AlertTitle, CircularProgress

Lisää nyt seuraava koodi suoraan lomakeelementin avaustunnisteen alle.

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

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

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

Tee lopuksi tämä päivitys lähetyspainikkeeseen niin, että se sisältää latauspyörän, CircularProgress-komponentin.

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

Käyttäjä näkee seuraavan, kun hän kirjautuu sisään onnistuneesti:

Jos kirjautumisprosessissa tapahtuu virhe, heidän pitäisi nähdä seuraavanlainen vastaus:

Paranna kehitysprosessiasi Chakra-käyttöliittymällä

Chakra UI tarjoaa joukon hyvin suunniteltuja ja muokattavia käyttöliittymäkomponentteja, joita voit käyttää nopeaan rakentamiseen Reagoi käyttöliittymät. Huolimatta siitä, kuinka yksinkertaisia ​​tai monimutkaisia ​​suunnitelmasi ovat, Chakrassa on komponentteja lähes kaikkiin käyttöliittymiin tehtäviä.