Хөгжүүлэгчид Chakra UI-г хамгийн ашигтай хамтрагч гэж олох болно. Чакра UI нь онлайн үйлчилгээнд зориулсан бүрэлдэхүүн хэсгийн хэрэгслийн хувьд үр ашигтай, хүртээмжтэй програмуудыг бүтээхэд хялбар болгодог.
Хүртээмжтэй, WAI-ARIA-д нийцсэний үр дүнд Chakra UI-ийн элементүүдийг API-г ашиглан өөрчлөхөд хялбар, загвараа дахин өөрчлөх боломжтой. Гэсэн хэдий ч энэ нь хөгжүүлэгчдэд санал болгож буй давуу талуудын талаархи мөсөн уулын зөвхөн үзүүр юм.
Энэ нийтлэлд бид Чакра 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
дэгээ болон 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
Дээрх кодын хэсэг дэх Чакра 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
туслах, та энд харж буй хөдөлгөөнт дүрсээ үүсгэж болно. Хөдөлгөөнт дүрс нь бидэнд Чакра 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
болон in prop нь шилжилтийн эхлэлийн цар хүрээг тогтоох, бүрэлдэхүүн хэсгийг үзүүлэх үед үүнийг хэрэгжүүлэхэд ашиглагддаг.
Энэ хэсэгт бид Chakra UI-ийн санал болгож буй цөөн хэдэн онцлог, боломжууд болон энэ нь бидний төгс туршлагад хэрхэн тусалж байгааг харлаа. Сэдвийн объектуудыг бий болгох, дэлхийн хэв маягийг хөгжүүлэх нь манай системийн өргөтгөх чадварыг хадгалахад хэрхэн тусалж болохыг бид судалж үзсэн.
Хэрэв та хараахан амжаагүй бол энэ нийтлэл нь Чакра UI-г хөгжүүлэх үйл явцыг оновчтой болгох зарим санааг танд өгсөн гэдэгт бид итгэлтэй байна.
хариу үлдээх