Pêşdebir dê Chakra UI wekî hevkarê wan yê herî bikêr bibînin. Wekî amûrek hêmanek ji bo karûbarên serhêl, Chakra UI çêkirina sepanên tevhev bi karîgerî hêsan dike.
Wekî encamek gihîştina wê û lihevhatina WAI-ARIA, hêmanên Chakra UI hêsan e ku meriv bi karanîna API-ya xwe veguhezîne û ji nû ve mijar bike. Lêbelê, ev di derheqê feydeyên ku ew pêşkêşî pêşdebiran dike de tenê serê berfê ye.
Di vê postê de, em ê hûrgulî li hin taybetmendiyên pêşkeftî yên Chakra UI binihêrin û ka ew çawa dikarin ji we re bibin alîkar ku hûn wekî bernamenûsek hilberîner bibin.
Chakra UI çi ye?
Chakra UI amûrek hêmanek e ku ji pêşdebiran re dibe alîkar ku ji bo serîlêdanên xwe yên webê zû hêmanên navbeynkariya bikarhênerê ya gihîştî û ji nû ve bikar bînin ava bikin. Ew li ser React-ê hatî çêkirin û pergala şêwazê ji bo motora xweya mijarê bikar tîne.
Armanca Chakra UI ew e ku ji bernamenûsan re hêsan bike ku bi hewildanek hindiktirîn navrûyên bikarhêner ên xweşik, bersivdar û gihîştî biafirînin. Amûrek cûrbecûr pêkhateyên amade-bikaranîna ku ji bo ku bi hêsanî werin berhev kirin û berfirehkirin hatine sêwirandin vedihewîne.
Chakra UI çavkaniya vekirî ye, û pêşveçûna wê ji hêla Segment ve tê piştgirî kirin.
Meriv çawa Chakra UI saz dike
Pêdivî ye ku hûn fermanên jêrîn binivîsin da ku Chakra di Projeya xwe de tevde bikin:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Piştî sazkirina Chakra UI, divê hûn ChakraProvider di bingeha serîlêdana xwe de mîheng bikin. Bi çarçoveya ku hûn bikar tînin ve girêdayî ye, dibe ku ev di pelê weya index.jsx, index.tsx, an app.jsx de be.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Teknîkên pêşkeftî yên di Chakra UI de
Hilberîna SVG-yên rast-dem
Dibe ku hûn bixwazin SVG-yên xwe bi dînamîk nûve bikin da ku dema ku mijarên nû ji bo malpera xwe saz dikin sêwirana heyî nîşan bidin. Ev hewce dike ku ji bo her yek ji çend mijaran SVG-yên cihêreng bêne afirandin.
Chakra UI, ji hêla din ve, vebijarkek bikarhêner-hevaltir e. Bi kar tînin useColorMode
Di Chakra UI-yê de girêbidin, em dikarin bi rengek dînamîkî rengê dagirtina SVG-yên xwe biguhezînin.
UseColorMode tenê dema ku moda tarî were bicîh kirin dikare were bikar anîn. Yekem car moda tarî bi Chakra UI re bikar tînin? Ev gotar dê nîşanî we bide ka meriv çawa wê bi rêkûpêk bixebite.
Ew useColorMode
Vebijêrk piştî ku moda tarî hate çalak kirin heye.
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>
);
}
Koda jorîn entegre dike useColorMode
hook û SVG da ku wan dînamîk bikin. Bikaranîna useColorMode
em dikarin moda rengîn bistînin û biguherînin. Heke hûn dixwazin rengan biguherînin, divê hûn yek bikar bînin colorMode
an jî li toggleColor
Fonksiyona modê.
Mijarên Chakra
Mijarên Chakra UI bi karanîna ve têne sepandin Specification Mijara Pergala Styled teknîk. Mijarên di Chakra de dikarin bandorê li cûrbecûr aliyan bikin, ji paleta rengan bigire heya cihêbûnê.
Hûn ê tenê hewce ne ku hûn import bikin extendTheme
dema ku bişkokên ji bo guheztina nîşanan di pêşdibistanê de biguhezîne kar dike. Ka em li vê yekê binêrin.
Hûn tenê hewce ne ku a Theme.js
pelê ku dest pê bike.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Ew du rengên din li mijara mijarê zêde dike da ku wê geştir û balkêştir bike. Li gorî taybetmendiyên nermalavê, hûn dikarin nîşankerên şêwazê ji bo tîpan, xalên veqetandinê, mezinahiyên tîpan, firehiyên stûnan, û hêj bêtir biafirînin.
Ji bo ku hûn di vê mijara mijarê de ji taybetmendiyên pêşkeftî yên nû hatine destnîşan kirin sûd werbigirin, divê hûn pêşî saz bikin ChakraProvider
di koka serîlêdanê de.
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;
Piştî wê, hûn rasterast ChakraProvider
ji bo ku temaya ku we berê afirandiye bikar bînin. Hemî pêkhateyên Chakra niha dikarin rengên marqe bikar bînin.
Dibe ku hin proje tenê hewce ne ku şêwaza pêkhateya bingehîn a Chakra biguhezînin ne ku bi her awayî hewcedariya guheztina şêwazê bikin.
Wekî mînakek tişta şêwaza pêkhatê, li vir ew e:
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: "",
},
}
Niha, em ê tenê biguherînin Button
û Heading
perçan.
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;
Em dikarin ji sînorê-radyûsa ku ji hêla xwerû ve hatî destnîşan kirin xilas bibin Button
bi rakirina wê baseStyle
. Hûn dikarin mezinahiya tîpan û sêwirana tîpan ji bo biguherînin Heading
. Bi karanîna mînakên jorîn, hûn dikarin fêm bikin ka em çawa dikarin şêwaza standard a pêkhateyên Chakra biguhezînin.
Zêdekirin an guheztina şêwazên pêkhateyên Chakra ji me re xuyang û kontrolê li ser xuyang û fonksiyona navrûyên bikarhêner ên me peyda dike.
Chakra û pêkhateyên sêyemîn
Chakra dihêle ku modulên partiya sêyemîn ji şêwaza xwe sûd werbigirin. Wekî encamek, berhevkirina hêmanên partiya sêyem bi Chakra UI re kêmtir pêçanên xwedanî hewce dike.
Li jêr navnîşek hêmanên HTML-ê yên ku ji hêla kargeha Chakra ve têne piştgirî kirin hene:
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>
);
}
Em Next.js entegre dikin Image
hêmanek bi Chakra UI-yê di qutiya koda jorîn de. Piştre, me saz kir a ChakraNextImage
hêmanek, û bi navgîniya wê, em dikarin pêşbaziyên şêwaza Chakra derbas bikin Image
.
Animasiyalar
Hûn dikarin anîmasyonên bi karanîna Chakra UI-ê diyar bikin keyframes
alîkar. Keyframes
danasîna çarçoveyek sereke ya CSS-ê bistînin û tiştek ku hûn dikarin di şêwazan de bikar bînin vegerînin:
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>
);
}
bi bikaranîna keyframes
arîkar, hûn dikarin anîmasyona ku hûn li vir dibînin biafirînin. Pêşniyara anîmasyonê destûrê dide me ku em pêkhateyên Chakra UI zindî bikin.
Wekî gava dawî, derbas bibe spinAnimation
di beşa Box de da ku anîmasyon li sepanên Chakra UI werin zêdekirin.
Veguheztinên Rûpelê
Dibe ku veguheztinên rûpelan li sepanên me werin zêdekirin da ku ezmûna bikarhêner gava ku ew di navbera rûpelan de digerin baştir bikin.
Ya jêrîn mînakek e ku meriv wê çawa bi Chakra UI re bi dest bixe:
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;
Ji bo ku hûn veguheztinên rûpelê bicîh bikin, pêkhateyên veguherînê ji Chakra UI bikar bînin. Veguheztina ScaleFade di rêzika jorîn a kodê de tê bikar anîn.
Ji kerema xwe agahdar bikin ScaleFade
di derbarê rêça serîlêdana we de da ku gava ku hûn li ser ekranê diherikin veguheztin kar bike! Tiştek daneyên di derbarê riya heyî de peyda dike, ku hûn paşê dikarin jê re bişînin ScaleFade
pêveka sereke. InitialScale
û di prop de têne bikar anîn da ku pîvana destpêkê ya veguheztinê saz bikin û dema ku pêkhate tê pêşkêş kirin pêk were.
Di vê beşê de, me li çend taybetmendî û kapasîteyên ku Chakra UI pêşkêşî dike nihêrî û ka ew çawa di ezmûna meya bêkêmasî de ji me re dibe alîkar. Me her weha lêkolîn kir ka çawa sazkirina tiştên mijarê û pêşkeftina şêwazên gerdûnî dibe ku di domandina mezinbûna pergala me de bibe alîkar.
Ger we berê nekiriye, Em bawer dikin ku vê gotarê hin raman daye we da ku hûn pêvajoya pêşkeftina Chakra UI-ya xwe xweş bikin.
Leave a Reply