ገንቢዎች Chakra UI በጣም ጠቃሚ አጋራቸው ሆኖ ያገኙታል። ለመስመር ላይ አገልግሎቶች እንደ አካል መሣሪያ ኪት፣ Chakra UI በቅልጥፍና አካታች መተግበሪያዎችን ለመገንባት ቀላል ያደርገዋል።
በተደራሽነቱ እና በWAI-ARIA ተገዢነት የተነሳ የቻክራ UI አባሎች ኤፒአይውን ተጠቅመው ለማበጀት እና እንደገና ለማንሳት ቀላል ናቸው። ይሁን እንጂ ይህ ለገንቢዎች የሚሰጠውን ጥቅም በተመለከተ የበረዶው ጫፍ ብቻ ነው.
በዚህ ልጥፍ ውስጥ፣ አንዳንድ የላቁ የChakra UI ባህሪያትን እና እንደ ፕሮግራመር የበለጠ ውጤታማ ለመሆን እንዴት ሊረዱዎት እንደሚችሉ በጥልቀት እንመለከታለን።
Chakra UI ምንድን ነው?
Chakra UI ገንቢዎች ለድር መተግበሪያዎቻቸው ተደራሽ እና እንደገና ጥቅም ላይ ሊውሉ የሚችሉ የተጠቃሚ በይነገጽ ክፍሎችን በፍጥነት እንዲገነቡ የሚያግዝ የመለዋወጫ መሣሪያ ነው። እሱ በReact አናት ላይ ነው የተሰራው እና ለገጽታ ሞተሩ በቅጥ የተሰራውን ስርዓት ይጠቀማል።
የቻክራ ዩአይ አላማ ለፕሮግራመሮች በትንሹ ጥረት ቆንጆ፣ ምላሽ ሰጪ እና ተደራሽ የተጠቃሚ በይነገጾች እንዲፈጥሩ ማድረግ ነው። የመሳሪያ ኪቱ በቀላሉ ሊገጣጠሙ እና ሊጨመሩ የሚችሉ የተለያዩ ለአገልግሎት ዝግጁ የሆኑ ክፍሎችን ያካትታል።
Chakra UI ክፍት ምንጭ ነው፣ እና እድገቱ በክፍል የተደገፈ ነው።
Chakra 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 ከጫኑ በኋላ የቻክራ አቅራቢውን በመተግበሪያዎ ስር ማዋቀር አለብዎት። በምትጠቀመው ማዕቀፍ ላይ በመመስረት ይህ በእርስዎ index.jsx፣ index.tsx ወይም app.jsx ፋይል ውስጥ ሊሆን ይችላል።
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
በ Chakra UI ውስጥ የላቀ ቴክኒኮች
የእውነተኛ ጊዜ SVGs በማመንጨት ላይ
ለድር ጣቢያዎ አዳዲስ ገጽታዎችን በሚፈጥሩበት ጊዜ የአሁኑን ንድፍ ለማንፀባረቅ የእርስዎን SVGዎች በተለዋዋጭ ማዘመን ይፈልጉ ይሆናል። ይህ ለእያንዳንዱ የተለያዩ ጭብጦች የተለየ SVGs መፍጠርን ይጠይቃል።
በሌላ በኩል Chakra UI ለተጠቃሚ ምቹ የሆነ አማራጭ ነው። በመጠቀም useColorMode
በChakra UI ውስጥ መንጠቆ፣ የእኛን SVGs የመሙያ ቀለም በተለዋዋጭ መለወጥ እንችላለን።
UseColorMode መጠቀም የሚቻለው ጨለማ ሁነታ ከተተገበረ በኋላ ብቻ ነው። ለመጀመሪያ ጊዜ የጨለማ ሁነታን ከ Chakra 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
ሁነታ ተግባር.
የቻክራ ገጽታዎች
የ Chakra 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
. ከላይ የተጠቀሱትን ምሳሌዎች በመጠቀም የቻክራ ክፍሎችን መደበኛ ዘይቤ እንዴት መለወጥ እንደምንችል መረዳት ይችላሉ ።
የቻክራ አካላትን ቅጦች ማሻሻል ወይም መቀየር የተጠቃሚ በይነገጾቻችን ገጽታ እና አሠራር ላይ ታይነት እና ቁጥጥር ይሰጠናል።
ቻክራ እና የሶስተኛ ወገን አካላት
ቻክራ የሶስተኛ ወገን ሞጁሎች ከስልታቸው ተጠቃሚ እንዲሆኑ ያስችላቸዋል። በዚህ ምክንያት የሶስተኛ ወገን አካላትን ከ Chakra UI ጋር ማጣመር ያነሱ የባለቤትነት ክፍሎች መጠቅለያዎችን ይፈልጋል።
የሚከተለው በቻክራ ፋብሪካ የሚደገፉ የኤችቲኤምኤል አካላት ዝርዝር ነው።
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>
);
}
ቀጣይ.jsን እናዋህዳለን Image
ከላይ ባለው የኮድ ቅንጣቢ ውስጥ ከChakra UI ጋር አካል። ከዚያም, አንድ ChakraNextImage
አካል፣ እና በእሱ በኩል የቻክራን የቅጥ ፕሮፖዛል ወደ እኛ ማለፍ እንችላለን Image
.
እነማዎች
Chakra UI'sን በመጠቀም እነማዎችን መግለጽ ይችላሉ። 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
እነማዎች ወደ Chakra UI መተግበሪያዎች እንዲታከሉ በቦክስ አካል ውስጥ ይግቡ።
የገጽ ሽግግሮች
የተጠቃሚውን በገጾች መካከል ሲንቀሳቀሱ ያለውን ልምድ ለማሻሻል የገጽ ሽግግሮች ወደ መተግበሪያችን ሊታከሉ ይችላሉ።
የሚከተለው በ Chakra 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;
የገጽ ሽግግሮችን ለመተግበር የሽግግር ክፍሎችን ከ Chakra UI ይጠቀሙ። የ ScaleFade ሽግግር ከላይ ባለው የኮድ መስመር ውስጥ ጥቅም ላይ ይውላል.
እባክዎ ያሳውቁ ScaleFade
በማያ ገጹ ላይ በሚንቀሳቀሱበት ጊዜ ሽግግሩ እንዲሰራ ስለ የእርስዎ መተግበሪያ መንገድ! እቃው ስለአሁኑ ዱካ መረጃን ያቀርባል, ከዚያም ወደ እርስዎ መላክ ይችላሉ ScaleFade
ቁልፍ ፕሮፖዛል። InitialScale
እና በፕሮፕስ ውስጥ የሽግግሩን የመነሻ ልኬት ለመመስረት እና ክፍሉ በሚሰራበት ጊዜ እንዲከሰት ለማድረግ ያገለግላሉ.
በዚህ ቁራጭ ውስጥ፣ Chakra UI የሚያቀርባቸውን አንዳንድ ባህሪያት እና ችሎታዎች እና እንዴት ፍጹም በሆነ ልምዳችን ውስጥ እንደሚረዳን ተመልክተናል። እንዲሁም ጭብጥ ነገሮችን መመስረት እና አለምአቀፍ ቅጦችን ማዘጋጀት የስርዓታችንን መጠነ ሰፊነት ለመጠበቅ እንዴት እንደሚረዳ መርምረናል።
እስካሁን ካላደረጉት፣ የቻክራ UI ልማት ሂደትን ለማሳለጥ ይህ ጽሑፍ አንዳንድ ሃሳቦችን እንደሰጠዎት እናምናለን።
መልስ ይስጡ