Ontwikkelaars sal vind dat Chakra UI hul nuttigste vennoot is. As 'n komponent gereedskapstel vir aanlyn dienste, Chakra UI maak dit maklik om inklusiewe toepassings met doeltreffendheid te bou.
As gevolg van sy toeganklikheid en WAI-ARIA-nakoming, is Chakra UI se elemente maklik om aan te pas en te her-tema met behulp van sy API. Dit is egter net die punt van die ysberg met betrekking tot die voordele wat dit ontwikkelaars bied.
In hierdie pos sal ons sommige van die meer gevorderde kenmerke van Chakra UI van naderby bekyk en hoe dit jou kan help om meer produktief as 'n programmeerder te word.
Wat is Chakra UI?
Chakra UI is 'n komponent gereedskapstel wat ontwikkelaars help om vinnig toeganklike en herbruikbare gebruikerskoppelvlakkomponente vir hul webtoepassings te bou. Dit is bo-op React gebou en gebruik die stylstelsel vir sy tema-enjin.
Chakra UI se doel is om dit vir programmeerders maklik te maak om pragtige, responsiewe en toeganklike gebruikerskoppelvlakke te skep met minimale moeite. Die gereedskapstel bevat 'n wye verskeidenheid gereed-vir-gebruik komponente wat ontwerp is om maklik saamstelbaar en uit te brei.
Chakra UI is oopbron, en die ontwikkeling daarvan word deur Segment geborg.
Hoe om Chakra UI te installeer
Jy sal die volgende opdragte moet tik om Chakra in jou projek te inkorporeer:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
U moet die ChakraProvider by die wortel van u toepassing opstel nadat u Chakra UI geïnstalleer het. Afhangende van die raamwerk wat jy gebruik, kan dit in jou index.jsx-, index.tsx- of app.jsx-lêer wees.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Gevorderde tegnieke in Chakra UI
Genereer intydse SVG's
U wil dalk u SVG's dinamies bywerk om die huidige ontwerp te weerspieël terwyl u nuwe temas vir u webwerf vestig. Dit noodsaak die skepping van afsonderlike SVG's vir elk van die verskeie temas.
Chakra UI, aan die ander kant, is 'n meer gebruikersvriendelike opsie. Gebruik die useColorMode
haak in Chakra UI, kan ons die vulkleur van ons SVG's dinamies verander.
UseColorMode kan slegs gebruik word sodra donker modus geïmplementeer is. Gebruik jy vir die eerste keer donker modus met Chakra UI? Hierdie artikel sal jou wys hoe om dit behoorlik te laat werk.
Die useColorMode
opsie is beskikbaar nadat die donker modus geaktiveer is.
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>
);
}
Die bogenoemde kode integreer die useColorMode
haak en SVG om hulle dinamies te maak. Met behulp van useColorMode
ons kan kleurmodus ophaal en verander. As jy van kleure wil verander, moet jy een van die twee gebruik colorMode
of die toggleColor
Modus funksie.
Chakra-temas
Chakra UI se temas word toegepas met behulp van die Gestileerde Stelsel Tema Spesifikasie tegniek. Temas in Chakra kan 'n verskeidenheid aspekte beïnvloed, wat wissel van kleurpalet tot spasiëring.
Jy sal net die invoer moet invoer extendTheme
funksie terwyl die sleutels bygevoeg word om tokens in die voorafinstelling te verander. Kom ons kyk bietjie hierna.
Jy hoef net 'n te skep Theme.js
lêer om te begin.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Dit voeg nog twee kleure by die tema-voorwerp om dit meer lewendig en aantreklik te maak. Volgens die sagteware spesifikasies kan jy stylmerkers vir lettertipes, breekpunte, lettergroottes, kolomwydtes en meer skep.
Om voordeel te trek uit die nuut ingevoerde gevorderde kenmerke in hierdie tema-voorwerp, moet jy eers installeer ChakraProvider
aan die wortel van die aansoek.
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;
Daarna rig jy ChakraProvider
om die tema-voorwerp wat jy voorheen geskep het te gebruik. Al die Chakra-komponente kan nou handelsmerkkleure gebruik.
Sommige projekte moet dalk net Chakra se basiese komponentstilering verander eerder as om 'n stylverandering op enige manier te vereis.
As 'n voorbeeld van die komponentstylvoorwerp, hier is dit:
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: "",
},
}
Nou sal ons net die verander Button
en Heading
dele.
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;
Ons kan ontslae raak van die grensradius wat by verstek gestel is vir die Button
deur sy te verwyder baseStyle
. Jy kan die lettergrootte en lettertipe-uitleg vir die Heading
. Deur die bogenoemde voorbeelde te gebruik, kan jy verstaan hoe ons die standaardstilering van Chakra-komponente kan verander.
Die verbetering of verandering van die style van Chakra-komponente bied ons sigbaarheid en beheer oor die voorkoms en funksionering van ons gebruikerskoppelvlakke.
Chakra en derdeparty-komponente
Chakra laat derdeparty-modules toe om voordeel te trek uit hul styl. As gevolg hiervan, vereis die kombinasie van derdeparty-elemente met Chakra UI minder eie komponentomhulsels.
Die volgende is 'n lys van die HTML-elemente wat deur die Chakra-fabriek ondersteun word:
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>
);
}
Ons integreer die Next.js Image
komponent met Chakra UI in die kodebrokkie hierbo. Toe stel ons 'n op ChakraNextImage
komponent, en daardeur kan ons Chakra se stylrekwisiete deurgee Image
.
animasies
Jy kan animasies definieer deur Chakra UI's te gebruik keyframes
helper. Keyframes
neem 'n CSS-sleutelraamdefinisie in en gee 'n voorwerp terug wat jy in style kan gebruik:
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>
);
}
Die gebruik van die keyframes
assistent, kan jy die animasie skep wat jy hier sien. Die animasie-stut stel ons in staat om Chakra UI-komponente te animeer.
As die laaste stap, slaag spinAnimation
in die Box-komponent sodat animasies by die Chakra UI-toepassings gevoeg kan word.
Bladsy-oorgange
Bladsy-oorgange kan by ons toepassings gevoeg word om die gebruiker se ervaring te verbeter wanneer hulle tussen bladsye beweeg.
Die volgende is 'n voorbeeld van hoe om dit met Chakra UI te bereik:
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 bladsyoorgange te implementeer, gebruik die oorgangskomponente van Chakra UI. Die ScaleFade-oorgang word in die kodereël hierbo gebruik.
Laat weet asb ScaleFade
oor jou toepassing se pad sodat die oorgang kan funksioneer soos jy oor die skerm beweeg! Die voorwerp verskaf data oor die huidige pad, waarna jy dan kan stuur ScaleFade
se sleutelstut. InitialScale
en in stut word gebruik om die beginskaal van die oorgang vas te stel en om dit te laat gebeur wanneer die komponent gelewer word.
In hierdie stuk het ons gekyk na 'n paar van die kenmerke en vermoëns wat Chakra UI bied en hoe dit ons help in ons perfekte ervaring. Ons het ook ondersoek hoe die vestiging van tema-objekte en die ontwikkeling van globale style kan help om die skaalbaarheid van ons stelsel te handhaaf.
As u dit nog nie gedoen het nie, glo ons dat hierdie artikel u 'n paar idees gegee het om u Chakra UI-ontwikkelingsproses te stroomlyn.
Lewer Kommentaar