డెవలపర్లు తమ అత్యంత ఉపయోగకరమైన భాగస్వామిగా చక్ర 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 డెవలప్మెంట్ ప్రక్రియను క్రమబద్ధీకరించడానికి ఈ కథనం మీకు కొన్ని ఆలోచనలను అందించిందని మేము విశ్వసిస్తున్నాము.
సమాధానం ఇవ్వూ