پراختیا کونکي به د چاکرا UI ومومي چې د دوی خورا ګټور شریک وي. د آنلاین خدماتو لپاره د برخې اوزار کټ په توګه ، چکرا UI د موثریت سره د ټول شموله ایپسونو رامینځته کول اسانه کوي.
د دې د لاسرسي او WAI-ARIA موافقت په پایله کې ، د چاکرا UI عناصر د دې API په کارولو سره د موضوع تنظیم کولو او بیا تنظیم کولو لپاره ساده دي. په هرصورت، دا یوازې د یخ برګ یوه برخه ده د ګټو په اړه چې دا پراختیا کونکي وړاندیز کوي.
پدې پوسټ کې ، موږ به د چاکرا UI ځینې پرمختللي ب featuresو ته نږدې وګورو او دا چې څنګه کولی شي تاسو سره د برنامه کونکي په توګه ډیر ګټور کیدو کې مرسته وکړي.
چاکرا UI څه شی دی؟
چاکرا UI د اجزاو وسیله کټ دی چې پراختیا کونکو سره مرسته کوي په چټکۍ سره د دوی ویب غوښتنلیکونو لپاره د لاسرسي وړ او د بیا کارولو وړ کارونکي انٹرفیس اجزا رامینځته کړي. دا د عکس العمل په سر کې جوړ شوی او د دې تیمنګ انجن لپاره سټایل شوي سیسټم کاروي.
د چاکرا UI هدف دا دی چې د پروګرام کونکو لپاره د لږترلږه هڅو سره ښکلي ، ځواب ویونکي او د لاسرسي وړ کارونکي انٹرفیس رامینځته کول اسانه کړي. په تول کټ کې د کارونې لپاره د چمتو شوي اجزاو پراخه ډولونه شامل دي چې ډیزاین شوي ترڅو په اسانۍ سره د ترکیب وړ او د توزیع وړ وي.
چاکرا UI خلاص سرچینه ده، او پراختیا یې د برخې لخوا سپانسر شوې.
د چاکرا UI څنګه نصب کړئ
تاسو باید لاندې کمانډونه ټایپ کړئ ترڅو ستاسو په پروژه کې چکرا شامل کړئ:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
تاسو باید د چاکرا UI نصبولو وروسته د خپل غوښتنلیک په ریښه کې د چاکرا پروویډر تنظیم کړئ. د هغه چوکاټ پورې اړه لري چې تاسو یې کاروئ، دا ممکن ستاسو په index.jsx، index.tsx، یا app.jsx فایل کې وي.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
په چکرا UI کې پرمختللي تخنیکونه
د ریښتیني وخت SVGs رامینځته کول
تاسو ممکن غواړئ خپل SVGs په متحرک ډول تازه کړئ ترڅو اوسنی ډیزاین منعکس کړي پداسې حال کې چې ستاسو د ویب پا forې لپاره نوي موضوعات رامینځته کوي. دا د هر یو څو موضوعاتو لپاره د جلا SVGs رامینځته کولو ته اړتیا لري.
چاکرا UI، له بلې خوا، یو ډیر کاروونکي دوستانه انتخاب دی. په کارولو سره useColorMode
په چاکرا UI کې هک، موږ کولی شو په متحرک ډول زموږ د SVGs ډک رنګ بدل کړو.
UseColorMode یوازې هغه وخت کارول کیدی شي کله چې تیاره حالت پلي شي. د لومړي ځل لپاره د چکرا UI سره تیاره حالت کارول؟ دا مقاله به تاسو ته وښیې چې دا څنګه په سمه توګه کار کولو لپاره ترلاسه کړئ.
د useColorMode
اختیار د تیاره حالت فعالولو وروسته شتون لري.
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>
);
}
پورتني کوډ د دې سره یوځای کوي useColorMode
هوک او SVG د دوی متحرک کولو لپاره. کارول useColorMode
موږ کولی شو د رنګ حالت بیرته ترلاسه او بدل کړو. که تاسو غواړئ رنګونه بدل کړئ، تاسو باید یو هم وکاروئ colorMode
او يا د toggleColor
د موډ فعالیت.
د چاکرا موضوعات
د چاکرا UI موضوعات په کارولو سره پلي کیږي د سټایل شوي سیسټم موضوع مشخصات تخنیک په چکرا کې موضوعات کولی شي د رنګ پیلټر څخه تر فاصلې پورې مختلف اړخونه اغیزه وکړي.
تاسو به یوازې د واردولو ته اړتیا ولرئ extendTheme
فعالیت په داسې حال کې چې په پریزیټ کې د ټوکنونو بدلولو لپاره کیلي اضافه کول. راځئ چې په دې اړه یو نظر ولرو.
تاسو یوازې اړتیا لرئ چې یو جوړ کړئ Theme.js
د پیل کولو لپاره فایل.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
دا د موضوع اعتراض ته دوه نور رنګونه اضافه کوي ترڅو دا ډیر متحرک او زړه راښکونکي کړي. د سافټویر ځانګړتیاو سره سم، تاسو کولی شئ د ټایپ فاسس، بریک پواینټ، د فونټ اندازې، د کالم پلنوالی، او نور لپاره سټایل مارکر جوړ کړئ.
د دې لپاره چې په دې موضوع کې د نوي معرفي شوي پرمختللي ب featuresو څخه ګټه پورته کړئ ، تاسو باید لومړی نصب کړئ ChakraProvider
د غوښتنلیک په ریښه کې.
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;
له هغې وروسته، تاسو لارښوونه کوئ ChakraProvider
د موضوع څیز کارولو لپاره چې تاسو مخکې جوړ کړی. د چاکرا ټولې برخې ممکن اوس د برانډ رنګونه وکاروي.
ځینې پروژې ممکن یوازې د چاکرا د لومړني برخې سټایل بدلولو ته اړتیا ولري پرځای یې په هر ډول سټایل ترمیم ته اړتیا لري.
د اجزا سټایل اعتراض د مثال په توګه، دلته دا دی:
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: "",
},
}
اوس، موږ به یوازې دا تعدیل کړو Button
او Heading
برخې
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;
موږ کولی شو د سرحد ریډیس څخه ځان خلاص کړو چې د ډیفالټ لپاره ټاکل شوی و Button
د هغې په لرې کولو سره baseStyle
. تاسو کولی شئ د فونټ اندازه او د ټایپفیس ترتیب د دې لپاره بدل کړئ Heading
. د پورته مثالونو په کارولو سره ، تاسو کولی شئ پوه شئ چې موږ څنګه کولی شو د چاکرا اجزاو معیاري سټایل بدل کړو.
د چاکرا اجزاو سټایلونو ته وده ورکول یا بدلول موږ ته زموږ د کارونکي انٹرفیس ظاهري او فعالیت باندې لید او کنټرول چمتو کوي.
چاکرا او د دریمې ډلې برخې
چاکرا د دریمې ډلې ماډلونو ته اجازه ورکوي چې د دوی سټایل څخه ګټه پورته کړي. د پایلې په توګه ، د چاکرا UI سره د دریمې ډلې عناصرو ترکیب لږ ملکیت اجزا ریپرونو ته اړتیا لري.
لاندې د HTML عناصرو لیست دی چې د چاکرا فابریکې لخوا ملاتړ کیږي:
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>
);
}
موږ د Next.js مدغم کوو Image
د پورته کوډ سنیپټ کې د چکرا UI سره اجزا. بیا، موږ یو تنظیم کړ ChakraNextImage
اجزا، او د هغې له لارې، موږ کولی شو د چاکرا سټایل پروپس ته انتقال کړو Image
.
انیمیشنونه
تاسو کولی شئ د چاکرا UI په کارولو سره متحرکات تعریف کړئ keyframes
مرسته کونکی. Keyframes
د CSS کلیدي چوکاټ تعریف کې واخلئ او یو شی بیرته راستانه کړئ چې تاسو یې په سټایلونو کې کارولی شئ:
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>
);
}
په کارولو سره د keyframes
معاون، تاسو کولی شئ هغه حرکت جوړ کړئ چې تاسو یې دلته ګورئ. د انیمیشن پروپ موږ ته اجازه راکوي چې د چاکرا UI اجزا متحرک کړو.
د وروستي ګام په توګه، تیر کړئ spinAnimation
د بکس برخې ته د دې لپاره چې متحرکات د چاکرا UI ایپسونو کې اضافه شي.
د پاڼې لیږد
د پاڼې لیږد ممکن زموږ په ایپسونو کې اضافه شي ترڅو د کارونکي تجربه ښه کړي کله چې دوی د مخونو ترمینځ حرکت کوي.
لاندې د چاکرا 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;
د پاڼې لیږد پلي کولو لپاره، د چاکرا UI څخه د لیږد اجزا وکاروئ. د ScaleFade لیږد د کوډ پورتنۍ کرښه کې کارول کیږي.
مهرباني وکړئ خبر کړئ ScaleFade
ستاسو د اپلیکیشن د لارې په اړه ترڅو لیږد کولی شي فعالیت وکړي کله چې تاسو د سکرین په اوږدو کې حرکت کوئ! اعتراض د اوسنۍ لارې په اړه معلومات چمتو کوي، کوم چې تاسو بیا لیږلی شئ ScaleFade
کلیدي پروپوزل. InitialScale
او په پروپ کې د لیږد پیل کولو پیمانه رامینځته کولو لپاره کارول کیږي او دا پیښیږي کله چې برخه وړاندې کیږي.
پدې برخه کې ، موږ یو څو ب featuresو او وړتیاو ته کتنه وکړه چې د چاکرا UI وړاندیز کوي او دا څنګه زموږ په کامل تجربه کې زموږ سره مرسته کوي. موږ دا هم وپلټله چې څنګه د موضوع توکي رامینځته کول او د نړیوال سټایلونو رامینځته کول ممکن زموږ د سیسټم د توزیع ساتلو کې مرسته وکړي.
که تاسو دمخه نه یاست ، موږ باور لرو چې دې مقالې تاسو ته ستاسو د چکرا UI پراختیا پروسې ساده کولو لپاره ځینې نظریات درکړي.
یو ځواب ورکړئ ووځي