বিকাশকারীরা চক্র 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 এ উন্নত কৌশল
রিয়েল-টাইম এসভিজি তৈরি করা হচ্ছে
আপনার ওয়েবসাইটের জন্য নতুন থিম স্থাপন করার সময় আপনি বর্তমান নকশা প্রতিফলিত করতে আপনার SVG গুলিকে গতিশীলভাবে আপডেট করতে চাইতে পারেন৷ এটি বিভিন্ন থিমের প্রতিটির জন্য স্বতন্ত্র SVG তৈরির প্রয়োজন করে।
চক্র UI, অন্যদিকে, একটি আরও ব্যবহারকারী-বান্ধব বিকল্প। ব্যবহার করে useColorMode
চক্র UI-তে হুক, আমরা গতিশীলভাবে আমাদের SVG-এর ফিল কালার পরিবর্তন করতে পারি।
ডার্ক মোড প্রয়োগ করা হলেই 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
একটি 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
এবং প্রপ ইন ব্যবহার করা হয় ট্রানজিশনের প্রারম্ভিক স্কেল স্থাপন করতে এবং কম্পোনেন্ট রেন্ডার করার সময় এটি ঘটানোর জন্য।
এই অংশে, আমরা কয়েকটি বৈশিষ্ট্য এবং ক্ষমতা দেখেছি যা চক্র UI অফার করে এবং কীভাবে এটি আমাদের নিখুঁত অভিজ্ঞতায় সহায়তা করে। আমরা থিম অবজেক্ট স্থাপন এবং বিশ্বব্যাপী শৈলীগুলি কীভাবে আমাদের সিস্টেমের মাপযোগ্যতা বজায় রাখতে সহায়তা করতে পারে তাও আমরা অনুসন্ধান করেছি।
যদি আপনি ইতিমধ্যেই না করে থাকেন, আমরা বিশ্বাস করি এই নিবন্ধটি আপনাকে আপনার চক্র UI বিকাশ প্রক্রিয়াকে প্রবাহিত করার জন্য কিছু ধারণা দিয়েছে।
নির্দেশিকা সমন্ধে মতামত দিন