Әзірлеушілер 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>
)
}
Чакра пайдаланушы интерфейсіндегі жетілдірілген әдістер
Нақты уақыттағы 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
.
Анимациялар
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 компонентіне енгізіңіз.
Беттің ауысулары
Қолданбалар беттер арасында жылжу кезінде пайдаланушы тәжірибесін жақсарту үшін бет ауысулары қосылуы мүмкін.
Төменде 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 әзірлеу процесін жеңілдету үшін кейбір идеялар берді деп санаймыз.
пікір қалдыру