Devlopè yo pral jwenn Chakra UI kòm patnè ki pi itil yo. Kòm yon zouti konpozan pou sèvis sou entènèt, Chakra UI fè li fasil pou konstwi apps enklizif ak efikasite.
Kòm yon rezilta aksesibilite li yo ak konfòmite WAI-ARIA, eleman Chakra UI a se senp yo Customize ak re-tèm lè l sèvi avèk API li yo. Sepandan, sa a se sèlman pwent iceberg la konsènan avantaj li ofri devlopè yo.
Nan pòs sa a, nou pral gade pi pre kèk nan karakteristik ki pi avanse nan Chakra UI ak fason yo ka ede w vin pi pwodiktif kòm yon pwogramè.
Ki sa ki Chakra UI?
Chakra UI se yon zouti konpozan ki ede devlopè yo byen vit bati konpozan koòdone itilizatè ki aksesib epi ki kapab itilize ankò pou aplikasyon entènèt yo. Li bati sou tèt React epi li sèvi ak sistèm style pou motè tèmik li yo.
Objektif Chakra UI a se fè li fasil pou pwogramasyon yo kreye bèl, reponn, ak aksesib koòdone itilizatè ak efò minim. Zouti a gen ladann yon gran varyete konpozan ki pare pou itilize ki fèt pou yo ka fasil pou konpoze ak ekstansibl.
Chakra UI se sous louvri, epi devlopman li patwone pa Segment.
Ki jan yo Enstale Chakra UI
Ou pral oblije tape kòmandman sa yo pou enkòpore Chakra nan Pwojè w la:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Ou dwe konfigirasyon ChakraProvider nan rasin aplikasyon w lan apre w fin enstale Chakra UI. Tou depan de kad ou itilize a, sa ka nan fichye index.jsx, index.tsx, oswa app.jsx ou.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Teknik avanse nan chakra UI
Jenere SVG an tan reyèl
Ou ka vle aktyalize SVG ou yo pou reflete konsepsyon aktyèl la pandan w ap etabli nouvo tèm pou sit entènèt ou a. Sa a nesesite kreyasyon SVG diferan pou chak nan plizyè tèm yo.
Chakra UI, nan lòt men an, se yon opsyon ki pi fasil itilizatè. Sèvi ak la useColorMode
zen nan Chakra UI, nou ka chanje dinamik koulè ranpli nan SVG nou yo.
UseColorMode ka itilize sèlman yon fwa mòd nwa aplike. Sèvi ak mòd nwa ak Chakra UI pou premye fwa? Atik sa a pral montre w kouman pou li travay byen.
Jounal useColorMode
opsyon ki disponib apre mòd nwa a te pèmèt.
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>
);
}
Kòd ki pi wo a entegre useColorMode
zen ak SVG pou fè yo dinamik. Sèvi ak useColorMode
nou ka rekipere ak chanje mòd koulè. Si ou vle chanje koulè, ou ta dwe itilize swa colorMode
oswa nan toggleColor
Fonksyon mòd.
Tèm chakra
Tèm Chakra UI yo aplike lè l sèvi avèk Styled System Spesifikasyon Tèm teknik. Tèm nan Chakra ka gen enpak sou yon varyete de aspè ki soti nan pale koulè ak espas.
Ou pral jis bezwen enpòte a extendTheme
fonksyon pandan y ap ajoute kle yo modifye marqueur nan prereglaj la. Ann fè yon gade nan sa a.
Ou jis bezwen kreye yon Theme.js
dosye pou kòmanse.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Li ajoute de plis koulè nan objè tèm nan fè li pi vibran ak fè apèl kont. Dapre espesifikasyon lojisyèl yo, ou ka kreye makè style pou polices, breakpoints, gwosè font, lajè kolòn, ak plis ankò.
Yo nan lòd yo pran avantaj de karakteristik yo ki fèk prezante nan objè tèm sa a, ou dwe premye enstale ChakraProvider
nan rasin aplikasyon an.
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;
Apre sa, ou dirije ChakraProvider
pou itilize objè tèm ou te kreye anvan an. Tout eleman Chakra yo ka kounye a itilize koulè mak.
Gen kèk pwojè ki ka jis bezwen chanje manier eleman debaz Chakra a olye ke yo mande yon modifikasyon style nan nenpòt fason.
Kòm yon egzanp objè a style eleman, isit la li se:
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: "",
},
}
Koulye a, nou pral jis modifye la Button
ak Heading
pati.
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;
Nou ka debarase m de fwontyè-reyon ki te mete pa default pou la Button
pa retire li baseStyle
. Ou ka chanje gwosè polis la ak Layout tip pou la Heading
. Sèvi ak egzanp ki anwo yo, ou ka konprann ki jan nou ka chanje style estanda nan eleman Chakra.
Amelyore oswa chanje estil konpozan Chakra yo bay nou vizibilite ak kontwòl sou aparans ak fonksyone koòdone itilizatè nou an.
Chakra ak konpozan twazyèm pati
Chakra pèmèt modil twazyèm pati yo benefisye de style yo. Kòm yon rezilta, konbine eleman twazyèm pati ak Chakra UI mande pou mwens anbalaj eleman propriétaires.
Sa ki anba la a se yon lis eleman HTML yo sipòte pa faktori a Chakra:
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>
);
}
Nou entegre Next.js la Image
eleman ak Chakra UI nan snippet kòd ki anwo a. Lè sa a, nou mete kanpe yon ChakraNextImage
eleman, ak atravè li, nou ka pase akseswar style Chakra a Image
.
Animations
Ou ka defini animasyon lè l sèvi avèk Chakra UI a keyframes
asistan. Keyframes
pran yon definisyon kle CSS epi retounen yon objè ou ka itilize nan estil:
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>
);
}
Lè l sèvi avèk la keyframes
asistan, ou ka kreye animasyon ou wè isit la. Pwopriyetè animasyon an pèmèt nou anime eleman chakra UI.
Kòm dènye etap la, pase spinAnimation
nan eleman Bwat la pou animasyon yo ka ajoute nan aplikasyon yo Chakra UI.
Tranzisyon paj
Tranzisyon paj yo ka ajoute nan aplikasyon nou yo nan lòd yo amelyore eksperyans itilizatè a lè yo deplase ant paj.
Sa ki anba la a se yon egzanp sou fason pou reyalize li ak 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;
Pou aplike tranzisyon paj, sèvi ak eleman tranzisyon ki soti nan Chakra UI. Tranzisyon ScaleFade yo itilize nan liy kòd ki anwo a.
Tanpri notifye ScaleFade
sou chemen aplikasyon w lan pou tranzisyon an ka fonksyone pandan w ap deplase atravè ekran an! Objè a bay done sou chemen aktyèl la, kote ou ka voye bay ScaleFade
prop kle a. InitialScale
ak nan prop yo itilize pou etabli echèl kòmanse tranzisyon an epi pou fè li rive lè eleman an rann.
Nan moso sa a, nou te gade kèk nan karakteristik ak kapasite ke Chakra UI ofri ak kijan li ede nou nan eksperyans pafè nou an. Nou te eksplore tou ki jan etabli objè tèm ak devlope estil mondyal ta ka ede nan kenbe évolutivité nan sistèm nou an.
Si ou pa deja, Nou kwè atik sa a te ba ou kèk ide pou rasyonalize pwosesis devlopman Chakra UI ou a.
Kite yon Reply