Abaphuhlisi baya kufumana i-Chakra UI ukuba lelona qabane liluncedo. Njengesixhobo sezixhobo zeenkonzo ze-intanethi, i-Chakra UI yenza kube lula ukwakha usetyenziso olubandakanyayo ngokufanelekileyo.
Ngenxa yokufikeleleka kwayo kunye nokuthotyelwa kwe-WAI-ARIA, izinto ze-Chakra UI zilula ukwenza ngokwezifiso kunye nomxholo kwakhona usebenzisa i-API yayo. Nangona kunjalo, oku kuphela kwencam ye-iceberg malunga neenzuzo ezinikezela abaphuhlisi.
Kule posi, siza kujonga ngakumbi ezinye zeempawu eziphambili ze-Chakra UI kunye nendlela ezinokukunceda ngayo ukuba ube nemveliso ngakumbi njengomdwebi wenkqubo.
Yintoni i-Chakra UI?
I-Chakra UI sisixhobo sezixhobo ezinceda abaphuhlisi ngokukhawuleza ukuba bakhe amacandelo ojongano olufikelelekayo nolunokuphinda lusetyenziswe kwizicelo zabo zewebhu. Yakhelwe phezu kweReact kwaye isebenzisa inkqubo enesitayile kwi-injini yayo ye-theming.
Injongo ye-Chakra UI kukwenza kube lula kubadwelisi benkqubo ukuba benze izinto ezintle, eziphendulayo, kunye nokufikelela kujongano lomsebenzisi ngomzamo omncinci. I-toolkit iquka iindidi ezininzi ezilungele ukusetyenziswa ezilungiselelwe ukuba zidibanise ngokulula kwaye zandiswe.
I-Chakra UI ngumthombo ovulekileyo, kwaye uphuhliso lwayo luxhaswa liCandelo.
Uyifaka njani i-Chakra UI
Kuya kufuneka uchwetheze le miyalelo ilandelayo ukuze udibanise iChakra kwiProjekthi yakho:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Kuya kufuneka uqwalasele i-ChakraProvider kwingcambu yesicelo sakho emva kokufaka i-Chakra UI. Kuxhomekeke kwisakhelo osisebenzisayo, oku kunokuba kwi index.jsx, index.tsx, okanye app.jsx ifayile.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Ubuchwephesha obukwinqanaba eliphezulu kwi-Chakra UI
Ukuvelisa ii-SVG zexesha elililo
Unganqwenela ukuhlaziya ngokuguquguqukayo ii-SVGs zakho ukubonisa uyilo lwangoku ngelixa useka imixholo emitsha yewebhusayithi yakho. Oku kufuna ukuyilwa kwee-SVGs ezahlukeneyo kumxholo ngamnye oliqela.
I-Chakra UI, kwelinye icala, lukhetho olusebenziseka lula. Ukusebenzisa i useColorMode
hook kwi-Chakra UI, sinokutshintsha ngokuguquguqukayo umbala wokugcwalisa we-SVGs zethu.
UseColorMode inokusetyenziswa kuphela xa imowudi emnyama iphunyeziwe. Usebenzisa imowudi emnyama ngeChakra UI okokuqala? Eli nqaku liza kukubonisa indlela yokuyenza ukuba isebenze ngokufanelekileyo.
The useColorMode
ukhetho luyafumaneka emva kokuba imowudi emnyama yenziwe.
import { LightBulb, Moon, Sun, Vercel } from "../svgs";
import { Box, Button, Center, Stack, useColorMode } from "@chakra-ui/react";
export default function SVG() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Center>
<Box>
<Center>
<Button onClick={toggleColorMode}>
Switch to {colorMode === "light" ? "Dark" : "Light"}
</Button>
</Center>
<Stack direction={["column", "row"]} spacing="24px" mt={14}>
<LightBulb colorMode={colorMode} />
<Moon colorMode={colorMode} />
<Sun colorMode={colorMode} />
<Vercel colorMode={colorMode} />
</Stack>
</Box>
</Center>
);
}
Le khowudi ingentla idibanisa i useColorMode
hook kunye neSVG ukuzenza ziguquguquke. Ukusebenzisa useColorMode
singabuyisela kwaye siguqule imo yombala. Ukuba ufuna ukutshintsha imibala, kufuneka usebenzise nokuba yeyiphi colorMode
okanye toggleColor
Indlela yokusebenza.
Imixholo yeChakra
Imixholo ye-Chakra UI isetyenziswa kusetyenziswa i Inkcazo yomxholo weNkqubo eneSimbo ubuchule. Imixholo kwi-Chakra inokuchaphazela imiba eyahlukeneyo ukusuka kwiphalethi yombala ukuya kwisithuba.
Kuya kufuneka ungenise ngaphandle i extendTheme
umsebenzi ngelixa usongeza izitshixo ukulungisa iithokheni kulungiselelo lwangaphambili. Makhe sijonge oku.
Kufuneka wenze nje i Theme.js
ifayile ukuze uqalise.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Yongeza eminye imibala emibini kwinto yomxholo ukuyenza ibonakale kwaye ithandeke. Ngokweenkcukacha zesoftware, unokwenza iziphawuli zesitayile zohlobo lochwethezo, iindawo zokuphumla, ubungakanani befonti, ububanzi bekholamu, nokunye.
Ukuze uthathe ithuba leempawu ezisanda kuqaliswa kule nto yomxholo, kufuneka uqale uyifake ChakraProvider
kwingcambu yesicelo.
import { ChakraProvider } from "@chakra-ui/react";
import theme from "theme";
import Nav from "Nav";
function MyApp({ Component, pageProps, router }) {
return (
<ChakraProvider theme={theme}>
<Nav />
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
Emva koko, uyalathisa ChakraProvider
ukusebenzisa umxholo owudale ngaphambili. Onke amacandelo eChakra ngoku angasebenzisa imibala yebhrendi.
Ezinye iiprojekthi zinokufuna nje ukuguqula isitayile esisisiseko seChakra kunokuba zifune ukuguqulwa kwesitayile nangayiphi na indlela.
Njengomzekelo wento yesimbo secandelo, nantsi:
const ComponentStyle = {
// style object for base or default style
baseStyle: {},
// styles for different sizes ("sm", "md", "lg")
sizes: {},
// styles for different visual variants ("outline", "solid")
variants: {},
// default values for `size` and `variant`
defaultProps: {
size: "",
variant: "",
},
}
Ngoku, siza kulungisa nje i Button
kwaye Heading
iinxalenye.
const overrides = {
components: {
Button: {
baseStyle: {
borderRadius: "none",
},
sizes: {
small: {
px: 5,
h: "50px",
fontSize: "20px",
},
medium: {
px: 7,
h: "60px",
fontSize: "25px",
},
large: {
px: 8,
h: "70px",
fontSize: "30px",
borderRadius: "10px",
},
},
variants: {
primary: {
bg: "primary",
color: "#fff",
},
secondary: {
bg: "secondary",
color: "#fff",
},
ghost: {
bg: "transparent",
border: "1px solid red",
},
primaryGhost: {
bg: "transparent",
border: "1px solid",
borderColor: "primary",
},
secondaryGhost: {
bg: "transparent",
border: "1px solid",
borderColor: "secondary",
_hover: {
color: "#fff",
bg: "#BB1415",
},
},
},
},
Heading: {
baseStyle: {
fontFamily: "Inter",
fontWeight: "600",
},
sizes: {
small: {
fontSize: "20px",
},
medium: { fontSize: "25px" },
large: { fontSize: "30px" },
},
},
},
};
const theme = extendTheme(overrides);
export default theme;
Singakwazi ukulahla umda-radius owamiselwa ngokungagqibekanga kwi Button
ngokuyisusa baseStyle
. Ungatshintsha ubungakanani befonti kunye noyilo lohlobo lohlobo lwe Heading
. Usebenzisa le mizekelo ingasentla, unokuqonda ukuba singasitshintsha njani isitayile esisemgangathweni samacandelo eChakra.
Ukuphucula okanye ukuguqula izitayile zamacandelo eChakra kusinika ukubonakala kunye nokulawula inkangeleko kunye nokusebenza kojongano lwethu lomsebenzisi.
I-Chakra kunye neCandelo leSithathu
I-Chakra ivumela iimodyuli zomntu wesithathu ukuba zizuze kwisitayile sabo. Ngenxa yoko, ukudibanisa izinto zomntu wesithathu kunye ne-Chakra UI kufuna izinto ezisongayo zamacandelo ambalwa.
Oku kulandelayo luhlu lwezinto zeHTML ezixhaswa ngumzi-mveliso weChakra:
import Image from "next/image";
import { Box, Center, chakra, HStack, VStack } from "@chakra-ui/react";
import woman from "../public/woman.jpg";
const ChakraNextImage = chakra(Image);
export default function factory() {
return (
<Center><HStack spacing={10}>
<Box width="400px" h="400px" position="relative">
<ChakraNextImage
src={woman}
alt="an img"
layout="fill"
objectFit="cover"
borderRadius="full"
/>
</Box>
</HStack>
</Center>
);
}
Sidibanisa i-Next.js Image
icandelo kunye ne-Chakra UI kwikhowudi yamazwi angasentla. Emva koko, siseta a ChakraNextImage
icandelo, kwaye ngayo, sinokudlula kwiiprops zesitayile ze-Chakra Image
.
Oopopayi
Ungachaza oopopayi usebenzisa i-Chakra UI's keyframes
umncedisi. Keyframes
thatha inkcazo yegama elingundoqo le-CSS kwaye ubuyisele into onokuyisebenzisa kwizimbo:
import {
Box,
Button,
Center,
VStack,
keyframes,
} from "@chakra-ui/react";
import { LightBulb } from "svgs";
const spin = keyframes`
from {transform: rotate(0deg);}
to {transform: rotate(360deg)}
`;
export default function Transition() {
const spinAnimation = `${spin} infinite 2s linear`;
return (
<Center>
<VStack spacing={20}>
<Box animation={animation}>
<LightBulb />
</Box>
</VStack>
</Center>
);
}
usebenzisa keyframes
umncedisi, ungenza oopopayi obona apha. Ipropu yopopayi isenza sikwazi ukwenza izinto zeChakra UI ziphile.
Njengenyathelo lokugqibela, dlula spinAnimation
kwibhokisi yecandelo ukuze oopopayi bongezwe kwii-apps ze-Chakra UI.
Iinguqulelo zephepha
Utshintsho lwephepha lunokongezwa kwiiapps zethu ukuze kuphuculwe amava omsebenzisi xa behamba phakathi kwamaphepha.
Oku kulandelayo ngumzekelo wendlela yokuyiphumeza nge-Chakra UI:
import { ChakraProvider, ScaleFade } from "@chakra-ui/react";
import theme from "theme";
import Nav from "Nav";
function MyApp({ Component, pageProps, router }) {
return (
<ChakraProvider theme={theme}>
<Nav />
<ScaleFade
key={router.route}
initialScale={0.9}
in="true"
>
<Component {...pageProps} />
</ScaleFade>
</ChakraProvider>
);
}
export default MyApp;
Ukuze kuphunyezwe utshintsho lwephepha, sebenzisa amacandelo enguqu esuka kwi-Chakra UI. Utshintsho lweScaleFade lusetyenziswa kumgca ongentla wekhowudi.
Nceda wazise ScaleFade
malunga nendlela yesicelo sakho ukuze utshintsho lusebenze njengoko uhamba ngapha kwesikrini! Into ibonelela ngedatha malunga nendlela yangoku, onokuthi emva koko uthumele kuyo ScaleFade
's isitshixo sepropu. InitialScale
nakwiprop zisetyenziselwa ukuseka isikali sokuqala sotshintsho kunye nokwenza ukuba yenzeke xa icandelo linikezelwa.
Kwesi siqwenga, sijonge ezimbalwa zeempawu kunye nezakhono ezibonelelwa yiChakra UI kunye nendlela esinceda ngayo kumava ethu agqibeleleyo. Siphinde saphonononga ukuba ukuseka imixholo yezinto kunye nokuphuhlisa izimbo zehlabathi kunokuncedisa njani ekugcineni ubungakanani benkqubo yethu.
Ukuba awukakwenzi, siyakholelwa ukuba eli nqaku likunike izimvo zokuhlengahlengisa inkqubo yakho yophuhliso lwe-Chakra UI.
Shiya iMpendulo