นักพัฒนาจะพบว่า Chakra UI เป็นพันธมิตรที่มีประโยชน์มากที่สุด ในฐานะที่เป็นชุดเครื่องมือส่วนประกอบสำหรับบริการออนไลน์ Chakra UI ทำให้ง่ายต่อการสร้างแอปที่ครอบคลุมอย่างมีประสิทธิภาพ
อันเป็นผลมาจากความสามารถในการเข้าถึงและการปฏิบัติตาม WAI-ARIA องค์ประกอบของ Chakra UI นั้นง่ายต่อการปรับแต่งและกำหนดธีมใหม่โดยใช้ API อย่างไรก็ตาม นี่เป็นเพียงส่วนเล็กๆ ของภูเขาน้ำแข็งเกี่ยวกับข้อดีของนักพัฒนาซอฟต์แวร์
ในโพสต์นี้ เราจะมาดูฟีเจอร์ขั้นสูงของ Chakra UI อย่างละเอียดยิ่งขึ้น และวิธีที่ฟีเจอร์เหล่านี้อาจช่วยให้คุณมีประสิทธิผลมากขึ้นในฐานะโปรแกรมเมอร์
Chakra UI คืออะไร?
Chakra UI เป็นชุดเครื่องมือส่วนประกอบที่ช่วยให้นักพัฒนาสร้างส่วนประกอบส่วนต่อประสานผู้ใช้ที่เข้าถึงได้และนำกลับมาใช้ใหม่ได้อย่างรวดเร็วสำหรับเว็บแอปพลิเคชันของพวกเขา มันถูกสร้างขึ้นบน React และใช้ระบบที่มีสไตล์สำหรับเอ็นจิ้นธีมของมัน
เป้าหมายของ Chakra UI คือการทำให้โปรแกรมเมอร์สร้างอินเทอร์เฟซผู้ใช้ที่สวยงาม ตอบสนองและเข้าถึงได้ง่ายโดยใช้ความพยายามเพียงเล็กน้อย ชุดเครื่องมือนี้ประกอบด้วยส่วนประกอบที่พร้อมใช้งานที่หลากหลายซึ่งได้รับการออกแบบมาให้สามารถประกอบและขยายได้ง่าย
Chakra UI เป็นโอเพ่นซอร์สและการพัฒนาได้รับการสนับสนุนจากกลุ่ม
วิธีการติดตั้ง 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
การสร้าง SVG แบบเรียลไทม์
คุณอาจต้องการอัปเดต SVG ของคุณแบบไดนามิกเพื่อให้สอดคล้องกับการออกแบบปัจจุบันในขณะที่สร้างธีมใหม่สำหรับเว็บไซต์ของคุณ สิ่งนี้จำเป็นในการสร้าง SVG ที่แตกต่างกันสำหรับแต่ละธีม
ในทางกลับกัน Chakra UI เป็นตัวเลือกที่ใช้งานง่ายกว่า ใช้ useColorMode
ขอใน Chakra UI เราสามารถเปลี่ยนสีเติมของ SVG ของเราไดนามิก
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
ทำงานในขณะที่เพิ่มคีย์เพื่อแก้ไขโทเค็นในการตั้งค่าล่วงหน้า ลองมาดูที่นี้
คุณเพียงแค่ต้องสร้าง 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;
เราสามารถกำจัด border-radius ที่ถูกกำหนดโดยค่าเริ่มต้นสำหรับ the Button
โดยเอามัน baseStyle
. คุณสามารถเปลี่ยนขนาดแบบอักษรและรูปแบบแบบอักษรสำหรับ Heading
. จากตัวอย่างข้างต้น คุณจะเข้าใจว่าเราจะปรับเปลี่ยนรูปแบบมาตรฐานของส่วนประกอบ 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
ส่วนประกอบ และผ่านมัน เราสามารถส่งต่อพร็อพสไตล์จักระไปยัง 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
ผู้ช่วย คุณสามารถสร้างแอนิเมชั่นที่คุณเห็นที่นี่ พร็อพแอนิเมชั่นช่วยให้เราสร้างภาพเคลื่อนไหวส่วนประกอบ 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
พร็อพหลักของ InitialScale
และใน prop จะใช้เพื่อสร้างมาตราส่วนเริ่มต้นของการเปลี่ยนแปลงและเพื่อให้เกิดขึ้นเมื่อองค์ประกอบถูกแสดง
ในส่วนนี้ เราได้พิจารณาคุณลักษณะและความสามารถบางอย่างที่ Chakra UI นำเสนอ และวิธีที่มันช่วยเราในประสบการณ์ที่สมบูรณ์แบบของเรา เรายังได้สำรวจว่าการสร้างออบเจ็กต์ของธีมและการพัฒนาสไตล์ทั่วโลกอาจช่วยในการรักษาความสามารถในการปรับขนาดของระบบของเราได้อย่างไร
หากคุณยังไม่ได้ดำเนินการ เราเชื่อว่าบทความนี้ให้แนวคิดบางประการแก่คุณในการปรับปรุงกระบวนการพัฒนา Chakra UI ของคุณ
เขียนความเห็น