سيجد المطورون أن Chakra UI هي الشريك الأكثر فائدة لهم. بصفتها مجموعة أدوات مكونة للخدمات عبر الإنترنت ، تسهل Chakra UI إنشاء تطبيقات شاملة بكفاءة.
نتيجة لإمكانية الوصول والتوافق مع WAI-ARIA ، فإن عناصر Chakra UI سهلة التخصيص وإعادة المظهر باستخدام واجهة برمجة التطبيقات الخاصة بها. ومع ذلك ، هذه ليست سوى غيض من فيض فيما يتعلق بالمزايا التي يقدمها للمطورين.
في هذا المنشور ، سنلقي نظرة فاحصة على بعض الميزات الأكثر تقدمًا لـ Chakra UI وكيف يمكن أن تساعدك على أن تصبح أكثر إنتاجية كمبرمج.
ما هو شقرا 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>
)
}
التقنيات المتقدمة في شقرا UI
إنشاء صور SVG في الوقت الفعلي
قد ترغب في تحديث SVGs ديناميكيًا لتعكس التصميم الحالي أثناء إنشاء سمات جديدة لموقعك على الويب. هذا يستلزم إنشاء 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 باستخدام ملف مواصفات موضوع النظام المصمم تقنية. يمكن أن تؤثر السمات في Chakra على مجموعة متنوعة من الجوانب تتراوح من تباين الألوان إلى التباعد.
ستحتاج فقط إلى استيراد ملف 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;
يمكننا التخلص من نصف قطر الحد الذي تم تعيينه افتراضيًا لـ 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 في مقتطف الشفرة أعلاه. ثم قمنا بإعداد ملف ChakraNextImage
المكون ، ومن خلاله يمكننا تمرير دعائم أسلوب Chakra إلى 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.
كخطوة أخيرة ، قم بالمرور spinAnimation
في مكون Box بحيث يمكن إضافة الرسوم المتحركة إلى تطبيقات 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.
اترك تعليق