អ្នកអភិវឌ្ឍន៍នឹងស្វែងរក Chakra UI ជាដៃគូដែលមានប្រយោជន៍បំផុតរបស់ពួកគេ។ ជាកញ្ចប់ឧបករណ៍សម្រាប់សេវាកម្មអនឡាញ Chakra UI ធ្វើឱ្យវាងាយស្រួលក្នុងការបង្កើតកម្មវិធីរួមបញ្ចូលជាមួយនឹងប្រសិទ្ធភាព។
ជាលទ្ធផលនៃលទ្ធភាពប្រើប្រាស់របស់វា និងការអនុលោមតាម WAI-ARIA ធាតុរបស់ Chakra UI គឺសាមញ្ញក្នុងការប្ដូរតាមបំណង និងបង្កើតប្រធានបទឡើងវិញដោយប្រើ API របស់វា។ ទោះជាយ៉ាងណាក៏ដោយនេះគ្រាន់តែជាព័ត៌មានជំនួយនៃផ្ទាំងទឹកកកទាក់ទងនឹងគុណសម្បត្តិដែលវាផ្តល់ជូនអ្នកអភិវឌ្ឍន៍ប៉ុណ្ណោះ។
នៅក្នុងការបង្ហោះនេះ យើងនឹងពិនិត្យមើលឱ្យកាន់តែច្បាស់អំពីលក្ខណៈពិសេសកម្រិតខ្ពស់មួយចំនួននៃ Chakra UI និងរបៀបដែលពួកវាអាចជួយអ្នកឱ្យកាន់តែមានផលិតភាពក្នុងនាមជាអ្នកសរសេរកម្មវិធី។
តើ Chakra UI ជាអ្វី?
Chakra UI គឺជាកញ្ចប់ឧបករណ៍ដែលជួយអ្នកអភិវឌ្ឍន៍បង្កើតសមាសធាតុចំណុចប្រទាក់អ្នកប្រើដែលអាចចូលប្រើបាន និងអាចប្រើឡើងវិញបានយ៉ាងឆាប់រហ័សសម្រាប់កម្មវិធីគេហទំព័ររបស់ពួកគេ។ វាត្រូវបានបង្កើតឡើងនៅលើកំពូលនៃ React និងប្រើប្រាស់ប្រព័ន្ធរចនាប័ទ្មសម្រាប់ម៉ាស៊ីនកំដៅរបស់វា។
គោលដៅរបស់ Chakra UI គឺធ្វើឱ្យវាងាយស្រួលសម្រាប់អ្នកសរសេរកម្មវិធីដើម្បីបង្កើតចំណុចប្រទាក់អ្នកប្រើដ៏ស្រស់ស្អាត ឆ្លើយតប និងអាចចូលប្រើបានដោយមានការខិតខំប្រឹងប្រែងតិចតួចបំផុត។ កញ្ចប់ឧបករណ៍រួមបញ្ចូលនូវសមាសធាតុដែលត្រៀមរួចជាស្រេចសម្រាប់ប្រើប្រាស់ជាច្រើនប្រភេទ ដែលត្រូវបានរចនាឡើងដើម្បីងាយស្រួលផ្សំ និងអាចពង្រីកបាន។
Chakra UI គឺជាប្រភពបើកចំហ ហើយការអភិវឌ្ឍន៍របស់វាត្រូវបានឧបត្ថម្ភដោយ Segment ។
របៀបដំឡើង Chakra UI
អ្នកនឹងត្រូវវាយពាក្យបញ្ជាខាងក្រោម ដើម្បីបញ្ចូលចក្រាក្នុងគម្រោងរបស់អ្នក៖
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
អ្នកត្រូវតែកំណត់រចនាសម្ព័ន្ធ ChakraProvider នៅឫសនៃកម្មវិធីរបស់អ្នក បន្ទាប់ពីដំឡើង 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 ពេលវេលាពិត
អ្នកប្រហែលជាចង់ធ្វើបច្ចុប្បន្នភាព SVGs របស់អ្នកដោយថាមវន្ត ដើម្បីឆ្លុះបញ្ចាំងពីការរចនាបច្ចុប្បន្ន ខណៈពេលដែលកំពុងបង្កើតរូបរាងថ្មីសម្រាប់គេហទំព័ររបស់អ្នក។ នេះតម្រូវឱ្យមានការបង្កើត SVGs ដាច់ដោយឡែកសម្រាប់ប្រធានបទនីមួយៗ។
ម្យ៉ាងវិញទៀត Chakra UI គឺជាជម្រើសដែលងាយស្រួលប្រើជាង។ ការប្រើប្រាស់ useColorMode
hook នៅក្នុង 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
hook និង SVG ដើម្បីធ្វើឱ្យពួកវាថាមវន្ត។ ការប្រើប្រាស់ useColorMode
យើងអាចទាញយក និងកែប្រែរបៀបពណ៌។ ប្រសិនបើអ្នកចង់ប្តូរពណ៌ អ្នកគួរប្រើទាំងពីរ colorMode
ឬ toggleColor
មុខងាររបៀប។
ប្រធានបទចក្រា
រូបរាងរបស់ Chakra UI ត្រូវបានអនុវត្តដោយប្រើ ការកំណត់រចនាប័ទ្មរចនាប័ទ្មជាក់លាក់ បច្ចេកទេស។ រូបរាងនៅក្នុងចក្រាអាចមានឥទ្ធិពលលើទិដ្ឋភាពជាច្រើនចាប់ពីក្ដារលាយពណ៌រហូតដល់គម្លាត។
អ្នកគ្រាន់តែត្រូវការនាំចូល extendTheme
មុខងារខណៈពេលដែលបន្ថែមគ្រាប់ចុចដើម្បីកែប្រែថូខឹនក្នុងការកំណត់ជាមុន។ តោះមើលរឿងនេះ។
អ្នកគ្រាន់តែត្រូវការបង្កើត a 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 តម្រូវឱ្យមានការរុំសមាសធាតុដែលមានកម្មសិទ្ធិតិចជាងមុន។
ខាងក្រោមនេះគឺជាបញ្ជីនៃធាតុ 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
សមាសភាគជាមួយ Chakra UI នៅក្នុងអត្ថបទកូដខាងលើ។ បន្ទាប់មកយើងរៀបចំ ក ChakraNextImage
សមាសភាគ ហើយតាមរយៈវា យើងអាចឆ្លងកាត់រចនាប័ទ្មរបស់ចក្រាទៅ Image
.
ចលនា
អ្នកអាចកំណត់ចលនាដោយប្រើ Chakra UI's keyframes
ជំនួយការ Keyframes
យកនៅក្នុងការកំណត់ CSS keyframe ហើយត្រឡប់វត្ថុដែលអ្នកអាចប្រើក្នុងរចនាប័ទ្ម៖
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
ជំនួយការ អ្នកអាចបង្កើតចលនាដែលអ្នកឃើញនៅទីនេះ។ ផ្ទាំងគំនូរជីវចលអនុញ្ញាតឱ្យយើងធ្វើចលនាសមាសធាតុ Chakra UI ។
ជាជំហានចុងក្រោយ, ឆ្លងកាត់ 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
prop គន្លឹះ។ InitialScale
ហើយនៅក្នុង prop ត្រូវបានប្រើដើម្បីបង្កើតមាត្រដ្ឋានចាប់ផ្តើមនៃការផ្លាស់ប្តូរ និងដើម្បីធ្វើឱ្យវាកើតឡើងនៅពេលដែលសមាសភាគត្រូវបានបង្ហាញ។
នៅក្នុងបំណែកនេះ យើងបានពិនិត្យមើលលក្ខណៈពិសេស និងសមត្ថភាពមួយចំនួនដែល Chakra UI ផ្តល់ជូន និងរបៀបដែលវាជួយយើងក្នុងបទពិសោធន៍ដ៏ល្អឥតខ្ចោះរបស់យើង។ យើងក៏បានស្វែងយល់ពីរបៀបដែលការបង្កើតវត្ថុប្រធានបទ និងការអភិវឌ្ឍន៍រចនាប័ទ្មសកលអាចជួយក្នុងការរក្សាមាត្រដ្ឋាននៃប្រព័ន្ធរបស់យើង។
ប្រសិនបើអ្នកមិនទាន់មានទេ យើងជឿថាអត្ថបទនេះបានផ្តល់ឱ្យអ្នកនូវគំនិតមួយចំនួនដើម្បីសម្រួលដំណើរការអភិវឌ្ឍន៍ Chakra UI របស់អ្នក។
សូមផ្ដល់យោបល់