Иштеп чыгуучулар 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>
)
}
Чакра UIдеги өркүндөтүлгөн техникалар
Реалдуу убакыттагы SVGлерди түзүү
Вебсайтыңыз үчүн жаңы темаларды түзүп жатканда учурдагы дизайнды чагылдыруу үчүн SVG файлдарыңызды динамикалык түрдө жаңырткыңыз келиши мүмкүн. Бул бир нече темалардын ар бири үчүн өзүнчө SVG түзүүнү талап кылат.
Chakra UI, экинчи жагынан, колдонуучуга ыңгайлуу вариант. Колдонуу useColorMode
Chakra UIде илгич менен биз SVGлердин толтуруу түсүн динамикалык түрдө өзгөртө алабыз.
UseColorMode караңгы режим ишке ашкандан кийин гана колдонулушу мүмкүн. Chakra UI менен караңгы режимди биринчи жолу колдонуп жатасызбы? Бул макалада аны кантип туура иштөөгө болору көрсөтүлөт.
The 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 UI менен айкалыштыруу азыраак проприетардык компоненттерди орогучтарды талап кылат.
Төмөндө Чакра фабрикасы колдогон 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
жогорудагы код үзүндүсүндө Chakra UI менен компонент. Андан кийин, биз орноттук ChakraNextImage
компоненти жана ал аркылуу биз Чакранын стилиндеги таянычтарын өткөрө алабыз Image
.
Animations
Сиз 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
Анимацияларды Chakra UI колдонмолоруна кошуу үчүн Box компонентине киргизиңиз.
Page Transitions
Колдонмолор барактардын ортосунда өтүүдө колдонуучунун тажрыйбасын жакшыртуу үчүн биздин колдонмолорго баракчаларды которуулар кошулушу мүмкүн.
Төмөндө 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 сунуш кылган бир нече функцияларды жана мүмкүнчүлүктөрдү жана ал бизге эң сонун тажрыйбабызга кандайча жардам берерин карап чыктык. Биз ошондой эле тема объектилерин түзүү жана глобалдык стилдерди иштеп чыгуу системабыздын масштабдуулугун сактоого кандайча жардам берерин изилдедик.
Эгер сиз буга чейин кыла элек болсоңуз, бул макала сизге Chakra UI иштеп чыгуу процессин жөнөкөйлөтүү үчүн кээ бир идеяларды берди деп ишенебиз.
Таштап Жооп