Untwikkelders sille Chakra UI fine as har meast brûkbere partner. As komponint toolkit foar online tsjinsten makket Chakra UI it maklik om ynklusive apps mei effisjinsje te bouwen.
As gefolch fan syn tagonklikens en WAI-ARIA-neilibjen binne de eleminten fan Chakra UI ienfâldich oan te passen en opnij tema te brûken mei syn API. Dit is lykwols allinich it tip fan 'e iisberch oangeande de foardielen dy't it ûntwikkelders biedt.
Yn dit berjocht sille wy in pear fan 'e mear avansearre funksjes fan Chakra UI in tichterby besjen en hoe't se jo kinne helpe produktiver te wurden as programmeur.
Wat is Chakra UI?
Chakra UI is in komponint toolkit dy't ûntwikkelders helpt fluch tagonklike en werbrûkbere brûkersynterface-komponinten foar har webapplikaasjes te bouwen. It is boud boppe op React en brûkt it stylige systeem foar syn temamotor.
It doel fan Chakra UI is om it maklik te meitsjen foar programmeurs om prachtige, responsive en tagonklike brûkersynterfaces te meitsjen mei minimale ynspanning. De toolkit omfettet in breed ferskaat oan klearebare komponinten dy't binne ûntworpen om maklik te komponearjen en út te wreidzjen.
Chakra UI is iepen boarne, en de ûntwikkeling dêrfan wurdt sponsore troch Segment.
Hoe kinne jo Chakra UI ynstallearje
Jo moatte de folgjende kommando's ynfiere om Chakra yn jo projekt op te nimmen:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Jo moatte de ChakraProvider yn 'e root fan jo applikaasje konfigurearje nei it ynstallearjen fan Chakra UI. Ofhinklik fan it ramt dat jo brûke, kin dit wêze yn jo index.jsx-, index.tsx- of app.jsx-bestân.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Avansearre techniken yn Chakra UI
Real-time SVG's generearje
Jo kinne jo SVG's dynamysk bywurkje om it hjoeddeistige ûntwerp te reflektearjen by it fêststellen fan nije tema's foar jo webside. Dit fereasket it oanmeitsjen fan ûnderskate SVG's foar elk fan 'e ferskate tema's.
Chakra UI, oan 'e oare kant, is in mear brûkerfreonlike opsje. De ... brûke useColorMode
hook yn Chakra UI, kinne wy de fillkleur fan ús SVG's dynamysk feroarje.
UseColorMode kin allinich brûkt wurde as de tsjustere modus is ymplementearre. Brûke donkere modus mei Chakra UI foar it earst? Dit artikel sil jo sjen litte hoe't jo it goed kinne wurkje.
De useColorMode
opsje is beskikber neidat de tsjustere modus is ynskeakele.
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>
);
}
De boppesteande koade integriert de useColorMode
hook en SVG om se dynamysk te meitsjen. Using useColorMode
wy kinne kleurmodus ophelje en feroarje. As jo kleuren wikselje wolle, moatte jo beide brûke colorMode
of de toggleColor
Mode funksje.
Chakra Temas
De tema's fan Chakra UI wurde tapast mei de Styled Systeem Tema Spesifikaasje technyk. Tema's yn Chakra kinne ynfloed hawwe op in ferskaat oan aspekten, fariearjend fan kleurpalet oant ôfstân.
Jo sille gewoan moatte ymportearje de extendTheme
funksje by it tafoegjen fan de kaaien om tokens yn 'e foarynstelling te feroarjen. Litte wy dit efkes sjen.
Jo moatte gewoan in meitsje Theme.js
bestân om te begjinnen.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
It foeget noch twa kleuren ta oan it tema-objekt om it libbender en oantrekliker te meitsjen. Neffens de softwarespesifikaasjes kinne jo stylmarkers meitsje foar lettertypen, brekpunten, lettertypegrutte, kolombreedten, en mear.
Om te profitearjen fan de nij yntrodusearre avansearre funksjes yn dit tema-objekt, moatte jo earst ynstallearje ChakraProvider
by de woartel fan 'e applikaasje.
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;
Dêrnei rjochtsje jo ChakraProvider
om it tema-objekt te brûken dat jo earder makke hawwe. Alle Chakra-komponinten kinne no merkkleuren brûke.
Guon projekten moatte miskien gewoan de styling fan Chakra's basiskomponint feroarje ynstee fan op ien of oare manier in stylmodifikaasje te fereaskje.
As foarbyld fan it komponintstylobjekt, hjir is it:
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: "",
},
}
No, wy sille gewoan feroarje de Button
en Heading
dielen.
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;
Wy kinne krije rid fan de grins-radius dat waard ynsteld standert foar de Button
troch it fuortheljen fan syn baseStyle
. Jo kinne feroarje de lettertype grutte en lettertype opmaak foar de Heading
. Mei de boppesteande foarbylden kinne jo begripe hoe't wy de standert styling fan Chakra-komponinten kinne feroarje.
It ferbetterjen of feroarjen fan de stilen fan Chakra-komponinten jout ús sichtberens en kontrôle oer it uterlik en funksjonearjen fan ús brûkersynterfaces.
Chakra en komponinten fan tredden
Chakra lit modules fan tredden profitearje fan har styl. As gefolch, it kombinearjen fan eleminten fan tredden mei Chakra UI fereasket minder proprietêre komponint wrappers.
It folgjende is in list mei de HTML-eleminten dy't wurde stipe troch it Chakra-fabryk:
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>
);
}
Wy yntegrearje de Next.js Image
komponint mei Chakra UI yn it koadefragment hjirboppe. Dan sette wy in ChakraNextImage
komponint, en troch it, kinne wy trochjaan Chakra syn styl rekwisieten oan Image
.
animations
Jo kinne animaasjes definiearje mei Chakra UI's keyframes
helper. Keyframes
nim in CSS-keyframe-definysje yn en jou in objekt werom dat jo kinne brûke yn stilen:
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>
);
}
De ... brûke keyframes
assistint, kinne jo meitsje de animaasje jo sjogge hjir. De animaasjeprop lit ús Chakra UI-komponinten animearje.
As de lêste stap, pass spinAnimation
yn 'e Box-komponint, sadat animaasjes kinne wurde tafoege oan de Chakra UI-apps.
Side Transitions
Side-oergongen kinne wurde tafoege oan ús apps om de ûnderfining fan de brûker te ferbetterjen as se tusken siden ferpleatse.
It folgjende is in foarbyld fan hoe't jo it kinne berikke mei 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;
Om side-oergongen te ymplementearjen, brûk de oergongskomponinten fan Chakra UI. De ScaleFade-oergong wurdt brûkt yn 'e boppesteande rigel fan koade.
Nim dan op 'e hichte ScaleFade
oer it paad fan jo applikaasje, sadat de oergong kin funksjonearje as jo oer it skerm gean! It objekt jout gegevens oer it aktuele paad, dêr't jo dan nei kinne stjoere ScaleFade
's kaai prop. InitialScale
en yn prop wurde brûkt om de startskaal fan 'e oergong te fêstigjen en it te meitsjen as de komponint wurdt rendered.
Yn dit stik seagen wy in pear fan 'e funksjes en mooglikheden dy't Chakra UI biedt en hoe't it ús helpt yn ús perfekte ûnderfining. Wy hawwe ek ûndersocht hoe't it oprjochtsjen fan tema-objekten en it ûntwikkeljen fan globale stilen kinne helpe by it behâld fan de skalberens fan ús systeem.
As jo net al hawwe, Wy leauwe dat dit artikel jo wat ideeën hat jûn om jo Chakra UI-ûntwikkelingsproses te streamlynjen.
Leave a Reply