Madivelopa apeza Chakra UI kukhala mnzake wothandiza kwambiri. Monga zida zothandizira pa intaneti, Chakra UI imapangitsa kuti zikhale zosavuta kupanga mapulogalamu ophatikizana bwino.
Chifukwa cha kupezeka kwake komanso kutsata kwa WAI-ARIA, zinthu za Chakra UI ndizosavuta kusintha ndikusinthanso mutu wake pogwiritsa ntchito API yake. Komabe, iyi ndi nsonga chabe ya iceberg pazabwino zomwe zimapatsa opanga.
Mu positi iyi, tiwona zina mwazapamwamba kwambiri za Chakra UI ndi momwe zingakuthandizireni kuti mukhale ochita bwino ngati wopanga mapulogalamu.
Kodi Chakra UI ndi chiyani?
Chakra UI ndi chida chomwe chimathandiza omanga kupanga mwachangu zida zopezeka ndi zogwiritsidwanso ntchito pazogwiritsa ntchito intaneti. Imamangidwa pamwamba pa React ndipo imagwiritsa ntchito makina opangira makina ake.
Cholinga cha Chakra UI ndikupangitsa kuti zikhale zosavuta kwa opanga mapulogalamu kuti apange mawonekedwe okongola, omvera, komanso opezeka ogwiritsa ntchito mosavutikira. Chidacho chili ndi zida zambiri zokonzeka kugwiritsidwa ntchito zomwe zidapangidwa kuti zizitha kupangidwa mosavuta komanso zowonjezera.
Chakra UI ndi gwero lotseguka, ndipo chitukuko chake chimathandizidwa ndi Gawo.
Momwe mungakhalire Chakra UI
Muyenera kulemba malamulo otsatirawa kuti muphatikize Chakra mu Project Yanu:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Muyenera sintha ChakraProvider pa muzu wa ntchito yanu pambuyo khazikitsa Chakra UI. Kutengera ndi chimango chomwe mumagwiritsa ntchito, izi zitha kukhala mu index.jsx, index.tsx, kapena fayilo ya app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Njira Zapamwamba mu Chakra UI
Kupanga Real-time SVGs
Mungafune kusinthiratu ma SVG anu kuti awonetse mapangidwe apano pomwe mukukhazikitsa mitu yatsopano patsamba lanu. Izi zimafunikira kupanga ma SVG apadera pamitu ingapo ingapo.
Chakra UI, kumbali ina, ndi njira yosavuta kugwiritsa ntchito. Kugwiritsa ntchito useColorMode
ku Chakra UI, titha kusintha mtundu wodzaza wa ma SVG athu.
UseColorMode ingagwiritsidwe ntchito pokhapokha mawonekedwe amdima akhazikitsidwa. Mukugwiritsa ntchito mawonekedwe amdima ndi Chakra UI kwa nthawi yoyamba? Nkhaniyi ikuwonetsani momwe mungagwiritsire ntchito bwino.
The useColorMode
njira likupezeka pambuyo akafuna mdima wakhala anathandiza.
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>
);
}
Code yomwe ili pamwambayi ikuphatikiza ndi useColorMode
hook ndi SVG kuti awapangitse kukhala amphamvu. Kugwiritsa useColorMode
tikhoza kupeza ndi kusintha mtundu mode. Ngati mukufuna kusintha mitundu, muyenera kugwiritsa ntchito iliyonse colorMode
kapena toggleColor
Ntchito mode.
Mitu ya Chakra
Mitu ya Chakra UI imagwiritsidwa ntchito pogwiritsa ntchito Mafotokozedwe a Theme System ya Styled luso. Mitu mu Chakra imatha kukhudza magawo osiyanasiyana, kuyambira utoto wamitundu mpaka masitayilo.
Mungofunika kuitanitsa extendTheme
ntchito ndikuwonjezera makiyi kuti musinthe ma tokeni mu preset. Tiyeni tiwone izi.
Mukungoyenera kupanga a Theme.js
fayilo kuti muyambe.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Imawonjezera mitundu iwiri ku chinthu chamutu kuti chikhale chowoneka bwino komanso chokopa. Malinga ndi mafotokozedwe a pulogalamuyo, mutha kupanga zolembera zamitundu, ma breakpoints, kukula kwa zilembo, makulidwe amizere, ndi zina zambiri.
Kuti mutengere mwayi pazowonjezera zomwe zangoyambitsidwa kumene pamutuwu, muyenera kukhazikitsa kaye ChakraProvider
pa muzu wa ntchito.
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;
Pambuyo pake, mumawongolera ChakraProvider
kugwiritsa ntchito mutu wamutu womwe mudapanga kale. Zida zonse za Chakra tsopano zitha kugwiritsa ntchito mitundu yamtundu.
Ma projekiti ena angafunike kusintha masitayilo a Chakra m'malo mongofuna kusinthidwa mwanjira iliyonse.
Monga chitsanzo cha chinthu kalembedwe kagawo, nachi:
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: "",
},
}
Tsopano, ife tingosintha Button
ndi Heading
magawo.
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;
Titha kuchotsa malire-radius yomwe idakhazikitsidwa mwachisawawa Button
pochotsa zake baseStyle
. Mutha kusintha kukula kwa mafonti ndi mawonekedwe amtundu wa Heading
. Pogwiritsa ntchito zitsanzo zomwe zili pamwambazi, mutha kumvetsetsa momwe tingasinthire masitayilo amtundu wa Chakra.
Kupititsa patsogolo kapena kusintha masitayelo azinthu za Chakra kumatipatsa kuwonekera ndikuwongolera mawonekedwe ndi magwiridwe antchito a mawonekedwe athu.
Chakra ndi Zigawo Zachitatu
Chakra imalola ma module a chipani chachitatu kuti apindule ndi kalembedwe kawo. Zotsatira zake, kuphatikiza zinthu za chipani chachitatu ndi Chakra UI kumafuna zomata zocheperako.
Zotsatirazi ndi mndandanda wa zinthu HTML mothandizidwa ndi Chakra fakitale:
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>
);
}
Timagwirizanitsa Next.js Image
chigawo ndi Chakra UI mu code snippet pamwambapa. Kenako, timapanga a ChakraNextImage
chigawo chimodzi, ndipo kupyolera mu izo, tikhoza kudutsa Chakra a kalembedwe eni Image
.
makanema ojambula pamanja
Mutha kutanthauzira makanema ojambula pogwiritsa ntchito Chakra UI's keyframes
wothandizira. Keyframes
tengani tanthauzo la keyframe ya CSS ndikubweza chinthu chomwe mungagwiritse ntchito masitayelo:
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>
);
}
ntchito keyframes
wothandizira, mutha kupanga makanema ojambula omwe mukuwona apa. Pulojekiti yamakanema imatilola kuwongolera zida za Chakra UI.
Monga sitepe yomaliza, dutsani spinAnimation
mu gawo la Bokosi kuti makanema awonjezedwe ku mapulogalamu a Chakra UI.
Kusintha kwa Tsamba
Zosintha zamasamba zitha kuwonjezeredwa ku mapulogalamu athu kuti muwongolere luso la wogwiritsa ntchito akamayenda pakati pamasamba.
Zotsatirazi ndi chitsanzo cha momwe mungakwaniritsire ndi 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;
Kuti mugwiritse ntchito kusintha kwamasamba, gwiritsani ntchito zida zosinthira kuchokera ku Chakra UI. Kusintha kwa ScaleFade kumagwiritsidwa ntchito pamzere wapamwamba wa code.
Chonde dziwitsani ScaleFade
za njira ya pulogalamu yanu kuti kusinthako kugwire ntchito mukamadutsa pazenera! Chinthucho chimapereka chidziwitso cha njira yamakono, yomwe mungatumizeko ScaleFade
's key prop. InitialScale
ndipo mu prop amagwiritsidwa ntchito kukhazikitsa sikelo yoyambira ya kusinthako ndikupangitsa kuti zichitike pamene gawolo likuperekedwa.
Mugawoli, tayang'ana zina mwazinthu ndi kuthekera komwe Chakra UI imapereka komanso momwe imatithandizira pazochitika zathu zabwino. Tawonanso momwe kukhazikitsa zinthu zamutu ndi kupanga masitayelo apadziko lonse lapansi kungathandizire kuti dongosolo lathu likhale lolimba.
Ngati simunatero, Tikukhulupirira kuti nkhaniyi yakupatsani malingaliro kuti muwongolere njira yanu yachitukuko cha Chakra UI.
Siyani Mumakonda