ڊولپرز ڳوليندا چاڪرا UI کي سندن سڀ کان وڌيڪ مفيد پارٽنر. آن لائن خدمتن لاءِ جزوي ٽول ڪٽ جي طور تي، چڪر UI ڪارڪردگي سان گڏ جامع ايپس ٺاهڻ کي آسان بڻائي ٿو.
ان جي پهچ ۽ WAI-ARIA جي تعميل جي نتيجي ۾، چڪر UI جي عناصر ان جي API کي استعمال ڪندي ترتيب ڏيڻ ۽ ٻيهر موضوع کي ترتيب ڏيڻ لاء آسان آهن. بهرحال، هي صرف برفبرگ جو ٽپ آهي فائدن جي حوالي سان اهو ڊولپرز کي پيش ڪري ٿو.
هن پوسٽ ۾، اسان چيڪرا UI جي ڪجهه وڌيڪ ترقي يافته خاصيتن تي هڪ ويجھو نظر وجهنداسين ۽ اهي ڪيئن توهان جي مدد ڪري سگھن ٿيون توهان کي هڪ پروگرامر جي طور تي وڌيڪ پيداوار بڻجي.
چڪر UI ڇا آهي؟
چڪر UI هڪ جزوي ٽول ڪٽ آهي جيڪو ڊولپرز کي انهن جي ويب ايپليڪيشنن لاءِ جلدي رسائي ۽ ٻيهر استعمال لائق صارف انٽرفيس اجزاء ٺاهڻ ۾ مدد ڪري ٿو. اهو React جي چوٽي تي ٺهيل آهي ۽ ان جي ٿيمنگ انجڻ لاءِ اسٽائلڊ سسٽم استعمال ڪري ٿو.
چڪر 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 کي اپڊيٽ ڪرڻ لاءِ موجوده ڊيزائن کي عڪاسي ڪرڻ لاءِ جڏھن توھان جي ويب سائيٽ لاءِ نوان موضوع قائم ڪندا. اهو ضروري آهي ته هر هڪ ڪيترن ئي موضوعن لاء الڳ SVGs ٺاهڻ.
چڪر UI، ٻئي طرف، هڪ وڌيڪ صارف دوست اختيار آهي. استعمال ڪندي useColorMode
چڪر UI ۾ ٿلهو، اسان متحرڪ طور تي اسان جي SVGs جو رنگ ڀري سگھون ٿا.
استعمال ڪريو ColorMode صرف هڪ ڀيرو استعمال ڪري سگهجي ٿو جڏهن ڊارڪ موڊ لاڳو ٿئي ٿو. پهريون ڀيرو چاڪرا 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;
ان کي وڌيڪ متحرڪ ۽ دلڪش بنائڻ لاءِ موضوع واري شئي ۾ ٻه وڌيڪ رنگ شامل ڪري ٿو. سافٽ ويئر جي وضاحتن جي مطابق، توھان ٽائيپ فيڪس، بريڪ پوائنٽس، فونٽ جي سائز، ڪالمن جي چوٽي، ۽ وڌيڪ لاء اسٽائل مارڪر ٺاھي سگھو ٿا.
ھن موضوع جي اعتراض ۾ نئين متعارف ٿيل جديد خصوصيتن جو فائدو وٺڻ لاء، توھان کي پھريون ڀيرو انسٽال ڪرڻ گھرجي 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
.
Animations
توھان چاڪرا UI استعمال ڪندي متحرڪ بيان ڪري سگھو ٿا keyframes
مددگار. Keyframes
سي ايس ايس ڪي فريم جي تعريف ۾ وٺو ۽ ھڪڙو اعتراض واپس ڪريو جيڪو توھان استعمال ڪري سگھو ٿا انداز ۾:
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
۽ پروپ ۾ استعمال ڪيا ويندا آهن منتقلي جي شروعاتي پيماني کي قائم ڪرڻ ۽ ان کي ٿيڻ لاءِ جڏهن جزو پيش ڪيو ويندو آهي.
هن ٽڪري ۾، اسان ڏٺو ته ڪجھ خاصيتون ۽ صلاحيتون جيڪي چڪرا UI پيش ڪري ٿو ۽ اهو اسان کي اسان جي ڀرپور تجربو ۾ ڪيئن مدد ڪري ٿو. اسان اهو پڻ دريافت ڪيو آهي ته ڪيئن موضوع جي شين کي قائم ڪرڻ ۽ عالمي اندازن کي ترقي ڪرڻ اسان جي سسٽم جي اسپيبلبل کي برقرار رکڻ ۾ مدد ڪري سگهي ٿي.
جيڪڏهن توهان اڳ ۾ ئي نه ڪيو آهي، اسان کي يقين آهي ته هي آرٽيڪل توهان کي ڪجهه خيال ڏنو آهي توهان جي چڪر UI ترقي جي عمل کي تيز ڪرڻ لاء.
جواب ڇڏي وڃو