Մշակողները կգտնեն, որ 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-ի հետ առաջին անգամ: Այս հոդվածը ցույց կտա ձեզ, թե ինչպես այն ճիշտ աշխատել:
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-ի թեմաները կիրառվում են օգտագործելով Styled System Theme Specification տեխնիկա. Չակրայի թեմաները կարող են ազդել տարբեր ասպեկտների վրա՝ սկսած գունային գունապնակից մինչև տարածություն:
Ձեզ պարզապես անհրաժեշտ կլինի ներմուծել 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;
Մենք կարող ենք ազատվել սահմանային շառավղից, որը լռելյայնորեն սահմանված էր the-ի համար 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
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-ն և ինչպես է այն օգնում մեզ մեր կատարյալ փորձի մեջ: Մենք նաև ուսումնասիրել ենք, թե թեմայի օբյեկտների ստեղծումը և գլոբալ ոճերի մշակումը ինչպես կարող են օգնել պահպանել մեր համակարգի մասշտաբայնությունը:
Եթե դեռ չեք արել, մենք կարծում ենք, որ այս հոդվածը ձեզ որոշ գաղափարներ է տվել՝ ձեր Chakra UI-ի զարգացման գործընթացը պարզեցնելու համար:
Թողնել գրառում