ຜູ້ພັດທະນາຈະຊອກຫາ Chakra UI ເປັນຄູ່ຮ່ວມງານທີ່ເປັນປະໂຫຍດທີ່ສຸດຂອງພວກເຂົາ. ໃນຖານະເປັນຊຸດເຄື່ອງມືອົງປະກອບສໍາລັບການບໍລິການອອນໄລນ໌, Chakra UI ເຮັດໃຫ້ມັນງ່າຍທີ່ຈະສ້າງກິດລວມທີ່ມີປະສິດທິພາບ.
ເປັນຜົນມາຈາກການເຂົ້າຫາໄດ້ ແລະປະຕິບັດຕາມ WAI-ARIA, ອົງປະກອບຂອງ Chakra UI ແມ່ນງ່າຍດາຍທີ່ຈະປັບແຕ່ງ ແລະສ້າງຫົວຂໍ້ຄືນໃໝ່ໂດຍໃຊ້ API ຂອງມັນ. ຢ່າງໃດກໍຕາມ, ນີ້ແມ່ນພຽງແຕ່ປາຍຂອງ iceberg ກ່ຽວກັບຂໍ້ດີທີ່ມັນສະເຫນີໃຫ້ນັກພັດທະນາ.
ໃນບົດຂຽນນີ້, ພວກເຮົາຈະພິຈາລະນາເບິ່ງລັກສະນະທີ່ກ້າວ ໜ້າ ບາງຢ່າງຂອງ Chakra UI ແລະວິທີທີ່ພວກມັນອາດຈະຊ່ວຍໃຫ້ທ່ານມີປະສິດຕິຜົນຫຼາຍຂຶ້ນໃນຖານະນັກຂຽນໂປລແກລມ.
Chakra UI ແມ່ນຫຍັງ?
Chakra UI ແມ່ນຊຸດເຄື່ອງມືອົງປະກອບທີ່ຊ່ວຍໃຫ້ນັກພັດທະນາສ້າງອົງປະກອບການໂຕ້ຕອບຜູ້ໃຊ້ທີ່ສາມາດເຂົ້າເຖິງໄດ້ໄວແລະນໍາໃຊ້ຄືນໃຫມ່ສໍາລັບຄໍາຮ້ອງສະຫມັກເວັບຂອງພວກເຂົາ. ມັນຖືກສ້າງຂຶ້ນຢູ່ເທິງສຸດຂອງ React ແລະໃຊ້ລະບົບຮູບແບບສໍາລັບເຄື່ອງຈັກໃນຫົວຂໍ້ຂອງມັນ.
ເປົ້າຫມາຍຂອງ Chakra UI ແມ່ນເພື່ອເຮັດໃຫ້ມັນງ່າຍສໍາລັບນັກຂຽນໂປລແກລມເພື່ອສ້າງການໂຕ້ຕອບຜູ້ໃຊ້ທີ່ສວຍງາມ, ຕອບສະຫນອງແລະສາມາດເຂົ້າເຖິງໄດ້ໂດຍຄວາມພະຍາຍາມຫນ້ອຍທີ່ສຸດ. ຊຸດເຄື່ອງມືປະກອບມີອົງປະກອບທີ່ພ້ອມທີ່ຈະໃຊ້ຫຼາຍຊະນິດທີ່ຖືກອອກແບບມາເພື່ອໃຫ້ສາມາດປະກອບໄດ້ງ່າຍແລະຂະຫຍາຍໄດ້.
Chakra UI ແມ່ນແຫຼ່ງເປີດ, ແລະການພັດທະນາຂອງມັນໄດ້ຮັບການສະຫນັບສະຫນູນໂດຍ Segment.
ວິທີການຕິດຕັ້ງ Chakra UI
ທ່ານຈະຕ້ອງພິມຄໍາສັ່ງຕໍ່ໄປນີ້ເພື່ອລວມເອົາ Chakra ໃນໂຄງການຂອງເຈົ້າ:
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
ຫົວຂໍ້ຂອງ Chakra UI ຖືກນໍາໃຊ້ໂດຍໃຊ້ ການລະບຸຮູບແບບສີສັນຂອງລະບົບ ເຕັກນິກ. ຫົວຂໍ້ໃນ Chakra ສາມາດສົ່ງຜົນກະທົບຕໍ່ຫຼາຍໆດ້ານຕັ້ງແຕ່ palette ສີໄປຫາໄລຍະຫ່າງ.
ທ່ານພຽງແຕ່ຕ້ອງການນໍາເຂົ້າ extendTheme
ຟັງຊັ່ນໃນຂະນະທີ່ເພີ່ມກະແຈເພື່ອດັດແປງ tokens ໃນ preset. ຂໍໃຫ້ເບິ່ງເລື່ອງນີ້.
ທ່ານພຽງແຕ່ຕ້ອງການສ້າງ 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
ເພື່ອໃຊ້ວັດຖຸຫົວຂໍ້ທີ່ທ່ານສ້າງມາກ່ອນ. ອົງປະກອບຂອງ Chakra ທັງໝົດອາດຈະໃຊ້ສີຍີ່ຫໍ້.
ບາງໂຄງການພຽງແຕ່ຕ້ອງການການປ່ຽນແປງອົງປະກອບພື້ນຖານຂອງ Chakra ແທນທີ່ຈະຮຽກຮ້ອງໃຫ້ມີການດັດແກ້ຮູບແບບໃນທາງໃດກໍ່ຕາມ.
ເປັນຕົວຢ່າງຂອງອົງປະກອບຮູບແບບວັດຖຸ, ນີ້ແມ່ນ:
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.
ການປັບປຸງຫຼືການປ່ຽນແປງຮູບແບບຂອງອົງປະກອບ Chakra ໃຫ້ພວກເຮົາເບິ່ງເຫັນແລະຄວບຄຸມຮູບລັກສະນະແລະການເຮັດວຽກຂອງການໂຕ້ຕອບຜູ້ໃຊ້ຂອງພວກເຮົາ.
Chakra ແລະອົງປະກອບຂອງພາກສ່ວນທີສາມ
Chakra ອະນຸຍາດໃຫ້ໂມດູນພາກສ່ວນທີສາມໄດ້ຮັບຜົນປະໂຫຍດຈາກແບບຂອງເຂົາເຈົ້າ. ດັ່ງນັ້ນ, ການສົມທົບອົງປະກອບພາກສ່ວນທີສາມກັບ Chakra UI ຮຽກຮ້ອງໃຫ້ມີການຫໍ່ອົງປະກອບທີ່ເປັນເຈົ້າຂອງຫນ້ອຍລົງ.
ຕໍ່ໄປນີ້ແມ່ນບັນຊີລາຍຊື່ຂອງອົງປະກອບ HTML ທີ່ສະຫນັບສະຫນູນໂດຍໂຮງງານ Chakra:
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 ໃນລະຫັດຂ້າງເທິງ. ຫຼັງຈາກນັ້ນ, ພວກເຮົາຕັ້ງ a ChakraNextImage
ອົງປະກອບ, ແລະໂດຍຜ່ານມັນ, ພວກເຮົາສາມາດຜ່ານ props ແບບ Chakra ຂອງ 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
ຜູ້ຊ່ວຍ, ທ່ານສາມາດສ້າງພາບເຄື່ອນໄຫວທີ່ທ່ານເຫັນຢູ່ທີ່ນີ້. Animation prop ອະນຸຍາດໃຫ້ພວກເຮົາເຄື່ອນໄຫວອົງປະກອບ 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 ຂອງທ່ານ.
ອອກຈາກ Reply ເປັນ