Tərtibatçılar Chakra UI-ni ən faydalı tərəfdaş olaraq tapacaqlar. Onlayn xidmətlər üçün komponent alət dəsti kimi Chakra UI səmərəliliyi ilə inklüziv proqramlar qurmağı asanlaşdırır.
Əlçatanlığı və WAI-ARIA uyğunluğu nəticəsində Chakra UI elementlərini API istifadə edərək fərdiləşdirmək və mövzunu yenidən qurmaq asandır. Bununla belə, bu, tərtibatçılara təklif etdiyi üstünlüklərlə bağlı aysberqin yalnız görünən hissəsidir.
Bu yazıda biz Chakra UI-nin bəzi daha təkmil xüsusiyyətlərinə və onların bir proqramçı kimi daha məhsuldar olmağınıza necə kömək edə biləcəyinə daha yaxından nəzər salacağıq.
Chakra UI nədir?
Chakra UI, tərtibatçılara veb tətbiqləri üçün əlçatan və təkrar istifadə edilə bilən istifadəçi interfeysi komponentlərini tez bir zamanda qurmağa kömək edən komponent alət dəstidir. O, React-in üzərində qurulub və tematik mühərriki üçün üslublu sistemdən istifadə edir.
Chakra UI-nin məqsədi proqramçılara minimal səylə gözəl, həssas və əlçatan istifadəçi interfeysləri yaratmağı asanlaşdırmaqdır. Alət dəstinə asanlıqla tərtib edilə bilən və genişləndirilə bilən geniş çeşiddə istifadəyə hazır komponentlər daxildir.
Chakra UI açıq mənbədir və onun inkişafı Seqment tərəfindən maliyyələşdirilir.
Chakra UI-ni necə quraşdırmaq olar
Çakranı Layihənizə daxil etmək üçün aşağıdakı əmrləri yazmalı olacaqsınız:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Chakra UI quraşdırdıqdan sonra tətbiqinizin kökündə ChakraProvider-i konfiqurasiya etməlisiniz. İstifadə etdiyiniz çərçivədən asılı olaraq, bu, index.jsx, index.tsx və ya app.jsx faylınızda ola bilər.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Çakra UI-də Qabaqcıl Texnikalar
Real vaxt rejimində SVG-lərin yaradılması
Veb saytınız üçün yeni mövzular qurarkən cari dizaynı əks etdirmək üçün SVG-lərinizi dinamik şəkildə yeniləmək istəyə bilərsiniz. Bu, bir neçə mövzunun hər biri üçün fərqli SVG-lərin yaradılmasını tələb edir.
Chakra UI, əksinə, daha çox istifadəçi dostu bir seçimdir. istifadə edərək useColorMode
Chakra UI-də çəngəl ilə SVG-lərimizin doldurma rəngini dinamik olaraq dəyişə bilərik.
UseColorMode yalnız qaranlıq rejim tətbiq edildikdən sonra istifadə edilə bilər. Chakra UI ilə ilk dəfə qaranlıq rejimdən istifadə edirsiniz? Bu məqalə onu düzgün işləməyi necə göstərəcək.
The useColorMode
seçim qaranlıq rejim aktivləşdirildikdən sonra mövcuddur.
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>
);
}
Yuxarıdakı kod birləşdirir useColorMode
onları dinamik etmək üçün çəngəl və SVG. İstifadə useColorMode
biz rəng rejimini əldə edə və dəyişə bilərik. Rəngləri dəyişmək istəyirsinizsə, hər ikisindən istifadə etməlisiniz colorMode
və ya toggleColor
Rejim funksiyası.
Çakra Mövzuları
Chakra UI-nin mövzuları istifadə edərək tətbiq olunur Üslublu Sistem Mövzusu Spesifikasiyası texnika. Çakradakı mövzular rəng palitrasından tutmuş boşluğa qədər müxtəlif aspektlərə təsir göstərə bilər.
Siz sadəcə idxal etməlisiniz extendTheme
Əvvəlcədən təyin edilmiş tokenləri dəyişdirmək üçün düymələri əlavə edərkən funksiya. Gəlin buna bir nəzər salaq.
Sadəcə yaratmaq lazımdır Theme.js
Başlamaq üçün fayl.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
O, mövzu obyektini daha canlı və cəlbedici etmək üçün ona daha iki rəng əlavə edir. Proqram təminatının spesifikasiyasına uyğun olaraq, yazı tipləri, kəsilmə nöqtələri, şrift ölçüləri, sütun enləri və s. üçün üslub markerləri yarada bilərsiniz.
Bu tema obyektində yeni təqdim edilmiş qabaqcıl funksiyalardan yararlanmaq üçün əvvəlcə quraşdırmalısınız ChakraProvider
tətbiqin kökündə.
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;
Bundan sonra siz istiqamətləndirirsiniz ChakraProvider
əvvəl yaratdığınız mövzu obyektindən istifadə etmək üçün. Çakra komponentlərinin hamısı indi brend rənglərdən istifadə edə bilər.
Bəzi layihələr hər hansı bir şəkildə üslubun dəyişdirilməsini tələb etməkdənsə, sadəcə Çakranın əsas komponent üslubunu dəyişdirməyə ehtiyac duya bilər.
Komponent stil obyektinə misal olaraq, burada:
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: "",
},
}
İndi biz sadəcə olaraq dəyişdirəcəyik Button
və Heading
hissələr.
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;
Defolt olaraq təyin edilmiş sərhəd radiusundan xilas ola bilərik Button
aradan qaldırmaqla baseStyle
. Şrift ölçüsünü və şrift tərtibatını dəyişə bilərsiniz Heading
. Yuxarıdakı nümunələrdən istifadə edərək, Çakra komponentlərinin standart üslubunu necə dəyişdirə biləcəyimizi başa düşə bilərsiniz.
Çakra komponentlərinin üslublarının təkmilləşdirilməsi və ya dəyişdirilməsi bizə istifadəçi interfeyslərimizin görünüşü və işləməsi üzərində görmə və nəzarət təmin edir.
Çakra və Üçüncü Tərəf Komponentləri
Çakra üçüncü tərəf modullarına öz üslublarından faydalanmağa imkan verir. Nəticədə, üçüncü tərəf elementlərini Chakra UI ilə birləşdirmək daha az xüsusi komponent sarğı tələb edir.
Aşağıda Çakra fabriki tərəfindən dəstəklənən HTML elementlərinin siyahısı verilmişdir:
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-i inteqrasiya edirik Image
yuxarıdakı kod parçasında Chakra UI ilə komponent. Sonra, biz qurduq ChakraNextImage
komponenti və onun vasitəsilə biz Çakranın stil rekvizitlərini ötürə bilərik Image
.
Animasiyalar
Chakra UI-dən istifadə edərək animasiyalar təyin edə bilərsiniz keyframes
köməkçi. Keyframes
CSS açar çərçivə tərifini götürün və üslublarda istifadə edə biləcəyiniz obyekti qaytarın:
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>
);
}
Istifadə keyframes
köməkçi, burada gördüyünüz animasiyanı yarada bilərsiniz. Animasiya rekviziti bizə Chakra UI komponentlərini canlandırmaq imkanı verir.
Son addım olaraq keçin spinAnimation
animasiyalar Chakra UI proqramlarına əlavə oluna bilməsi üçün Box komponentinə daxil edin.
Səhifə keçidləri
İstifadəçilər səhifələr arasında hərəkət edərkən onların təcrübəsini yaxşılaşdırmaq üçün tətbiqlərimizə səhifə keçidləri əlavə edilə bilər.
Aşağıda Chakra UI ilə buna necə nail olmağın nümunəsidir:
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;
Səhifə keçidlərini həyata keçirmək üçün Chakra UI-dən keçid komponentlərindən istifadə edin. ScaleFade keçidi yuxarıdakı kod sətirində istifadə olunur.
Zəhmət olmasa bildirin ScaleFade
Tətbiqinizin yolu haqqında məlumat verin ki, siz ekranda hərəkət edərkən keçid fəaliyyət göstərə bilsin! Obyekt daha sonra göndərə biləcəyiniz cari yol haqqında məlumat verir ScaleFade
əsas dayağı. InitialScale
və in prop keçidin başlanğıc miqyasını təyin etmək və komponent göstərildikdə onun baş verməsi üçün istifadə olunur.
Bu yazıda biz Chakra UI-nin təklif etdiyi bəzi xüsusiyyətlərə və imkanlara və mükəmməl təcrübəmizdə bizə necə kömək etdiyinə baxdıq. Biz həmçinin mövzu obyektlərinin yaradılmasının və qlobal üslubların inkişaf etdirilməsinin sistemimizin miqyasını qorumağa necə kömək edə biləcəyini araşdırdıq.
Əgər hələ də etməmisinizsə, inanırıq ki, bu məqalə sizə Chakra UI inkişaf prosesini asanlaşdırmaq üçün bəzi fikirlər verib.
Cavab yaz