I sviluppatori trovanu Chakra UI per esse u so cumpagnu più utile. Cum'è un toolkit di cumpunenti per i servizii in linea, Chakra UI facilita a custruzzione di app inclusive cù efficienza.
In u risultatu di a so accessibilità è a conformità WAI-ARIA, l'elementi di Chakra UI sò simplici per persunalizà è re-tema cù a so API. Tuttavia, questu hè solu a punta di l'iceberg in quantu à i vantaghji chì offre à i sviluppatori.
In questu post, daremu un ochju più vicinu à alcune di e funzioni più avanzate di Chakra UI è cumu ponu aiutà à diventà più pruduttivu cum'è programatore.
Cosa hè Chakra UI?
Chakra UI hè un toolkit di cumpunenti chì aiuta i sviluppatori à custruisce rapidamente cumpunenti di l'interfaccia d'utilizatore accessibili è riutilizzabili per e so applicazioni web. Hè custruitu nantu à React è usa u sistema di stile per u so mutore di tematiche.
L'obiettivu di Chakra UI hè di fà faciule per i programatori di creà interfacce d'utilizatori belli, responsive è accessibili cù u minimu sforzu. U toolkit include una larga varietà di cumpunenti pronti per l'usu chì sò pensati per esse facilmente cumponibili è estensibili.
Chakra UI hè open source, è u so sviluppu hè sponsorizatu da Segment.
Cumu installà Chakra UI
Avete da scrive i seguenti cumandamenti per incorpore Chakra in u vostru Prughjettu:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Duvete cunfigurà u ChakraProvider à a radica di a vostra applicazione dopu avè installatu Chakra UI. Sicondu u quadru chì utilizate, questu pò esse in u vostru schedariu index.jsx, index.tsx, o app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Tecniche Avanzate in Chakra UI
Generazione di SVG in tempu reale
Pudete vulete aghjurnà dinamicamente i vostri SVG per riflette u disignu attuale mentre stabiliscenu novi temi per u vostru situ web. Questu hè necessariu a creazione di SVG distinti per ognunu di i diversi temi.
Chakra UI, invece, hè una opzione più amichevule. Utilizendu u useColorMode
ganciu in Chakra UI, pudemu cambià dinamicamente u culore di riempimentu di i nostri SVG.
UseColorMode pò esse usatu solu una volta chì u modu scuru hè implementatu. Aduprà u modu scuru cù Chakra UI per a prima volta? Questu articulu vi mostrarà cumu per fà u travagliu bè.
lu useColorMode
L'opzione hè dispunibule dopu chì u modu scuru hè statu attivatu.
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>
);
}
U codice sopra integra u useColorMode
ganciu è SVG per renderli dinamichi. Utilizendu useColorMode
pudemu ritruvà è mudificà u modu di culore. Se vulete cambià i culori, duvete aduprà sia colorMode
o di u toggleColor
Funzione di modu.
Temi di Chakra
I temi di l'interfaccia utente di Chakra sò applicati usendu Specificazione di u tema di u sistema stilatu tecnica. I temi in Chakra ponu influenzà una varietà di aspetti chì varienu da a paleta di culore à a spaziatura.
Vi tuccherà solu à impurtà u extendTheme
funzione mentre aghjunghje e chjave per mudificà i tokens in u preset. Fighjemu un ochju à questu.
Basta à creà un Theme.js
u schedariu per cumincià.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Aghjunghje dui culori più à l'ughjettu tematicu per rende più vibrante è attraente. Sicondu e specificazioni di u software, pudete creà marcatori di stile per caratteri, punti di rottura, dimensioni di font, larghezza di colonna, è più.
Per prufittà di e funzioni avanzate di novu introdutte in questu ughjettu tematicu, avete prima installatu ChakraProvider
à a radica di l'applicazione.
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;
Dopu à quessa, diretta ChakraProvider
per utilizà l'ughjettu tematicu chì avete creatu prima. Tutti i cumpunenti Chakra ponu avà aduprà culori di marca.
Certi prughjetti puderanu solu avè bisognu di cambià u stilu di u cumpunente di basa di Chakra piuttostu cà di dumandà una mudificazione di stile in ogni modu.
Cum'è un esempiu di l'ughjettu di stile di cumpunenti, quì hè:
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: "",
},
}
Avà, avemu da solu mudificà u Button
e Heading
parti.
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;
Pudemu sbarazzarsi di u raghju di u cunfini chì hè statu stabilitu per difettu per u Button
sguassendu u so baseStyle
. Pudete mudificà a dimensione di u carattere è u layout di carattere per u Heading
. Utilizendu l'esempii sopra, pudete capisce cumu pudemu cambià u stilu standard di cumpunenti Chakra.
A rinfurzà o l'alterazione di i stili di i cumpunenti Chakra ci furnisce visibilità è cuntrollu di l'apparenza è u funziunamentu di e nostre interfacce d'utilizatore.
Chakra è cumpunenti di terzu
Chakra permette à i moduli di terzu di prufittà di u so stile. In u risultatu, cumminendu elementi di terzu cù Chakra UI richiede menu wrappers di cumpunenti proprietarii.
Questa hè una lista di l'elementi HTML supportati da a fabbrica 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>
);
}
Integremu u Next.js Image
cumpunente cù Chakra UI in u snippet di codice sopra. Allora, avemu stallatu a ChakraNextImage
cumpunente, è attraversu lu, pudemu passà i puntelli di stile di Chakra à Image
.
animazione
Pudete definisce l'animazioni cù l'interfaccia utente di Chakra keyframes
aiutu. Keyframes
pigliate una definizione di fotogramma chjave CSS è torna un ughjettu chì pudete aduprà in stili:
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>
);
}
cù u keyframes
assistente, pudete creà l'animazione chì vede quì. U prop di animazione ci permette di animà i cumpunenti Chakra UI.
Cum'è l'ultimu passu, passa spinAnimation
in u cumpunente Box per chì l'animazioni ponu esse aghjuntu à l'applicazioni Chakra UI.
Transizioni di pagina
E transizioni di pagina ponu esse aghjuntu à e nostre app per migliurà l'esperienza di l'utilizatori quandu si move trà e pagine.
U seguitu hè un esempiu di cumu uttene cù 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;
Per implementà e transizioni di pagina, utilizate i cumpunenti di transizione da Chakra UI. A transizione ScaleFade hè aduprata in a linea di codice sopra.
Per piacè avvisate ScaleFade
circa u percorsu di a vostra applicazione in modu chì a transizione pò funziunà cumu si move nantu à u screnu! L'ughjettu furnisce dati nantu à u percorsu attuale, chì pudete mandà à ScaleFade
u punteddu chjave di l'. InitialScale
è in prop sò usati per stabilisce a scala iniziale di a transizione è per fà accade quandu u cumpunente hè renditu.
In questu pezzu, avemu vistu un pocu di e funzioni è capacità chì Chakra UI offre è cumu ci aiuta in a nostra sperienza perfetta. Avemu ancu esploratu cumu stabilisce l'uggetti tematichi è u sviluppu di stili globale puderia aiutà à mantene a scalabilità di u nostru sistema.
Se ùn avete micca digià, Cridemu chì questu articulu vi hà datu alcune idee per simplificà u vostru prucessu di sviluppu Chakra UI.
Lascia un Audiolibro