ਡਿਵੈਲਪਰ ਚੱਕਰ UI ਨੂੰ ਉਹਨਾਂ ਦਾ ਸਭ ਤੋਂ ਲਾਭਦਾਇਕ ਸਾਥੀ ਲੱਭਣਗੇ। ਔਨਲਾਈਨ ਸੇਵਾਵਾਂ ਲਈ ਇੱਕ ਕੰਪੋਨੈਂਟ ਟੂਲਕਿੱਟ ਦੇ ਰੂਪ ਵਿੱਚ, ਚੱਕਰ UI ਕੁਸ਼ਲਤਾ ਨਾਲ ਸੰਮਿਲਿਤ ਐਪਸ ਨੂੰ ਬਣਾਉਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।
ਇਸਦੀ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ WAI-ARIA ਦੀ ਪਾਲਣਾ ਦੇ ਨਤੀਜੇ ਵਜੋਂ, ਚੱਕਰ UI ਦੇ ਤੱਤ ਇਸਦੇ API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਕੂਲਿਤ ਅਤੇ ਮੁੜ-ਥੀਮ ਲਈ ਸਧਾਰਨ ਹਨ। ਹਾਲਾਂਕਿ, ਇਹ ਡਿਵੈਲਪਰਾਂ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਫਾਇਦਿਆਂ ਦੇ ਸਬੰਧ ਵਿੱਚ ਆਈਸਬਰਗ ਦਾ ਸਿਰਫ ਸਿਰਾ ਹੈ।
ਇਸ ਪੋਸਟ ਵਿੱਚ, ਅਸੀਂ ਚੱਕਰ UI ਦੀਆਂ ਕੁਝ ਹੋਰ ਉੱਨਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ 'ਤੇ ਇੱਕ ਡੂੰਘਾਈ ਨਾਲ ਨਜ਼ਰ ਮਾਰਾਂਗੇ ਅਤੇ ਇੱਕ ਪ੍ਰੋਗਰਾਮਰ ਵਜੋਂ ਉਹ ਤੁਹਾਨੂੰ ਵਧੇਰੇ ਲਾਭਕਾਰੀ ਬਣਨ ਵਿੱਚ ਕਿਵੇਂ ਮਦਦ ਕਰ ਸਕਦੀਆਂ ਹਨ।
ਚੱਕਰ UI ਕੀ ਹੈ?
ਚੱਕਰ UI ਇੱਕ ਕੰਪੋਨੈਂਟ ਟੂਲਕਿੱਟ ਹੈ ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਉਹਨਾਂ ਦੀਆਂ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਤੇਜ਼ੀ ਨਾਲ ਪਹੁੰਚਯੋਗ ਅਤੇ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ। ਇਹ React ਦੇ ਸਿਖਰ 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਇਸਦੇ ਥੀਮਿੰਗ ਇੰਜਣ ਲਈ ਸਟਾਈਲ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਚੱਕਰ 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 ਤਿਆਰ ਕਰਨਾ
ਤੁਸੀਂ ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਲਈ ਨਵੇਂ ਥੀਮਾਂ ਦੀ ਸਥਾਪਨਾ ਕਰਦੇ ਸਮੇਂ ਮੌਜੂਦਾ ਡਿਜ਼ਾਈਨ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਆਪਣੇ SVGs ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਅੱਪਡੇਟ ਕਰਨਾ ਚਾਹ ਸਕਦੇ ਹੋ। ਇਹ ਕਈ ਥੀਮ ਵਿੱਚੋਂ ਹਰੇਕ ਲਈ ਵੱਖਰੇ SVG ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ।
ਚੱਕਰ UI, ਦੂਜੇ ਪਾਸੇ, ਇੱਕ ਵਧੇਰੇ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਵਿਕਲਪ ਹੈ. ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ useColorMode
ਚੱਕਰ UI ਵਿੱਚ ਹੁੱਕ, ਅਸੀਂ ਆਪਣੇ SVGs ਦੇ ਭਰਨ ਦੇ ਰੰਗ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹਾਂ।
UseColorMode ਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਵਾਰ ਡਾਰਕ ਮੋਡ ਲਾਗੂ ਕਰਨ ਤੋਂ ਬਾਅਦ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਪਹਿਲੀ ਵਾਰ ਚੱਕਰ UI ਨਾਲ ਡਾਰਕ ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ? ਇਹ ਲੇਖ ਤੁਹਾਨੂੰ ਦਿਖਾਏਗਾ ਕਿ ਇਸ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਨਾ ਹੈ.
The 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
ਅਤੇ ਪ੍ਰੋਪ ਦੀ ਵਰਤੋਂ ਪਰਿਵਰਤਨ ਦੇ ਸ਼ੁਰੂਆਤੀ ਸਕੇਲ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਵਾਪਰਨ ਲਈ ਜਦੋਂ ਕੰਪੋਨੈਂਟ ਰੈਂਡਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਇਸ ਟੁਕੜੇ ਵਿੱਚ, ਅਸੀਂ ਉਨ੍ਹਾਂ ਕੁਝ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਦੇਖਿਆ ਜੋ ਚੱਕਰ UI ਪੇਸ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਇਹ ਸਾਡੇ ਸੰਪੂਰਨ ਅਨੁਭਵ ਵਿੱਚ ਸਾਡੀ ਕਿਵੇਂ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ। ਅਸੀਂ ਇਹ ਵੀ ਖੋਜ ਕੀਤੀ ਹੈ ਕਿ ਕਿਵੇਂ ਥੀਮ ਵਸਤੂਆਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨਾ ਅਤੇ ਗਲੋਬਲ ਸਟਾਈਲ ਵਿਕਸਿਤ ਕਰਨਾ ਸਾਡੇ ਸਿਸਟਮ ਦੀ ਮਾਪਯੋਗਤਾ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ।
ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਹੀ ਨਹੀਂ ਹੈ, ਤਾਂ ਸਾਡਾ ਮੰਨਣਾ ਹੈ ਕਿ ਇਸ ਲੇਖ ਨੇ ਤੁਹਾਨੂੰ ਤੁਹਾਡੀ ਚੱਕਰ UI ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸੁਚਾਰੂ ਬਣਾਉਣ ਲਈ ਕੁਝ ਵਿਚਾਰ ਦਿੱਤੇ ਹਨ।
ਕੋਈ ਜਵਾਬ ਛੱਡਣਾ