Watengenezaji watapata Chakra UI kuwa mshirika wao muhimu zaidi. Kama zana ya kipengele cha huduma za mtandaoni, Chakra UI hurahisisha kuunda programu zinazojumuisha kwa ufanisi.
Kama matokeo ya ufikivu wake na kufuata WAI-ARIA, vipengele vya Chakra UI ni rahisi kubinafsisha na kuweka mandhari upya kwa kutumia API yake. Walakini, hii ni ncha tu ya barafu kuhusu faida inayowapa watengenezaji.
Katika chapisho hili, tutaangalia kwa karibu zaidi baadhi ya vipengele vya juu zaidi vya Chakra UI na jinsi vinaweza kukusaidia kuwa na tija zaidi kama mtayarishaji programu.
Chakra UI ni nini?
Chakra UI ni zana ya kijenzi ambayo husaidia wasanidi kuunda haraka vipengee vya kiolesura vinavyoweza kufikiwa na vinavyoweza kutumika tena kwa programu zao za wavuti. Imejengwa juu ya React na hutumia mfumo uliowekwa mtindo kwa injini yake ya mada.
Lengo la Chakra UI ni kurahisisha kwa watayarishaji programu kuunda violesura maridadi, vinavyoitikia na vinavyoweza kufikiwa kwa urahisi kwa kutumia juhudi kidogo. Seti ya zana inajumuisha anuwai ya vipengee vilivyo tayari kutumika ambavyo vimeundwa kwa urahisi kutungwa na kupanuka.
Chakra UI ni chanzo huria, na uundaji wake unafadhiliwa na Sehemu.
Jinsi ya kufunga Chakra UI
Utalazimika kuandika amri zifuatazo ili kujumuisha Chakra katika Mradi Wako:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Lazima usanidi ChakraProvider kwenye mzizi wa programu yako baada ya kusakinisha Chakra UI. Kulingana na mfumo unaotumia, hii inaweza kuwa katika faili yako ya index.jsx, index.tsx, au app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Mbinu za Kina katika Chakra UI
Inazalisha SVG za Wakati Halisi
Unaweza kutaka kusasisha SVG zako ili kuonyesha muundo wa sasa huku ukianzisha mada mpya za tovuti yako. Hii inalazimu kuundwa kwa SVGs tofauti kwa kila moja ya mada kadhaa.
Chakra UI, kwa upande mwingine, ni chaguo la kirafiki zaidi. Kwa kutumia useColorMode
ndoano katika Chakra UI, tunaweza kubadilisha kwa nguvu rangi ya kujaza ya SVG zetu.
UseColorMode inaweza tu kutumika mara tu hali ya giza inapotekelezwa. Je, unatumia hali ya giza na Chakra UI kwa mara ya kwanza? Nakala hii itakuonyesha jinsi ya kuifanya ifanye kazi vizuri.
The useColorMode
chaguo inapatikana baada ya hali ya giza kuwezeshwa.
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>
);
}
Nambari iliyo hapo juu inaunganisha useColorMode
ndoano na SVG ili kuzifanya ziwe na nguvu. Kutumia useColorMode
tunaweza kurejesha na kubadilisha hali ya rangi. Ikiwa unataka kubadilisha rangi, unapaswa kutumia aidha colorMode
au toggleColor
Kitendaji cha modi.
Mandhari ya Chakra
Mada za Chakra UI zinatumika kwa kutumia Uainishaji wa Mandhari ya Mfumo wa Mtindo mbinu. Mandhari katika Chakra yanaweza kuathiri vipengele mbalimbali kuanzia rangi ya rangi hadi nafasi.
Utahitaji tu kuagiza extendTheme
kazi huku ukiongeza vitufe vya kurekebisha tokeni katika uwekaji awali. Hebu tuangalie hili.
Unahitaji tu kuunda a Theme.js
faili ili kuanza.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Inaongeza rangi mbili zaidi kwenye kipengee cha mandhari ili kukifanya kiwe cha kuvutia zaidi na cha kuvutia. Kulingana na uainishaji wa programu, unaweza kuunda alama za mtindo za aina, sehemu za kuvunja, saizi za fonti, upana wa safu, na zaidi.
Ili kunufaika na vipengele vipya vya juu vilivyoletwa katika kifaa hiki cha mandhari, lazima kwanza usakinishe ChakraProvider
kwenye mzizi wa maombi.
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;
Baada ya hayo, unaelekeza ChakraProvider
kutumia kitu cha mandhari ulichounda hapo awali. Vipengele vyote vya Chakra sasa vinaweza kutumia rangi za chapa.
Baadhi ya miradi inaweza kuhitaji tu kubadilisha muundo wa sehemu ya msingi ya Chakra badala ya kuhitaji urekebishaji wa mtindo kwa njia yoyote ile.
Kama mfano wa kitu cha mtindo wa sehemu, hii hapa:
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: "",
},
}
Sasa, tutaweza tu kurekebisha Button
na Heading
sehemu.
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;
Tunaweza kuondoa kipenyo cha mpaka ambacho kiliwekwa kwa chaguo-msingi kwa Button
kwa kuiondoa baseStyle
. Unaweza kubadilisha saizi ya fonti na mpangilio wa chapa kwa Heading
. Kwa kutumia mifano iliyo hapo juu, unaweza kuelewa jinsi tunavyoweza kubadilisha mtindo wa kawaida wa vipengele vya Chakra.
Kuimarisha au kubadilisha mitindo ya vipengele vya Chakra hutupatia mwonekano na udhibiti wa mwonekano na utendakazi wa violesura vyetu vya watumiaji.
Chakra na Vipengele vya Wahusika Wengine
Chakra huruhusu moduli za wahusika wengine kufaidika na mtindo wao. Kwa hivyo, kuchanganya vipengele vya wahusika wengine na Chakra UI kunahitaji vifuniko vichache vya vipengee vya umiliki.
Ifuatayo ni orodha ya vipengele vya HTML vinavyoungwa mkono na kiwanda cha Chakra:
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>
);
}
Tunaunganisha Next.js Image
sehemu iliyo na Chakra UI katika kijisehemu cha msimbo hapo juu. Kisha, tunaanzisha a ChakraNextImage
sehemu, na kupitia hiyo, tunaweza kupitisha props za mtindo wa Chakra kwa Image
.
Burudani
Unaweza kufafanua uhuishaji kwa kutumia Chakra UI keyframes
msaidizi. Keyframes
chukua ufafanuzi wa fremu kuu ya CSS na urudishe kitu unachoweza kutumia kwa mitindo:
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>
);
}
Kutumia keyframes
msaidizi, unaweza kuunda uhuishaji unaouona hapa. Kifaa cha uhuishaji huturuhusu kuhuisha vipengele vya UI ya Chakra.
Kama hatua ya mwisho, kupita spinAnimation
kwenye kijenzi cha Sanduku ili uhuishaji uongezwe kwenye programu za Chakra UI.
Mabadiliko ya Ukurasa
Mabadiliko ya ukurasa yanaweza kuongezwa kwa programu zetu ili kuboresha matumizi ya mtumiaji anapohama kati ya kurasa.
Ufuatao ni mfano wa jinsi ya kuifanikisha 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;
Ili kutekeleza mabadiliko ya ukurasa, tumia vijenzi vya mpito kutoka Chakra UI. Mpito wa ScaleFade unatumika katika mstari wa juu wa msimbo.
Tafadhali arifu ScaleFade
kuhusu njia ya programu yako ili mpito ufanye kazi unaposogea kwenye skrini! Kitu hutoa data kuhusu njia ya sasa, ambayo unaweza kutuma kwa ScaleFade
prop muhimu. InitialScale
na katika prop hutumika kubainisha kiwango cha kuanzia cha mpito na kuifanya ifanyike wakati kipengele kinatolewa.
Katika kipande hiki, tuliangalia vipengele vichache na uwezo ambao Chakra UI inatoa na jinsi inavyotusaidia katika matumizi yetu bora. Pia tumegundua jinsi kuanzisha vipengee vya mandhari na kutengeneza mitindo ya kimataifa kunaweza kusaidia kudumisha uimara wa mfumo wetu.
Ikiwa bado hujafanya hivyo, Tunaamini kwamba makala haya yamekupa mawazo fulani ili kurahisisha mchakato wako wa ukuzaji wa UI ya Chakra.
Acha Reply