Ndị mmepe ga-ahụ Chakra UI ka ọ bụrụ onye mmekọ ha kacha baa uru. Dị ka ngwa akụrụngwa maka ọrụ ịntanetị, Chakra UI na-eme ka ọ dị mfe iji rụọ ọrụ nke ọma iji wuo ngwa nsonye.
N'ihi nnweta ya na nnabata WAI-ARIA, ihe ndị Chakra UI dị mfe iji hazie ma megharịa isiokwu site na iji API ya. Otú ọ dị, nke a bụ nanị ọnụ ọnụ iceberg banyere uru ọ na-enye ndị mmepe.
Na post a, anyị ga-elebakwu anya na ụfọdụ njiri mara elu nke Chakra UI yana otu ha nwere ike isi nyere gị aka ịba uru dị ka onye mmemme.
Kedu ihe bụ Chakra UI?
Chakra UI bụ ngwa akụrụngwa nke na-enyere ndị mmepe aka ịmepụta ngwa ngwa ngwa ngwa ngwa ngwa ngwa ngwa nke onye ọrụ nwere ike ịnweta ma megharịa maka ngwa weebụ ha. Ewubere ya n'elu React ma na-eji usoro a haziri ahazi maka injin isiokwu ya.
Ebumnuche Chakra UI bụ ime ka ọ dịrị ndị na-eme mmemme mfe imepụta ihu ndị ọrụ mara mma, na-anabata ma na-enweta ya na obere mbọ. Ngwa ngwa na-agụnye ihe dị iche iche dị njikere iji rụọ ọrụ nke emebere ka ọ bụrụ nke a na-ejikọta ya na ngwa ngwa.
Chakra UI bụ isi mmalite, yana ngalaba na-akwado mmepe ya.
Otu esi etinye Chakra UI
Ị ga-pịnye iwu ndị a iji tinye Chakra na ọrụ gị:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Ị ga-ahazi ChakraProvider na mgbọrọgwụ nke ngwa gị mgbe ị wụnye Chakra UI. Dabere na usoro ị na-eji, nke a nwere ike ịdị na faịlụ index.jsx, index.tsx, ma ọ bụ app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Usoro dị elu na Chakra UI
Na-emepụta SVGs n'ezie
Ị nwere ike ịchọ imelite SVG gị n'ike n'ike iji gosipụta ihe dị ugbu a ka ị na-ewepụta isiokwu ọhụrụ maka weebụsaịtị gị. Nke a na-achọ ka ịmepụta SVG dị iche iche maka nke ọ bụla n'ime isiokwu dị iche iche.
Chakra UI, n'aka nke ọzọ, bụ nhọrọ enyi na enyi karịa. Iji nke useColorMode
nko na Chakra UI, anyị nwere ike gbanwee agba agba nke SVG anyị.
Enwere ike iji UseColorMode naanị ozugbo etinyere ọnọdụ gbara ọchịchịrị. Iji ọnọdụ gbara ọchịchịrị na Chakra UI na nke mbụ? Edemede a ga-egosi gị otu esi eme ka ọ rụọ ọrụ nke ọma.
The useColorMode
nhọrọ dị ka agbanyere ọnọdụ gbara ọchịchịrị.
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>
);
}
Koodu dị n'elu na-ejikọta na useColorMode
nko na SVG iji mee ka ha dị ike. Iji useColorMode
anyị nwere ike iweghachite ma gbanwee ụdị agba. Ọ bụrụ na ịchọrọ ịgbanwe agba, ị ga-eji nke ọ bụla colorMode
ma ọ bụ na toggleColor
Ọrụ ọnọdụ.
Gburugburu Chakra
A na-etinye isiokwu Chakra UI site na iji Nkọwapụta Okwu Sistemu Ekeeded usoro. Gburugburu na Chakra nwere ike imetụta akụkụ dị iche iche sitere na paletter agba ruo na oghere.
Naanị ị ga-achọ ibubata ya extendTheme
na-arụ ọrụ mgbe ị na-agbakwunye igodo iji megharịa tokens na preset. Ka anyị leba anya na nke a.
Naanị ị chọrọ ịmepụta a Theme.js
faịlụ ka ịmalite.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Ọ na-agbakwụnye agba abụọ ọzọ na ihe isiokwu ahụ iji mee ka ọ na-adọrọ adọrọ ma na-adọrọ adọrọ. Dịka nkọwapụta sọftụwia ahụ siri dị, ị nwere ike mepụta akara nrịbama maka ụdịdị ihu, ebe nkwụsịtụ, nha font, obosara kọlụm na ndị ọzọ.
Iji nweta uru njiri mara elu ewepụtara ọhụrụ na ihe isiokwu a, ị ga-ebu ụzọ tinye ya ChakraProvider
na mgbọrọgwụ nke ngwa.
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;
Mgbe nke ahụ gasịrị, ị ga-eduzi ChakraProvider
iji isiokwu ihe ị mepụtara na mbụ. Ngwa chakra niile nwere ike iji agba agba ugbu a.
Ụfọdụ ọrụ nwere ike ịchọrọ ịgbanwe chakra isi akụrụngwa kama ịchọ mgbanwe ụdị n'ụzọ ọ bụla.
Dịka ọmụmaatụ nke ihe ụdị akụrụngwa, ebe a bụ:
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: "",
},
}
Ugbu a, anyị ga-agbanwe naanị Button
na Heading
akụkụ.
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;
Anyị nwere ike iwepu oke-radius nke edobere na ndabara maka Button
site na iwepu ya baseStyle
. Ị nwere ike ịgbanwe nha font na okirikiri nhọrọ ukwuu maka ya Heading
. N'iji ihe atụ ndị a dị n'elu, ị nwere ike ịghọta otú anyị nwere ike isi gbanwee ụkpụrụ nhazi nke ihe Chakra.
Ịkwalite ma ọ bụ ịgbanwe ụdị nke akụrụngwa Chakra na-enye anyị visibiliti na ịchịkwa ọdịdị na ịrụ ọrụ nke oghere ndị ọrụ anyị.
Ngwa Chakra na nke atọ
Chakra na-enye ohere modul ndị ọzọ irite uru na ụdị ha. N'ihi ya, ijikọ ihe ndị ọzọ na Chakra UI chọrọ ihe mkpuchi akụrụngwa dị ole na ole.
Nke a bụ ndepụta nke ihe HTML nke ụlọ ọrụ Chakra kwadoro:
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>
);
}
Anyị na-ejikọta Next.js Image
Ngwa nwere Chakra UI na snippet koodu dị n'elu. Mgbe ahụ, anyị melite a ChakraNextImage
akụrụngwa, na site na ya, anyị nwere ike gafere Chakra si style props ka Image
.
eserese
Ị nwere ike ịkọwa ihe nkiri site na iji Chakra UI keyframes
onye inyeaka. Keyframes
Were nkọwa igodo CSS wee weghachi ihe ị nwere ike iji n'ụdị:
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>
);
}
na iji keyframes
inyeaka, ị nwere ike ịmepụta animation ị na-ahụ ebe a. Ihe ngosi animation na-enye anyị ohere ịmegharị ihe ndị Chakra UI.
Dị ka nzọụkwụ ikpeazụ, gafere spinAnimation
n'ime igbe igbe ka e wee tinye animation na ngwa Chakra UI.
Mgbanwe ibe
Enwere ike ịgbakwunye ntụgharị ibe na ngwa anyị iji melite ahụmịhe onye ọrụ mgbe ha na-aga n'etiti ibe.
Nke a bụ ọmụmaatụ otu esi enweta ya na 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;
Iji mejuputa ngbanwe ibe, jiri ihe mgbanwe sitere na Chakra UI. A na-eji mgbanwe ScaleFade n'ahịrị koodu dị n'elu.
Biko gwa gị ScaleFade
banyere ụzọ ngwa gị ka mgbanwe wee rụọ ọrụ ka ị na-agafe na ihuenyo! Ihe ahụ na-enye data gbasara ụzọ dị ugbu a, nke ị nwere ike iziga ya ScaleFade
's key prop. InitialScale
na na prop na-eji iji guzobe mmalite mmalite nke mgbanwe na ime ka ọ na-eme mgbe a na-emepụta akụrụngwa.
Na mpempe a, anyị lere anya ole na ole n'ime njirimara na ike Chakra UI na-enye yana otu o si enyere anyị aka na ahụmịhe zuru oke anyị. Anyị enyochawokwa ka iguzobe ihe isiokwu na imepụta ụdị zuru ụwa ọnụ nwere ike isi nyere aka n'ịkwado scalability nke sistemụ anyị.
Ọ bụrụ na i nwebeghịrịị, anyị kwenyere na akụkọ a enyela gị ụfọdụ echiche iji kwalite usoro mmepe Chakra UI gị.
Nkume a-aza