מפתחים ימצאו ש-Chakra UI הוא השותף הכי שימושי שלהם. בתור ערכת כלים רכיב לשירותים מקוונים, ממשק המשתמש של Chakra מקל על בניית אפליקציות כוללניות ביעילות.
כתוצאה מהנגישות שלו ותאימות ל-WAI-ARIA, האלמנטים של ממשק המשתמש של Chakra הם פשוטים להתאמה אישית ולעיצוב מחדש באמצעות ה-API שלו. עם זאת, זהו רק קצה הקרחון לגבי היתרונות שהוא מציע למפתחים.
בפוסט זה, נסקור מקרוב כמה מהתכונות המתקדמות יותר של ממשק המשתמש של צ'אקרה וכיצד הם עשויים לעזור לך להיות פרודוקטיבי יותר כמתכנת.
מהו ממשק המשתמש של צ'אקרה?
Chakra UI הוא ערכת כלים של רכיבים המסייעת למפתחים לבנות במהירות רכיבי ממשק משתמש נגישים וניתנים לשימוש חוזר עבור יישומי האינטרנט שלהם. הוא בנוי על גבי React ומשתמש במערכת המעוצבת עבור מנוע הנושא שלו.
המטרה של ממשק המשתמש של Chakra היא להקל על מתכנתים ליצור ממשקי משתמש יפים, מגיבים ונגישים במינימום מאמץ. ערכת הכלים כוללת מגוון רחב של רכיבים מוכנים לשימוש אשר נועדו להיות ניתנים להרכבה ולהרחבה בקלות.
ממשק המשתמש של Chakra הוא קוד פתוח, והפיתוח שלו ממומן על ידי Segment.
כיצד להתקין את ממשק המשתמש של צ'אקרה
תצטרך להקליד את הפקודות הבאות כדי לשלב צ'אקרה בפרויקט שלך:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
עליך להגדיר את ChakraProvider בשורש האפליקציה שלך לאחר התקנת ממשק המשתמש של Chakra. בהתאם למסגרת שבה אתה משתמש, זה עשוי להיות בקובץ index.jsx, index.tsx או app.jsx שלך.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
טכניקות מתקדמות בממשק המשתמש של צ'אקרה
יצירת SVG בזמן אמת
ייתכן שתרצה לעדכן באופן דינמי את ה-SVG שלך כדי לשקף את העיצוב הנוכחי תוך יצירת ערכות נושא חדשות לאתר שלך. זה מחייב יצירת SVGs נפרדים עבור כל אחד ממספר הנושאים.
מצ'אקרה UI, לעומת זאת, היא אפשרות ידידותית יותר למשתמש. משתמש ב useColorMode
חיבור לממשק צ'אקרה, נוכל לשנות באופן דינמי את צבע המילוי של ה-SVGs שלנו.
ניתן להשתמש ב-UseColorMode רק לאחר יישום מצב כהה. משתמש במצב כהה עם ממשק המשתמש של צ'אקרה בפעם הראשונה? מאמר זה יראה לך איך לגרום לזה לעבוד כמו שצריך.
השמיים 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
פונקציית מצב.
נושאי צ'אקרה
ערכות הנושא של ממשק המשתמש של צ'אקרה מיושמות באמצעות מפרט נושא מערכת מעוצב טֶכנִיקָה. ערכות נושא בצ'אקרה יכולות להשפיע על מגוון היבטים, החל מלוח צבעים ועד למרווח.
אתה רק צריך לייבא את 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
. בעזרת הדוגמאות לעיל, תוכל להבין כיצד אנו יכולים לשנות את הסגנון הסטנדרטי של רכיבי הצ'אקרה.
שיפור או שינוי הסגנונות של רכיבי הצ'אקרה מספקים לנו נראות ושליטה על המראה והתפקוד של ממשקי המשתמש שלנו.
צ'אקרה ורכיבי צד שלישי
הצ'אקרה מאפשרת למודולים של צד שלישי ליהנות מהסגנון שלהם. כתוצאה מכך, שילוב אלמנטים של צד שלישי עם ממשק המשתמש של צ'אקרה דורש פחות עטיפות רכיבים קנייניות.
להלן רשימה של רכיבי 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
רכיב עם ממשק המשתמש של צ'אקרה בקטע הקוד שלמעלה. לאחר מכן, הגדרנו א ChakraNextImage
רכיב, ודרכו, אנו יכולים להעביר את אביזרי הסגנון של הצ'אקרה Image
.
אנימציות
אתה יכול להגדיר אנימציות באמצעות ממשק המשתמש של צ'אקרה 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
עוזר, אתה יכול ליצור את האנימציה שאתה רואה כאן. אבזר האנימציה מאפשר לנו להנפיש את רכיבי ממשק המשתמש של צ'אקרה.
כשלב האחרון, עברו spinAnimation
לתוך רכיב Box כך שניתן להוסיף אנימציות ליישומי ממשק המשתמש של צ'אקרה.
מעברי עמוד
מעברי דפים עשויים להתווסף לאפליקציות שלנו על מנת לשפר את חוויית המשתמש כאשר הוא עובר בין דפים.
להלן דוגמה כיצד להשיג זאת עם ממשק המשתמש של צ'אקרה:
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;
על מנת ליישם מעברי דפים, השתמש ברכיבי המעבר מממשק המשתמש של צ'אקרה. המעבר ScaleFade משמש בשורת הקוד שלמעלה.
אנא הודיעו ScaleFade
על הנתיב של היישום שלך כך שהמעבר יוכל לתפקד בזמן שאתה עובר על המסך! האובייקט מספק נתונים על הנתיב הנוכחי, שאליו תוכל לשלוח ScaleFade
אביזר המפתח של InitialScale
וב-prop משמשים כדי לקבוע את קנה המידה ההתחלתי של המעבר וכדי לגרום לו לקרות כאשר הרכיב מוצג.
ביצירה זו, בדקנו כמה מהתכונות והיכולות ש-Chakra UI מציע וכיצד הוא מסייע לנו בחוויה המושלמת שלנו. כמו כן, חקרנו כיצד הקמת אובייקטי נושא ופיתוח סגנונות גלובליים עשויים לסייע בשמירה על מדרגיות המערכת שלנו.
אם עדיין לא עשית זאת, אנו מאמינים שמאמר זה נתן לך כמה רעיונות לייעל את תהליך הפיתוח של ממשק המשתמש של הצ'אקרה שלך.
השאירו תגובה