டெவலப்பர்கள் சக்ரா 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
ஹூக் மற்றும் எஸ்.வி.ஜி. பயன்படுத்தி 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
மாற்றத்தின் தொடக்க அளவை நிறுவுவதற்கும், கூறு வழங்கப்படுகையில் அதைச் செய்வதற்கும் முட்டுக்கட்டை பயன்படுத்தப்படுகிறது.
இந்த பகுதியில், சக்ரா UI வழங்கும் சில அம்சங்கள் மற்றும் திறன்கள் மற்றும் எங்களின் சரியான அனுபவத்தில் அது எவ்வாறு உதவுகிறது என்பதைப் பார்த்தோம். தீம் பொருள்களை நிறுவுதல் மற்றும் உலகளாவிய பாணிகளை உருவாக்குதல் ஆகியவை எங்கள் அமைப்பின் அளவிடுதலைப் பராமரிப்பதில் எவ்வாறு உதவக்கூடும் என்பதையும் நாங்கள் ஆராய்ந்தோம்.
உங்களிடம் ஏற்கனவே இல்லையென்றால், உங்கள் சக்ரா UI மேம்பாட்டு செயல்முறையை நெறிப்படுத்த இந்தக் கட்டுரை உங்களுக்கு சில யோசனைகளை வழங்கியிருப்பதாக நாங்கள் நம்புகிறோம்.
ஒரு பதில் விடவும்