Ishlab chiquvchilar Chakra UI-ni o'zlarining eng foydali hamkori deb bilishadi. Onlayn xizmatlar uchun komponentlar to'plami sifatida Chakra UI samarali inklyuziv ilovalarni yaratishni osonlashtiradi.
Foydalanish imkoniyati va WAI-ARIA muvofiqligi natijasida Chakra UI elementlarini API yordamida sozlash va mavzuni qayta tiklash oson. Biroq, bu ishlab chiquvchilarga taqdim etadigan afzalliklarga oid aysbergning faqat uchi.
Ushbu postda biz Chakra UI ning ba'zi ilg'or xususiyatlarini va ular dasturchi sifatida yanada samaraliroq bo'lishingizga qanday yordam berishi mumkinligini batafsil ko'rib chiqamiz.
Chakra UI nima?
Chakra UI - bu ishlab chiquvchilarga veb-ilovalari uchun foydalanish mumkin bo'lgan va qayta foydalanish mumkin bo'lgan foydalanuvchi interfeysi komponentlarini tezda yaratishga yordam beradigan komponentlar to'plami. U React-ning ustiga qurilgan va o'zining tematik mexanizmi uchun uslubli tizimdan foydalanadi.
Chakra UI ning maqsadi dasturchilarga minimal harakat bilan chiroyli, sezgir va qulay foydalanuvchi interfeyslarini yaratishni osonlashtirishdir. Asboblar to'plami foydalanishga tayyor komponentlarning keng assortimentini o'z ichiga oladi, ular osongina tuziladigan va kengaytirilishi mumkin.
Chakra UI ochiq manba hisoblanadi va uning rivojlanishi Segment tomonidan homiylik qilinadi.
Chakra UI qanday o'rnatiladi
Loyihangizga Chakrani qo'shish uchun quyidagi buyruqlarni kiritishingiz kerak bo'ladi:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Chakra UI-ni o'rnatganingizdan so'ng, ilovangizning ildizida ChakraProviderni sozlashingiz kerak. Siz foydalanadigan ramkaga qarab, bu index.jsx, index.tsx yoki app.jsx faylingizda bo'lishi mumkin.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Chakra UI-da ilg'or texnikalar
Haqiqiy vaqtda SVG yaratish
Veb-saytingiz uchun yangi mavzularni yaratishda joriy dizaynni aks ettirish uchun SVG-larni dinamik ravishda yangilashni xohlashingiz mumkin. Bu bir nechta mavzularning har biri uchun alohida SVG yaratishni talab qiladi.
Boshqa tomondan, Chakra UI foydalanuvchi uchun qulayroq variant. dan foydalanish useColorMode
Chakra UI-da biz SVG-larimizni to'ldirish rangini dinamik ravishda o'zgartirishimiz mumkin.
UseColorMode-dan faqat qorong'u rejim o'rnatilgandan so'ng foydalanish mumkin. Chakra UI bilan qorong'u rejimdan birinchi marta foydalanyapsizmi? Ushbu maqola sizga uni qanday qilib to'g'ri ishlashini ko'rsatib beradi.
The useColorMode
opsiya qorong'u rejim yoqilgandan keyin mavjud bo'ladi.
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>
);
}
Yuqoridagi kod ni birlashtiradi useColorMode
ularni dinamik qilish uchun kanca va SVG. Foydalanish useColorMode
biz rang rejimini olishimiz va o'zgartirishimiz mumkin. Agar siz ranglarni almashtirmoqchi bo'lsangiz, ikkalasini ham ishlatishingiz kerak colorMode
yoki toggleColor
Rejim funksiyasi.
Chakra mavzulari
Chakra UI mavzulari yordamida qo'llaniladi Uslubli tizim mavzusi spetsifikatsiyasi texnikasi. Chakradagi mavzular ranglar palitrasidan tortib, intervalgacha bo'lgan turli jihatlarga ta'sir qilishi mumkin.
Siz shunchaki import qilishingiz kerak bo'ladi extendTheme
Oldindan o'rnatilgan tokenlarni o'zgartirish uchun tugmachalarni qo'shganda funksiya. Keling, buni ko'rib chiqaylik.
Siz shunchaki yaratishingiz kerak Theme.js
boshlash uchun fayl.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
U mavzu ob'ektini yanada jonli va jozibali qilish uchun unga yana ikkita rang qo'shadi. Dasturiy ta'minot spetsifikatsiyalariga ko'ra, siz shriftlar, to'xtash nuqtalari, shrift o'lchamlari, ustunlar kengligi va boshqalar uchun uslub belgilarini yaratishingiz mumkin.
Ushbu mavzu ob'ektida yangi kiritilgan qo'shimcha funktsiyalardan foydalanish uchun avvalo o'rnatishingiz kerak ChakraProvider
ilovaning ildizida.
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;
Shundan so'ng siz boshqarasiz ChakraProvider
avval yaratilgan mavzu ob'ektidan foydalanish uchun. Chakraning barcha komponentlari endi brend ranglarini ishlatishi mumkin.
Ba'zi loyihalar uslubni har qanday tarzda o'zgartirishni talab qilishdan ko'ra, Chakraning asosiy komponentining uslubini o'zgartirishni talab qilishi mumkin.
Komponent uslubi ob'ektiga misol sifatida bu erda:
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: "",
},
}
Endi biz shunchaki o'zgartiramiz Button
va Heading
qismlari.
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;
Biz uchun sukut bo'yicha o'rnatilgan chegara radiusidan xalos bo'lishimiz mumkin Button
uni olib tashlash orqali baseStyle
. Siz shrift o'lchamini va shrift tartibini o'zgartirishingiz mumkin Heading
. Yuqoridagi misollardan foydalanib, siz Chakra komponentlarining standart uslubini qanday o'zgartirishimiz mumkinligini tushunishingiz mumkin.
Chakra komponentlarining uslublarini yaxshilash yoki o'zgartirish bizga foydalanuvchi interfeyslarimiz ko'rinishi va ishlashini ko'rish va nazorat qilish imkonini beradi.
Chakra va uchinchi tomon komponentlari
Chakra uchinchi tomon modullariga o'z uslublaridan foydalanish imkonini beradi. Natijada, uchinchi tomon elementlarini Chakra UI bilan birlashtirish kamroq xususiy komponentlarni o'rashni talab qiladi.
Quyida Chakra zavodi tomonidan qo'llab-quvvatlanadigan HTML elementlarining ro'yxati keltirilgan:
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>
);
}
Biz Next.js ni birlashtiramiz Image
yuqoridagi kod parchasidagi Chakra UI bilan komponent. Keyin, biz o'rnatdik ChakraNextImage
komponent va u orqali biz Chakra uslubidagi rekvizitlarni o'tkazishimiz mumkin Image
.
animatsiyalar
Chakra UI yordamida animatsiyalarni belgilashingiz mumkin keyframes
yordamchi. Keyframes
CSS kalit freym ta'rifini oling va uslublarda foydalanishingiz mumkin bo'lgan ob'ektni qaytaring:
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>
);
}
foydalanish keyframes
yordamchi, siz bu yerda ko'rgan animatsiyani yaratishingiz mumkin. Animatsiya rekvizitlari bizga Chakra UI komponentlarini jonlantirish imkonini beradi.
Oxirgi qadam sifatida o'ting spinAnimation
Chakra UI ilovalariga animatsiyalar qo‘shilishi uchun Box komponentiga kiriting.
Sahifaga o'tish
Foydalanuvchilar sahifalar oʻrtasida harakat qilishda ularning tajribasini yaxshilash uchun ilovalarimizga sahifa oʻtishlari qoʻshilishi mumkin.
Quyida Chakra UI yordamida bunga qanday erishish mumkinligi misoli keltirilgan:
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;
Sahifaga o'tishni amalga oshirish uchun Chakra UI-dan o'tish komponentlaridan foydalaning. ScaleFade o'tishi yuqoridagi kod qatorida qo'llaniladi.
Iltimos, xabar bering ScaleFade
O'tish ekran bo'ylab harakatlanayotganda ishlashi uchun ilovangiz yo'li haqida! Ob'ekt joriy yo'l haqida ma'lumot beradi, keyin siz yuborishingiz mumkin ScaleFade
ning asosiy tayanchi. InitialScale
va in prop o'tishning boshlang'ich ko'lamini belgilash va komponent ko'rsatilganda uni amalga oshirish uchun ishlatiladi.
Ushbu maqolada biz Chakra UI taklif qiladigan ba'zi xususiyatlar va imkoniyatlarni va u bizga mukammal tajribamizda qanday yordam berishini ko'rib chiqdik. Shuningdek, biz mavzu ob'ektlarini o'rnatish va global uslublarni ishlab chiqish tizimimizning miqyosliligini saqlashga qanday yordam berishi mumkinligini o'rganib chiqdik.
Agar siz hali bunday qilmagan bo'lsangiz, ushbu maqola sizga Chakra UI-ni ishlab chiqish jarayonini soddalashtirish uchun ba'zi g'oyalarni berganiga ishonamiz.
Leave a Reply