Inhaltsverzeechnes[Verstoppen][Show]
Entwéckler fannen Chakra UI als hiren nëtzlechste Partner. Als Komponent Toolkit fir Online Servicer mécht Chakra UI et einfach inklusiv Apps mat Effizienz ze konstruéieren.
Als Resultat vu senger Accessibilitéit an der WAI-ARIA Konformitéit sinn d'Elementer vum Chakra UI einfach ze personaliséieren an nei thematiséieren mat senger API. Wéi och ëmmer, dëst ass nëmmen den Tipp vum Äisbierg iwwer d'Virdeeler déi d'Entwéckler ubitt.
An dësem Beitrag kucke mir e puer vun de méi fortgeschratt Feature vum Chakra UI méi no a wéi se Iech hëllefe méi produktiv als Programméierer ze ginn.
Wat ass Chakra UI?
Chakra UI ass e Komponent Toolkit deen Entwéckler hëlleft séier zougänglech a wiederverwendbar User Interface Komponente fir hir Webapplikatiounen ze bauen. Et ass uewen op React gebaut a benotzt de stiléierte System fir säin Themenmotor.
D'Zil vum Chakra UI ass et fir Programméierer einfach ze maachen schéin, reaktiounsfäeger an zougänglech User Interfaces mat minimalem Effort ze kreéieren. D'Toolkit enthält eng breet Varietéit vu prett-ze-benotzen Komponenten déi entwéckelt sinn fir liicht komponéierbar an erweiterbar ze sinn.
Chakra UI ass Open Source, a seng Entwécklung gëtt vum Segment gesponsert.
Wéi installéiere Chakra UI
Dir musst déi folgend Kommandoen tippen fir Chakra an Ärem Projet ze integréieren:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Dir musst de ChakraProvider an der Wuerzel vun Ärer Applikatioun konfiguréieren nodeems Dir Chakra UI installéiert hutt. Ofhängeg vum Kader deen Dir benotzt, kann dëst an Ärer index.jsx, index.tsx oder app.jsx Datei sinn.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Fortgeschratt Techniken am Chakra UI
Generéiere Echtzäit SVGs
Dir wëllt Är SVGs dynamesch aktualiséieren fir den aktuellen Design ze reflektéieren wärend Dir nei Themen fir Är Websäit opstellt. Dëst erfuerdert d'Schafung vun ënnerschiddleche SVGs fir all eenzel vun de verschiddenen Themen.
Chakra UI, op der anerer Säit, ass eng méi userfrëndlech Optioun. Benotzt vun der useColorMode
Hook am Chakra UI, kënne mir d'Füllfaarf vun eise SVGs dynamesch änneren.
UseColorMode kann nëmme benotzt ginn eemol däischter Modus ëmgesat ass. Benotzt däischter Modus mat Chakra UI fir d'éischte Kéier? Dësen Artikel wäert Iech weisen wéi et richteg funktionnéiert.
d' useColorMode
Optioun ass verfügbar nodeems den donkelen Modus aktivéiert gouf.
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>
);
}
Deen uewe Code integréiert d' useColorMode
Hook an SVG fir se dynamesch ze maachen. Benotzt useColorMode
mir kënne Faarfmodus recuperéieren an änneren. Wann Dir wëllt Faarwen wiesselen, sollt Dir entweder benotzen colorMode
oder déi toggleColor
Modus Funktioun.
Chakra Themen
Chakra UI's Themen ginn applizéiert mat der Styled System Theme Spezifizéierung Technik. Themen am Chakra kënnen eng Vielfalt vun Aspekter beaflossen, rangéiert vu Faarfpalette bis Abstand.
Dir musst just den Import importéieren extendTheme
Funktioun wärend d'Schlësselen bäigefüügt fir Tokens am Preset z'änneren. Loosst eis dëst kucken.
Dir musst just eng schafen Theme.js
Datei fir unzefänken.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Et füügt zwee méi Faarwen zum Thema Objet fir et méi vibrant an attraktiv ze maachen. Geméiss de Software Spezifikatioune kënnt Dir Stilmarker fir Schrëftaarten, Breakpunkten, Schrëftgréissten, Kolonnbreeten a méi erstellen.
Fir vun den nei agefouert fortgeschratt Fonctiounen an dësem Thema Objet ze profitéieren, musst Dir éischt installéiert ChakraProvider
an der Wuerzel vun der Applikatioun.
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;
Duerno dirigéiert Dir ChakraProvider
fir den Themaobjekt ze benotzen deen Dir virdru erstallt hutt. All Chakra Komponente kënnen elo Markefaarwen benotzen.
E puer Projete brauche vläicht just de Chakra seng Basiskomponent Styling z'änneren anstatt eng Stilmodifikatioun op iergendeng Manéier ze erfuerderen.
Als Beispill vum Komponentstilobjekt ass et hei:
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: "",
},
}
Elo wäerte mir just d'Ännerung änneren Button
an Heading
Deeler.
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;
Mir kënnen d'Grenzradius lass kréien, deen par défaut gesat gouf fir den Button
andeems se seng ewechhuelen baseStyle
. Dir kënnt d'Schrëftgréisst an d'Schrëft Layout änneren fir de Heading
. Mat den uewe genannte Beispiller kënnt Dir verstoen wéi mir de Standard Styling vun Chakra Komponenten änneren.
D'Stiler vun de Chakra Komponenten verbesseren oder änneren stellt eis Visibilitéit a Kontroll iwwer d'Erscheinung an d'Funktionéiere vun eise Benotzerinterfaces.
Chakra an Drëtt Partei Komponenten
Chakra erlaabt Drëtt-Partei Moduler vun hirem Stil ze profitéieren. Als Resultat erfuerdert d'Kombinatioun vun Drëtt Partei Elementer mat Chakra UI manner propriétaire Komponentwrapper.
Déi folgend ass eng Lëscht vun den HTML Elementer ënnerstëtzt vun der Chakra Fabréck:
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>
);
}
Mir integréieren Next.js Image
Komponent mat Chakra UI am Code Snippet uewen. Dann setzen mir eng ChakraNextImage
Komponent, an duerch et, kënne mir Chakra Stil Requisiten Passe Image
.
Animéiert
Dir kënnt Animatiounen definéieren mat Chakra UI's keyframes
Helfer. Keyframes
Huelt eng CSS Keyframe Definitioun a gitt en Objet zréck deen Dir a Stiler benotze kënnt:
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>
);
}
mat der keyframes
Assistent, Dir kënnt d'Animatioun erstellen, déi Dir hei gesitt. D'Animatiounsprop erlaabt eis Chakra UI Komponenten ze animéieren.
Als leschte Schrëtt, passéieren spinAnimation
an d'Box Komponente sou datt Animatiounen an d'Chakra UI Apps bäigefüügt kënne ginn.
Säit Iwwergäng
Säittransitioune kënnen op eis Apps bäigefüügt ginn fir d'Benotzererfarung ze verbesseren wa se tëscht Säiten plënneren.
Déi folgend ass e Beispill vu wéi et mat Chakra UI z'erreechen ass:
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;
Fir Säitiwwergäng ze implementéieren, benotzt d'Iwwergangskomponente vum Chakra UI. De ScaleFade Iwwergank gëtt an der uewe genannter Codelinn benotzt.
W.e.g. Bescheed soen ScaleFade
iwwer de Wee vun Ärer Applikatioun sou datt den Iwwergank funktionéiere kann wéi Dir iwwer den Écran beweegt! Den Objet liwwert Donnéeën iwwer den aktuelle Wee, op deen Dir dann schéckt ScaleFade
Schlëssel Prop. InitialScale
an am Prop gi benotzt fir d'Startskala vum Iwwergang z'etabléieren an et ze maachen wann de Komponent ofgeliwwert gëtt.
An dësem Stéck hu mir e puer vun de Funktiounen a Fäegkeeten gekuckt déi Chakra UI ubitt a wéi et eis an eiser perfekter Erfahrung hëlleft. Mir hunn och exploréiert wéi d'Etabléiere vun Themenobjekter an d'Entwécklung vun globalen Stiler hëllefe fir d'Skalierbarkeet vun eisem System z'erhalen.
Wann Dir nach net hutt, Mir gleewen datt dësen Artikel Iech e puer Iddie ginn huet fir Ären Chakra UI Entwécklungsprozess ze streamline.
Hannerlooss eng Äntwert