Masu haɓakawa za su sami Chakra UI ya zama abokin tarayya mafi amfani. A matsayin kayan aikin kayan aiki don sabis na kan layi, Chakra UI yana sauƙaƙa gina ƙa'idodin haɗaka tare da inganci.
Sakamakon samun damar sa da kuma yarda da WAI-ARIA, abubuwan Chakra UI suna da sauƙi don keɓancewa da sake jigo ta amfani da API ɗin sa. Koyaya, wannan shine kawai ƙarshen ƙanƙara game da fa'idodin da yake bayarwa masu haɓakawa.
A cikin wannan sakon, za mu dubi wasu ƙarin abubuwan ci gaba na Chakra UI da kuma yadda za su iya taimaka muku samun ƙwazo a matsayin mai tsara shirye-shirye.
Menene Chakra UI?
Chakra UI kayan aikin kayan aiki ne wanda ke taimaka wa masu haɓakawa da sauri gina abubuwan haɗin haɗin mai amfani da kuma sake amfani da su don aikace-aikacen gidan yanar gizon su. An gina shi a saman React kuma yana amfani da tsarin salo don injin jigon sa.
Manufar Chakra UI ita ce sauƙaƙe ga masu shirye-shirye don ƙirƙirar kyawawan mu'amala, masu amsawa, da samun damar mu'amalar mai amfani tare da ƙaramin ƙoƙari. Kayan aikin ya ƙunshi nau'ikan abubuwan da aka shirya don amfani waɗanda aka ƙera don zama masu iya haɗawa da sauƙi.
Chakra UI shine tushen budewa, kuma yanki ne ke daukar nauyin ci gabansa.
Yadda ake Sanya Chakra UI
Dole ne ku buga waɗannan umarni masu zuwa don haɗa Chakra a cikin Ayyukanku:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Dole ne ku saita ChakraProvider a tushen aikace-aikacen ku bayan shigar da Chakra UI. Dangane da tsarin da kuke amfani da shi, wannan na iya kasancewa a cikin index.jsx, index.tsx, ko app.jsx fayil.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Babban Dabaru a cikin Chakra UI
Samar da SVGs na-Ainihin
Kuna iya so ku sabunta SVG ɗinku a hankali don nuna ƙira na yanzu yayin kafa sabbin jigogi don gidan yanar gizonku. Wannan yana buƙatar ƙirƙirar SVGs daban-daban don kowane jigogi da yawa.
Chakra UI, a gefe guda, zaɓi ne mai sauƙin amfani. Amfani da useColorMode
ƙugiya a cikin Chakra UI, za mu iya canza canjin cika launi na SVGs ɗin mu.
UseColorMode za a iya amfani da shi kawai da zarar an aiwatar da yanayin duhu. Amfani da yanayin duhu tare da Chakra UI a karon farko? Wannan labarin zai nuna muku yadda za ku sa shi yayi aiki da kyau.
The useColorMode
akwai zaɓi bayan an kunna yanayin duhu.
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>
);
}
Lambar da ke sama tana haɗawa da useColorMode
ƙugiya da SVG don sanya su ƙarfi. Amfani useColorMode
za mu iya dawo da musanya yanayin launi. Idan kana so ka canza launuka, ya kamata ka yi amfani da ko dai colorMode
ko toggleColor
Yanayin aiki.
Jigogi na Chakra
Ana amfani da jigogin Chakra UI ta amfani da Ƙididdigar Jigon Tsarin Salo dabara. Jigogi a cikin Chakra na iya yin tasiri iri-iri daban-daban tun daga launin launi zuwa tazara.
Kuna buƙatar kawai shigo da extendTheme
aiki yayin ƙara maɓallai don gyara alamu a saiti. Bari mu duba wannan.
Kuna buƙatar ƙirƙirar a Theme.js
fayil don farawa.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Yana ƙara ƙarin launuka biyu zuwa abin jigon don sa ya zama mai fa'ida da sha'awa. Dangane da dalla-dalla kan software, zaku iya ƙirƙirar alamomi na salla don na iri-iri, faɗuwar faɗin, faɗin wuraren da aka yi, da ƙari.
Domin cin gajiyar sabbin abubuwan da aka gabatar a cikin wannan jigon jigon, dole ne ka fara shigar ChakraProvider
a tushen aikace-aikacen.
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;
Bayan haka, kuna yin umarni ChakraProvider
don amfani da jigon abin da kuka ƙirƙira a baya. Yanzu duk abubuwan Chakra na iya amfani da launuka iri.
Wasu ayyukan na iya buƙatar kawai canza fasalin fasalin fasalin Chakra maimakon buƙatar gyaran salo ta kowace hanya.
A matsayin misali na abu salon kayan aiki, ga shi:
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: "",
},
}
Yanzu, za mu gyara kawai Button
da kuma Heading
sassa.
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;
Za mu iya kawar da iyakar-radius wanda aka saita ta tsohuwa don Button
ta hanyar cire ta baseStyle
. Kuna iya canza girman font da shimfidar nau'in rubutu don Heading
. Yin amfani da misalan da ke sama, zaku iya fahimtar yadda zamu iya canza daidaitaccen salo na abubuwan Chakra.
Haɓaka ko canza salon abubuwan abubuwan Chakra yana ba mu ganuwa da iko akan bayyanar da aiki na mu'amalar masu amfani da mu.
Abubuwan Chakra da na ɓangare na uku
Chakra yana ba da damar samfura na ɓangare na uku don cin gajiyar salon su. Sakamakon haka, haɗa abubuwa na ɓangare na uku tare da Chakra UI yana buƙatar ƴan abubuwan rufe abubuwan mallakar mallaka.
Wadannan sune jerin abubuwan HTML da masana'antar Chakra ke tallafawa:
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>
);
}
Mun haɗa na gaba.js Image
bangaren tare da Chakra UI a cikin snippet code a sama. Sa'an nan, mun kafa a ChakraNextImage
bangaren, kuma ta hanyar shi, za mu iya wuce Chakra ta style props to Image
.
rayarwa
Kuna iya ayyana rayarwa ta amfani da Chakra UI's keyframes
mataimaki. Keyframes
Ɗauki ma'anar maɓalli na CSS kuma mayar da wani abu da za ku iya amfani da shi a cikin salo:
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>
);
}
Yin amfani da keyframes
mataimaki, zaku iya ƙirƙirar motsin rai da kuke gani anan. Kayan raye-raye yana ba mu damar haɓaka abubuwan Chakra UI.
A matsayin mataki na ƙarshe, wuce spinAnimation
cikin bangaren Akwatin domin a iya ƙara rayarwa zuwa ƙa'idodin Chakra UI.
Shafi Canje-canje
Ana iya ƙara canjin shafi zuwa ƙa'idodin mu don inganta ƙwarewar mai amfani lokacin da suke motsawa tsakanin shafuka.
Mai zuwa shine misalin yadda ake cimma shi tare da 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;
Don aiwatar da canje-canjen shafi, yi amfani da abubuwan da aka gyara daga Chakra UI. Ana amfani da canjin ScaleFade a cikin layin lambar da ke sama.
Da fatan za a sanar ScaleFade
game da hanyar aikace-aikacen ku ta yadda canjin zai iya aiki yayin da kuke motsawa a kan allo! Abun yana ba da bayanai game da hanyar yanzu, waɗanda za ku iya aika zuwa gare su ScaleFade
's key prop. InitialScale
kuma a cikin prop ana amfani da su don kafa ma'aunin farawa na sauyawa da kuma sanya shi ya faru lokacin da aka sanya bangaren.
A cikin wannan yanki, mun kalli kaɗan daga cikin fasalulluka da iyawar da Chakra UI ke bayarwa da kuma yadda yake taimaka mana cikin cikakkiyar ƙwarewarmu. Mun kuma bincika yadda kafa jigogi abubuwa da haɓaka salon duniya zasu iya taimakawa wajen kiyaye girman tsarin mu.
Idan baku riga ba, Mun yi imanin wannan labarin ya ba ku wasu dabaru don daidaita tsarin ci gaban Chakra UI ɗin ku.
Leave a Reply