ഡവലപ്പർമാർ അവരുടെ ഏറ്റവും ഉപയോഗപ്രദമായ പങ്കാളിയായി ചക്ര യുഐ കണ്ടെത്തും. ഓൺലൈൻ സേവനങ്ങൾക്കായുള്ള ഒരു ഘടക ടൂൾകിറ്റ് എന്ന നിലയിൽ, കാര്യക്ഷമതയോടെ ഉൾക്കൊള്ളുന്ന ആപ്പുകൾ നിർമ്മിക്കുന്നത് ചക്ര UI എളുപ്പമാക്കുന്നു.
അതിന്റെ പ്രവേശനക്ഷമതയുടെയും WAI-ARIA പാലിക്കലിന്റെയും ഫലമായി, ചക്ര യുഐയുടെ ഘടകങ്ങൾ അതിന്റെ API ഉപയോഗിച്ച് ഇഷ്ടാനുസൃതമാക്കാനും വീണ്ടും തീം ചെയ്യാനും എളുപ്പമാണ്. എന്നിരുന്നാലും, ഇത് ഡെവലപ്പർമാർക്ക് നൽകുന്ന നേട്ടങ്ങളെക്കുറിച്ച് മഞ്ഞുമലയുടെ അഗ്രം മാത്രമാണ്.
ഈ പോസ്റ്റിൽ, ചക്ര 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
Chakra UI ഇൻസ്റ്റാൾ ചെയ്തതിന് ശേഷം നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ റൂട്ടിൽ ChakraProvider കോൺഫിഗർ ചെയ്യണം. നിങ്ങൾ ഉപയോഗിക്കുന്ന ചട്ടക്കൂടിനെ ആശ്രയിച്ച്, ഇത് നിങ്ങളുടെ index.jsx, index.tsx അല്ലെങ്കിൽ app.jsx ഫയലിലായിരിക്കാം.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
ചക്ര യുഐയിലെ നൂതന സാങ്കേതിക വിദ്യകൾ
തത്സമയ SVG-കൾ സൃഷ്ടിക്കുന്നു
നിങ്ങളുടെ വെബ്സൈറ്റിനായി പുതിയ തീമുകൾ സ്ഥാപിക്കുമ്പോൾ നിലവിലെ ഡിസൈൻ പ്രതിഫലിപ്പിക്കുന്നതിന് നിങ്ങളുടെ SVG-കൾ ചലനാത്മകമായി അപ്ഡേറ്റ് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. ഇത് ഓരോ തീമുകൾക്കുമായി വ്യതിരിക്തമായ SVG-കൾ സൃഷ്ടിക്കേണ്ടതുണ്ട്.
മറുവശത്ത്, ചക്ര യുഐ കൂടുതൽ ഉപയോക്തൃ-സൗഹൃദ ഓപ്ഷനാണ്. ഉപയോഗിച്ച് 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
മോഡ് പ്രവർത്തനം.
ചക്ര തീമുകൾ
ചക്ര യുഐയുടെ തീമുകൾ ഉപയോഗിക്കുന്നത് ശൈലിയിലുള്ള സിസ്റ്റം തീം സ്പെസിഫിക്കേഷൻ സാങ്കേതികത. ചക്രത്തിലെ തീമുകൾക്ക് വർണ്ണ പാലറ്റർ മുതൽ സ്പെയ്സിംഗ് വരെയുള്ള വിവിധ വശങ്ങളെ സ്വാധീനിക്കാൻ കഴിയും.
നിങ്ങൾ ഇറക്കുമതി ചെയ്യേണ്ടതുണ്ട് 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
. മുകളിലെ ഉദാഹരണങ്ങൾ ഉപയോഗിച്ച്, ചക്ര ഘടകങ്ങളുടെ സ്റ്റാൻഡേർഡ് സ്റ്റൈലിംഗ് എങ്ങനെ മാറ്റാമെന്ന് നിങ്ങൾക്ക് മനസിലാക്കാൻ കഴിയും.
ചക്ര ഘടകങ്ങളുടെ ശൈലികൾ മെച്ചപ്പെടുത്തുകയോ മാറ്റുകയോ ചെയ്യുന്നത് ഞങ്ങളുടെ ഉപയോക്തൃ ഇന്റർഫേസുകളുടെ രൂപത്തിലും പ്രവർത്തനത്തിലും ദൃശ്യപരതയും നിയന്ത്രണവും നൽകുന്നു.
ചക്രവും മൂന്നാം കക്ഷി ഘടകങ്ങളും
മൂന്നാം കക്ഷി മൊഡ്യൂളുകളെ അവരുടെ ശൈലിയിൽ നിന്ന് പ്രയോജനപ്പെടുത്താൻ ചക്ര അനുവദിക്കുന്നു. തൽഫലമായി, മൂന്നാം കക്ഷി ഘടകങ്ങളെ ചക്ര യുഐയുമായി സംയോജിപ്പിക്കുന്നതിന് കുറച്ച് പ്രൊപ്രൈറ്ററി ഘടക റാപ്പറുകൾ ആവശ്യമാണ്.
ചക്ര ഫാക്ടറി പിന്തുണയ്ക്കുന്ന 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
.
അനിമേഷനുകൾ
ചക്ര യുഐകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ആനിമേഷനുകൾ നിർവചിക്കാം 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
അസിസ്റ്റന്റ്, നിങ്ങൾ ഇവിടെ കാണുന്ന ആനിമേഷൻ സൃഷ്ടിക്കാൻ കഴിയും. ചക്ര യുഐ ഘടകങ്ങൾ ആനിമേറ്റ് ചെയ്യാൻ ആനിമേഷൻ പ്രോപ്പ് ഞങ്ങളെ അനുവദിക്കുന്നു.
അവസാന ഘട്ടമെന്ന നിലയിൽ, കടന്നുപോകുക spinAnimation
ബോക്സ് ഘടകത്തിലേക്ക് അതിലൂടെ ആനിമേഷനുകൾ ചക്ര യുഐ ആപ്പുകളിലേക്ക് ചേർക്കാം.
പേജ് സംക്രമണങ്ങൾ
ഉപയോക്താക്കൾ പേജുകൾക്കിടയിൽ നീങ്ങുമ്പോൾ അവരുടെ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിന് ഞങ്ങളുടെ ആപ്പുകളിലേക്ക് പേജ് സംക്രമണങ്ങൾ ചേർത്തേക്കാം.
ചക്ര യുഐ ഉപയോഗിച്ച് ഇത് എങ്ങനെ നേടാം എന്നതിന്റെ ഒരു ഉദാഹരണം ഇനിപ്പറയുന്നതാണ്:
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;
പേജ് സംക്രമണങ്ങൾ നടപ്പിലാക്കുന്നതിനായി, ചക്ര യുഐയിൽ നിന്നുള്ള സംക്രമണ ഘടകങ്ങൾ ഉപയോഗിക്കുക. മുകളിലെ കോഡിന്റെ വരിയിൽ ScaleFade സംക്രമണം ഉപയോഗിക്കുന്നു.
ദയവായി അറിയിക്കുക ScaleFade
നിങ്ങളുടെ അപ്ലിക്കേഷന്റെ പാതയെക്കുറിച്ച്, അതുവഴി നിങ്ങൾ സ്ക്രീനിലുടനീളം നീങ്ങുമ്പോൾ പരിവർത്തനം പ്രവർത്തിക്കും! ഒബ്ജക്റ്റ് നിലവിലെ പാതയെക്കുറിച്ചുള്ള ഡാറ്റ നൽകുന്നു, അത് നിങ്ങൾക്ക് അയയ്ക്കാൻ കഴിയും ScaleFade
ന്റെ കീ പ്രോപ്. InitialScale
പരിവർത്തനത്തിന്റെ ആരംഭ സ്കെയിൽ സ്ഥാപിക്കുന്നതിനും ഘടകം റെൻഡർ ചെയ്യുമ്പോൾ അത് സംഭവിക്കുന്നതിനും പ്രോപ്പിൽ ഉപയോഗിക്കുന്നു.
ഈ ഭാഗത്തിൽ, ചക്ര യുഐ വാഗ്ദാനം ചെയ്യുന്ന ചില സവിശേഷതകളും കഴിവുകളും ഞങ്ങൾ പരിശോധിച്ചു, അത് ഞങ്ങളുടെ മികച്ച അനുഭവത്തിൽ എങ്ങനെ സഹായിക്കുന്നു. തീം ഒബ്ജക്റ്റുകൾ സ്ഥാപിക്കുന്നതും ആഗോള ശൈലികൾ വികസിപ്പിക്കുന്നതും ഞങ്ങളുടെ സിസ്റ്റത്തിന്റെ സ്കേലബിളിറ്റി നിലനിർത്തുന്നതിന് എങ്ങനെ സഹായിക്കുമെന്ന് ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്തിട്ടുണ്ട്.
നിങ്ങൾ ഇതിനകം ചെയ്തിട്ടില്ലെങ്കിൽ, നിങ്ങളുടെ ചക്ര യുഐ വികസന പ്രക്രിയ കാര്യക്ഷമമാക്കുന്നതിന് ഈ ലേഖനം നിങ്ങൾക്ക് ചില ആശയങ്ങൾ നൽകിയിട്ടുണ്ടെന്ന് ഞങ്ങൾ വിശ്വസിക്കുന്നു.
നിങ്ങളുടെ അഭിപ്രായങ്ങൾ രേഖപ്പെടുത്തുക