વિકાસકર્તાઓને ચક્ર UI તેમના સૌથી ઉપયોગી ભાગીદાર તરીકે જોવા મળશે. ઓનલાઈન સેવાઓ માટે કમ્પોનન્ટ ટૂલકીટ તરીકે, ચક્ર UI કાર્યક્ષમતા સાથે સમાવિષ્ટ એપ્સનું નિર્માણ કરવાનું સરળ બનાવે છે.
તેની ઍક્સેસિબિલિટી અને WAI-ARIA અનુપાલનના પરિણામે, ચક્ર UI ના ઘટકો તેના API નો ઉપયોગ કરીને કસ્ટમાઇઝ કરવા અને ફરીથી થીમ બનાવવા માટે સરળ છે. જો કે, તે વિકાસકર્તાઓને જે લાભો આપે છે તેના સંદર્ભમાં આ આઇસબર્ગની માત્ર ટોચ છે.
આ પોસ્ટમાં, અમે ચક્ર UI ની કેટલીક વધુ અદ્યતન સુવિધાઓ પર નજીકથી નજર નાખીશું અને તે તમને પ્રોગ્રામર તરીકે વધુ ઉત્પાદક બનવામાં કેવી રીતે મદદ કરી શકે છે.
ચક્ર 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 માં અદ્યતન તકનીકો
રીઅલ-ટાઇમ SVG જનરેટ કરી રહ્યું છે
તમારી વેબસાઇટ માટે નવી થીમ્સ સ્થાપિત કરતી વખતે તમે વર્તમાન ડિઝાઇનને પ્રતિબિંબિત કરવા માટે તમારા 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
હૂક અને 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
ની કી પ્રોપ. InitialScale
અને પ્રોપનો ઉપયોગ સંક્રમણના પ્રારંભિક સ્કેલને સ્થાપિત કરવા અને જ્યારે ઘટક રેન્ડર કરવામાં આવે ત્યારે તે થાય તે માટે થાય છે.
આ ભાગમાં, અમે ચક્ર UI દ્વારા પ્રદાન કરવામાં આવતી કેટલીક સુવિધાઓ અને ક્ષમતાઓ અને તે અમારા સંપૂર્ણ અનુભવમાં અમને કેવી રીતે સહાય કરે છે તેના પર ધ્યાન આપ્યું. અમે એ પણ અન્વેષણ કર્યું છે કે કેવી રીતે થીમ ઑબ્જેક્ટ્સ સ્થાપિત કરવા અને વૈશ્વિક શૈલીઓ વિકસાવવાથી અમારી સિસ્ટમની માપનીયતા જાળવવામાં મદદ મળી શકે છે.
જો તમારી પાસે પહેલેથી નથી, તો અમે માનીએ છીએ કે આ લેખે તમને તમારી ચક્ર UI વિકાસ પ્રક્રિયાને સુવ્યવસ્થિત કરવા માટે કેટલાક વિચારો આપ્યા છે.
એક જવાબ છોડો