Таҳиягарон Chakra UI-ро шарики муфидтарини онҳо хоҳанд ёфт. Ҳамчун асбоби ҷузъӣ барои хидматҳои онлайн, Chakra UI сохтани барномаҳои фарогириро бо самаранокӣ осон мекунад.
Дар натиҷаи дастрасии он ва мутобиқати WAI-ARIA, унсурҳои Chakra UI бо истифода аз API-и худ танзим ва дубора мавзӯъро осон мекунанд. Аммо, ин танҳо нӯги айсберг дар бораи бартариҳои он аст, ки ба таҳиягарон пешниҳод мекунад.
Дар ин паём, мо ба баъзе хусусиятҳои пешрафтаи Chakra UI ва чӣ гуна онҳо метавонанд ба шумо ҳамчун як барномасоз самараноктар гардед, бодиққат дида мебароем.
Chakra 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
Пас аз насб кардани 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>
)
}
Усулҳои пешрафта дар Chakra UI
Эҷоди SVG дар вақти воқеӣ
Шумо метавонед SVG-ҳои худро ба таври динамикӣ навсозӣ кунед, то тарҳи кунуниро инъикос намуда, ҳангоми таъсиси мавзӯъҳои нав барои вебсайти худ. Ин барои ҳар як аз якчанд мавзӯъҳо эҷоди SVG-ҳои алоҳидаро тақозо мекунад.
Chakra UI, аз тарафи дигар, як варианти барои истифодабарандагон осонтар аст. Истифодаи useColorMode
қалмоқе дар Chakra UI, мо метавонем ранги пур кардани SVG-ҳои худро динамикӣ тағир диҳем.
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
hook ва SVG барои динамикӣ табдил додани онҳо. Истифодаи useColorMode
мо метавонем реҷаи рангро барқарор кунем ва тағир диҳем. Агар шумо хоҳед, ки рангҳоро иваз кунед, шумо бояд якеро истифода баред colorMode
ё toggleColor
Функсияи режим.
Мавзӯъҳои Чакра
Мавзӯъҳои Chakra 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
. Бо истифода аз мисолҳои дар боло овардашуда, шумо метавонед бифаҳмед, ки чӣ тавр мо метавонем ороиши стандартии ҷузъҳои Чакраро тағир диҳем.
Такмил ё тағир додани услубҳои ҷузъҳои 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
компонент ва тавассути он мо метавонем реквизитҳои услуби Чакраро ба он гузаронем 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
ассистент, шумо метавонед аниматсияеро, ки дар ин ҷо мебинед, эҷод кунед. Асбоби аниматсия ба мо имкон медиҳад, ки ҷузъҳои Chakra UI-ро аниматсионӣ гардонем.
Ҳамчун қадами охирин, гузаред 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-и шумо додааст.
Дин ва мазҳаб