विकासकर्ताहरूले चक्र 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 मा उन्नत प्रविधिहरू
वास्तविक समय SVGs उत्पन्न गर्दै
तपाइँ तपाइँको वेबसाइट को लागी नयाँ विषयवस्तुहरु को स्थापना गर्दा हालको डिजाइन प्रतिबिम्बित गर्न को लागी तपाइँको 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
र in prop लाई ट्रान्जिसनको प्रारम्भिक स्केल स्थापना गर्न र कम्पोनेन्ट रेन्डर गर्दा यो हुनको लागि प्रयोग गरिन्छ।
यस टुक्रामा, हामीले चक्र UI ले प्रस्ताव गर्ने सुविधाहरू र क्षमताहरू र यसले हामीलाई हाम्रो उत्तम अनुभवमा कसरी सहयोग गर्छ भनेर हेर्यौं। हामीले विषयवस्तु वस्तुहरू स्थापना गर्ने र विश्वव्यापी शैलीहरू विकास गर्दा हाम्रो प्रणालीको स्केलेबिलिटी कायम राख्न कसरी मद्दत गर्न सक्छ भनेर हामीले अन्वेषण गरेका छौं।
यदि तपाइँ पहिले नै छैन भने, हामी विश्वास गर्छौं कि यो लेखले तपाइँलाई तपाइँको चक्र UI विकास प्रक्रियालाई सुव्यवस्थित गर्न केहि विचारहरू दिएको छ।
जवाफ छाड्नुस्