کی میز کے مندرجات[چھپائیں][دکھائیں]
ڈویلپرز چکرا UI کو اپنا سب سے مفید پارٹنر پائیں گے۔ آن لائن خدمات کے لیے ایک جزو ٹول کٹ کے طور پر، چکرا UI کارکردگی کے ساتھ جامع ایپس کی تعمیر کو آسان بناتا ہے۔
اس کی رسائی اور WAI-ARIA کی تعمیل کے نتیجے میں، Chakra 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 کے فل کلر کو متحرک طور پر تبدیل کر سکتے ہیں۔
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
ہک اور ایس وی جی کو متحرک بنانے کے لیے۔ استعمال کرنا 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 کے ساتھ فریق ثالث کے عناصر کو یکجا کرنے کے لیے کم ملکیتی جزو ریپرز کی ضرورت ہوتی ہے۔
مندرجہ ذیل ایچ ٹی ایم ایل عناصر کی فہرست ہے جو چکرا فیکٹری کے ذریعہ تعاون یافتہ ہیں۔
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
سی ایس ایس کی فریم کی تعریف میں لیں اور ایک ایسی چیز واپس کریں جسے آپ اسٹائل میں استعمال کرسکتے ہیں:
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
اور in prop کا استعمال منتقلی کے ابتدائی پیمانے کو قائم کرنے کے لیے کیا جاتا ہے اور جب جزو کو پیش کیا جاتا ہے تو اسے انجام دینے کے لیے استعمال کیا جاتا ہے۔
اس ٹکڑے میں، ہم نے چند خصوصیات اور صلاحیتوں کو دیکھا جو چکرا UI پیش کرتا ہے اور یہ ہمارے بہترین تجربے میں ہماری مدد کیسے کرتا ہے۔ ہم نے یہ بھی دریافت کیا ہے کہ کس طرح تھیم آبجیکٹ قائم کرنا اور عالمی طرزیں تیار کرنا ہمارے سسٹم کی توسیع پذیری کو برقرار رکھنے میں معاون ثابت ہو سکتا ہے۔
اگر آپ نے پہلے سے ایسا نہیں کیا ہے تو ہمیں یقین ہے کہ اس مضمون نے آپ کو اپنے چکرا UI کی ترقی کے عمل کو ہموار کرنے کے لیے کچھ آئیڈیاز فراہم کیے ہیں۔
جواب دیجئے