5 نکته و ترفند برتر برای رابط Recter Developer

UI Chakra یک کتابخانه محبوب برای مؤلفه های ایجاد برنامه های پاسخ شخصی است. این یک پایه محکم از مؤلفه های رابط کاربری قابل استفاده مجدد را فراهم می کند که به شما امکان می دهد به سرعت رابط های جلا و حرفه ای را به سرعت بسازید. در اینجا ، در Ayrshare ، ما اخیراً هیئت مدیره رسانه های اجتماعی خود را در رابط کاربری Chakra بازنویسی کردیم – قبل از استفاده از Bootstrap Shoot. مهم نیست که چند تحقیق یا POCS انجام دهید ، تا زمانی که کار واقعی را شروع نکنید ، هرگز نمی دانید. خوشبختانه ، ما دریافتیم که چاکرا UI به شهرت خود رسیده است: عرض اجزای ، سرعت و انعطاف پذیری فوق العاده است.

حال بیایید به آنچه در هنگام بازسازی داشبورد خود پیدا کردیم ، شیرجه بزنیم: پنج نکته برتر و ترفندهای چاکرا برای توسعه دهندگان React.

1. شخصی سازی موضوع به راحتی انجام می شود

یکی از بزرگترین نقاط قوت چاکرا ، توانایی وی در سفارشی کردن موضوع است. فقط با چند ردیف کد ، می توانید رنگ ها ، تایپوگرافی ها ، سبک های مؤلفه و سایر جنبه های بصری کل برنامه خود را تطبیق دهید.

برای سفارشی کردن موضوع خود ، شروع به ایجاد یک موضوع شخصی در این زمینه کنید. شما می توانید با استفاده از ویژگی ExtendTheMe ، موضوع رابط کاربری را به طور پیش فرض گسترش دهید ، یا موضوع خود را از ابتدا بسازید. در اینجا نمونه ای از گسترش موضوع به طور پیش فرض با برخی از رنگ های شخصی ، فونت ها و شیفت های اجزای سازنده آورده شده است:

import { extendTheme } from "@chakra-ui/react";
import "@fontsource-variable/inter";
const customTheme = extendTheme({
colors: {
brand: {
100: "#f0e8e2",
// ...
900: "#3f2c1d",
},
},
fonts: {
heading: "'Inter Variable', sans-serif",
body: "'Inter Variable', sans-serif",
},
components: {
Button: {
baseStyle: {
fontWeight: "semibold",
borderRadius: "lg",
},
sizes: {
xl: {
h: "56px",
fontSize: "lg",
px: "32px",
},
},
variants: {
outline: {
border: "2px solid",
borderColor: "brand.500",
color: "brand.500",
},
},
},
},
});

بیایید آنچه را که در اینجا اتفاق می افتد تقسیم کنیم:

– من وارد می کنم extendTheme ویژگی از ui Chakra و Font inter از @fontsource-variable/interحرف

“ما ایجاد می کنیم customTheme هدف با استفاده از extendThemeکه به ما امکان می دهد رابط کاربری Chakra را به طور پیش فرض گسترش دهیم.

– ما رنگهای شخصی را در زیر تعریف می کنیم colors کلید ، در این مورد الف brand پالت رنگی با سایه های 100 تا 900.

“ما تنظیم کرده ایم fonts برای عناوین و متن بدنی برای استفاده از فونت inter.

“ما شخصی سازی می کنیم Button مؤلفه با تعیین سبک ها ، اندازه ها و انواع اساسی. سبک اصلی وزن قلم و شعاع مرز را برای همه دکمه ها تعیین می کند ، شی با اندازه ها سفارشی را تعیین می کند xl اندازه و گزینه های شیء جدید ایجاد می کنند outline گزینه

برای استفاده از موضوع شخصی خود در برنامه خود ، مؤلفه اصلی خود را با آن بپیچید ChakraProvider و به موضوع خود بروید:

import { ChakraProvider } from "@chakra-ui/react";

function App() {
  return (
    
      {/* Your application code */}
    
  );
}

2. سبک های پاسخگو ساده ساخته شده اند

Chakra UI باعث ایجاد طرح های پاسخگو می شود که با اندازه های مختلف صفحه سازگار است. این نحو آرایه مناسب را فراهم می کند که به شما امکان می دهد سبک های نقاط مختلف وقفه را تعیین کنید.

const breakpoints = {
  sm: "30em",
  md: "48em",
  lg: "62em",
  xl: "80em",
  "2xl": "96em",
};

برای استفاده از سبک های پاسخگو ، به سادگی مجموعه ای از مقادیر را به یک پشتیبانی شیک منتقل کنید که در آن هر مقدار با نقطه وقفه مطابقت دارد:

Here’s how this works:

– The Stack component will display its children in a column on small screens (the base breakpoint), and in a row on screens wider than the sm breakpoint (30em).

– The width of the first child Box will be 100% on small screens, 50% on medium screens (30em to 48em), and 25% on screens wider than 48em.

– The width of the second child Box will be 100% on small screens, 50% on medium screens, and 75% on screens wider than 48em.

You can also use the object syntax for more explicit control:

This Grid component uses the object syntax to define its templateColumns responsively:

– On the base breakpoint, it will display its children in a single column.

– On the sm breakpoint, it will display its children in 2 columns.

– On the md breakpoint, it will display its children in 3 columns.

– On the lg breakpoint and above, it will display its children in 4 columns.

3. Useful Default Style Props

Chakra UI provides a set of default style props that act as shorthand for commonly used CSS properties. These props can save you a significant amount of time and keep your code concise and readable. Here are some examples:

  Hover over me!

Let’s dissect the style props used in this `Box` component:

– m={4} sets the margin on all sides to 1rem (Chakra UI uses a 4px base).

– p={3} sets the padding on all sides to 0.75rem.

– bg="blue.500" sets the background color to the `blue.500` color from the theme.

– color="white" sets the text color to white.

– fontSize="xl" sets the font size to 1.25rem.

– fontWeight="bold" sets the font weight to bold.

– borderRadius="md" sets the border radius to 0.375rem.

– boxShadow="base` applies a base box shadow.

– _hover is a pseudo style prop that applies styles on hover. In this case, it changes the background color to blue.600, text color to white, and applies a large box shadow.

4. Conditional Rendering Based on Screen Size

Chakra UI provides a handy useMediaQuery hook that allows you to conditionally render components based on the current screen size. This is particularly useful for creating responsive layouts that adapt to different devices. Here’s an example:

import { useMediaQuery } from "@chakra-ui/react";

function NavBar() {
  const [isLargerThan768] = استفاده شده ("(مین عرض: 768px)") ؛ بازگشت (
    
      
        
          
            
            
            
            آرم من
          
          {islargerthan768؟ (ها)
            
              شروع
              دور
              تماس
            
          ): (
            } aria-label = "باز منوی" onClick = {onopen} />)}
        
      
    
  
  
  
  ) ؛ }

در این مثال:

“ما استفاده می کنیم useMediaQuery قلاب برای بررسی اینکه عرض صفحه نمایش بزرگتر از 768px است. نتیجه ذخیره می شود isLargerThan768 متغیر

– در JSX ما به طور مشروط یا تعدادی از اتصالات ناوبری (HStack) یا نماد منوی همبرگر (IconButton) بر اساس ارزش isLargerThan768حرف

“اگر isLargerThan768 درست است (عرض صفحه نمایش بیشتر از 768px است) ، ما انجام می دهیم HStack با اتصالات ناوبری

“اگر isLargerThan768 نادرست است (عرض صفحه نمایش کوچکتر از 768px است) ، ما انجام می دهیم IconButton با نماد منوی همبرگر.

– onClick پشتیبانی از `IconButton می توان از آن برای فعال کردن کشو یا منوی در صفحه های کوچک استفاده کرد.

5. یک جزء کشو در دسترس و سفارشی

مؤلفه کشو چاکرا UI ابزاری برای ایجاد نوارهای جانبی ، دیالوگ های معین و سایر عناصر روکش است. یکی از ویژگی های مفید ، امکان ایجاد یک کشو پاسخگو برای تطبیق رفتار خود بر اساس اندازه صفحه نمایش است.

به عنوان مثال ، شما ممکن است یک نوار کناری بخواهید که همیشه برای صفحه های بزرگتر باز باشد ، اما با استفاده از نماد منوی همبرگر می توانید به صفحه های کوچکتر تغییر دهید. در اینجا چگونه می توانید با UI چاکرا به این هدف برسید:

ابتدا با اضافه کردن گزینه ای به نام ، مؤلفه کشو را سفارشی می کنیم permanentS این گزینه اطمینان حاصل می کند که نوار کناری همیشه باز خواهد بود:

import { useMediaQuery } from "@chakra-ui/react";
function Sidebar({ isOpen, onClose }) {
const [isLargerThan1024] = useMediaQuery("(min-width: 1024px)");
return (
      isOpen={isOpen}
placement="left"
onClose={onClose}
variant={isLargerThan1024 ? "permanent" : ""}
>



Sidebar
{/* Sidebar content */}



);
}

سپس می توانید از این گزینه جدید در مؤلفه کشو خود استفاده کنید:

import { useMediaQuery } from "@chakra-ui/react";
function Sidebar({ isOpen, onClose }) {
const [isLargerThan1024] = useMediaQuery("(min-width: 1024px)");
return (
      isOpen={isOpen}
placement="left"
onClose={onClose}
variant={isLargerThan1024 ? "permanent" : ""}
>



Sidebar
{/* Sidebar content */}



);
}

بیایید این را بشکنیم:

“ما استفاده می کنیم useMediaQuery قلاب برای بررسی اینکه عرض صفحه نمایش بزرگتر از 1024px است و نتیجه آن را ذخیره می کند isLargerThan1024 متغیر

– Drawer مؤلفه می شود isOpen وت onClose لازم برای کنترل دید آن و فراهم کردن راهی برای بستن آن.

– به طور مشروط نوع شهرت را تعیین کنید Drawer بر اساس اندازه صفحه:

“اگر isLargerThan1024 درست است (عرض صفحه نمایش بیشتر از 1024px است) ، ما تنظیم کرده ایم variant بله "permanent"این بدان معنی است که کشو همیشه قابل مشاهده خواهد بود.

“اگر isLargerThan1024 نادرست است (عرض صفحه از 1024px کوچکتر است) ، ما تنظیم کرده ایم variant بله ""این بدان معنی است که کشو یک روکش موقت خواهد بود که می تواند باز و بسته باشد ، رفتار پیش فرض. DrawerOverlay. ، DrawerContent. ، DrawerCloseButton. ، DrawerHeaderوت DrawerBody از مؤلفه ها برای ساختار کشو و ارائه ویژگی های دسترسی مانند دکمه بسته شدن و نقش های صحیح آریا استفاده می شود.

به کاوش ادامه دهید

UI Chakra یک کتابخانه انعطاف پذیر است که می تواند هنگام ایجاد واکنش برنامه ها ، عملکرد شما را افزایش دهد. با استفاده از سفارشی سازی موضوعی ، سبک های پاسخگو ، غرفه های سبک پیش فرض ، تصویر مشروط و اجزای مقرون به صرفه ، می توانید با کمترین تلاش رابط های خوب و خوبی ایجاد کنید.

به یاد داشته باشید که نکته اصلی تسلط بر هر ابزار ، کشف قابلیت های آن ، آزمایش با رویکردهای مختلف و یافتن آنچه برای استفاده خاص شما بهتر است. نمونه ها و توضیحات در این مقاله باید یک پایه محکم برای به روزرسانی به شما ارائه دهد.

برای iirshare

Ayrshare یک API برای رسانه های اجتماعی است که به شما امکان می دهد انتشارات را ارسال کنید ، تجزیه و تحلیل دریافت کنید ، نظرات را مدیریت کنید و پیام های مستقیم را به طور مستقیم به شبکه های اجتماعی از سیستم عامل خود ارسال کنید. در اسناد API ما در رسانه های اجتماعی بیشتر بدانید.