توسعه دهندگان رابط کاربری Chakra را مفیدترین شریک خود می دانند. Chakra UI بهعنوان یک جعبه ابزار برای خدمات آنلاین، ساخت اپلیکیشنهای فراگیر را با کارایی آسان میکند.
در نتیجه دسترسی و انطباق با WAI-ARIA، عناصر Chakra UI به سادگی قابل سفارشی کردن و تمدهی مجدد با استفاده از API آن هستند. با این حال، این تنها نوک کوه یخ در مورد مزایایی است که به توسعه دهندگان ارائه می دهد.
در این پست، ما نگاهی دقیقتر به برخی از ویژگیهای پیشرفتهتر Chakra UI و اینکه چگونه میتواند به شما به عنوان یک برنامهنویس بهرهورتر شود، خواهیم انداخت.
رابط کاربری چاکرا چیست؟
Chakra UI یک جعبه ابزار مؤلفه است که به توسعه دهندگان کمک می کند تا به سرعت اجزای رابط کاربری قابل دسترس و قابل استفاده مجدد را برای برنامه های وب خود بسازند. این بر روی React ساخته شده است و از سیستم طراحی شده برای موتور قالب بندی خود استفاده می کند.
هدف Chakra UI این است که برنامه نویسان را برای ایجاد رابط کاربری زیبا، پاسخگو و در دسترس با کمترین تلاش آسان کند. این جعبه ابزار شامل طیف گسترده ای از اجزای آماده برای استفاده است که به گونه ای طراحی شده اند که به راحتی قابل ترکیب و توسعه باشند.
Chakra UI منبع باز است و توسعه آن توسط Segment حمایت می شود.
نحوه نصب رابط کاربری چاکرا
برای گنجاندن چاکرا در پروژه خود باید دستورات زیر را تایپ کنید:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
پس از نصب Chakra UI، باید ChakraProvider را در ریشه برنامه خود پیکربندی کنید. بسته به چارچوبی که استفاده می کنید، این ممکن است در فایل 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 های خود را به صورت پویا به روز کنید تا در حین ایجاد تم های جدید برای وب سایت خود، طرح فعلی را منعکس کند. این امر مستلزم ایجاد SVGهای متمایز برای هر یک از چندین موضوع است.
از طرف دیگر، رابط کاربری چاکرا گزینه کاربر پسندتری است. با استفاده از useColorMode
با قلاب کردن در رابط کاربری چاکرا، میتوانیم به صورت پویا رنگ پر کردن SVGهای خود را تغییر دهیم.
UseColorMode تنها زمانی قابل استفاده است که حالت تاریک اجرا شود. برای اولین بار از حالت تاریک با رابط کاربری چاکرا استفاده می کنید؟ این مقاله به شما نشان می دهد که چگونه آن را به درستی کار کنید.
La 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
عملکرد حالت.
تم های چاکرا
تم های چاکرا 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
برای استفاده از موضوعی که قبلا ایجاد کرده اید. همه اجزای چاکرا اکنون ممکن است از رنگ های برند استفاده کنند.
برخی از پروژهها ممکن است به جای نیاز به تغییر سبک به هر طریقی، نیاز به تغییر سبک اجزای اصلی چاکرا داشته باشند.
به عنوان مثالی از شیء سبک کامپوننت، در اینجا آمده است:
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
.
تصاوير متحرك
شما می توانید انیمیشن ها را با استفاده از Chakra UI تعریف کنید 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
دستیار، می توانید انیمیشنی را که در اینجا می بینید ایجاد کنید. پایه انیمیشن به ما اجازه می دهد تا اجزای رابط کاربری چاکرا را متحرک کنیم.
به عنوان آخرین مرحله، عبور کنید 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
و in prop برای تعیین مقیاس شروع انتقال و برای انجام آن هنگام رندر شدن مؤلفه استفاده می شود.
در این بخش، ما به چند مورد از ویژگیها و قابلیتهایی که Chakra UI ارائه میدهد و اینکه چگونه به ما در تجربه کاملمان کمک میکند، نگاه کردیم. ما همچنین بررسی کردهایم که چگونه ایجاد موضوعات تم و توسعه سبکهای جهانی ممکن است به حفظ مقیاسپذیری سیستم ما کمک کند.
اگر قبلاً این کار را نکردهاید، ما معتقدیم این مقاله ایدههایی برای سادهسازی فرآیند توسعه رابط کاربری چاکرا به شما ارائه کرده است.
پاسخ دهید