विकसकांना चक्र UI हा त्यांचा सर्वात उपयुक्त भागीदार वाटेल. ऑनलाइन सेवांसाठी घटक टूलकिट म्हणून, चक्र UI कार्यक्षमतेसह सर्वसमावेशक अॅप्स तयार करणे सोपे करते.
त्याच्या प्रवेशयोग्यता आणि WAI-ARIA अनुपालनाच्या परिणामी, चक्र UI चे घटक त्याच्या API वापरून सानुकूलित करणे आणि पुन्हा थीम करणे सोपे आहे. तथापि, ते विकसकांना देत असलेल्या फायद्यांबाबत हिमनगाचे हे फक्त टोक आहे.
या पोस्टमध्ये, आम्ही चक्र UI ची काही अधिक प्रगत वैशिष्ट्ये आणि ते तुम्हाला प्रोग्रामर म्हणून अधिक उत्पादक बनण्यास कशी मदत करू शकतात यावर जवळून नजर टाकू.
चक्र UI म्हणजे काय?
चक्र UI हे एक घटक टूलकिट आहे जे विकसकांना त्यांच्या वेब अनुप्रयोगांसाठी त्वरीत प्रवेशयोग्य आणि पुन्हा वापरता येण्याजोगे वापरकर्ता इंटरफेस घटक तयार करण्यात मदत करते. हे React च्या वर तयार केलेले आहे आणि त्याच्या थीमिंग इंजिनसाठी शैलीबद्ध प्रणाली वापरते.
Chakra 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 डायनॅमिकरित्या अपडेट करू शकता. हे अनेक थीमपैकी प्रत्येकासाठी वेगळे SVG तयार करणे आवश्यक आहे.
चक्र 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;
थीम ऑब्जेक्टला अधिक दोलायमान आणि आकर्षक बनवण्यासाठी ते आणखी दोन रंग जोडते. सॉफ्टवेअर वैशिष्ट्यांनुसार, तुम्ही टाइपफेस, ब्रेकपॉइंट्स, फॉन्ट आकार, स्तंभ रुंदी आणि बरेच काही साठी शैली मार्कर तयार करू शकता.
या थीम ऑब्जेक्टमध्ये नवीन सादर केलेल्या प्रगत वैशिष्ट्यांचा लाभ घेण्यासाठी, आपण प्रथम स्थापित करणे आवश्यक आहे 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
आणि prop मध्ये संक्रमणाचा प्रारंभिक स्केल स्थापित करण्यासाठी आणि घटक प्रस्तुत केल्यावर ते घडण्यासाठी वापरले जातात.
या भागामध्ये, आम्ही चक्र UI ऑफर करत असलेल्या काही वैशिष्ट्ये आणि क्षमता पाहिल्या आणि ते आम्हाला आमच्या परिपूर्ण अनुभवामध्ये कशी मदत करते. थीम ऑब्जेक्ट्स स्थापित करणे आणि जागतिक शैली विकसित करणे आमच्या सिस्टमची स्केलेबिलिटी राखण्यात कशी मदत करू शकते हे देखील आम्ही शोधले आहे.
जर तुमच्याकडे आधीपासून नसेल, तर आमचा विश्वास आहे की या लेखाने तुम्हाला तुमची चक्र UI विकास प्रक्रिया सुव्यवस्थित करण्यासाठी काही कल्पना दिल्या आहेत.
प्रत्युत्तर द्या