Zhvilluesit do ta shohin Chakra UI si partnerin e tyre më të dobishëm. Si një vegël përbërëse për shërbimet në internet, Chakra UI e bën të lehtë ndërtimin e aplikacioneve gjithëpërfshirëse me efikasitet.
Si rezultat i aksesueshmërisë së tij dhe pajtueshmërisë me WAI-ARIA, elementët e Chakra UI janë të thjeshta për t'u personalizuar dhe ri-temëzuar duke përdorur API-në e tij. Megjithatë, kjo është vetëm maja e ajsbergut në lidhje me avantazhet që u ofron zhvilluesve.
Në këtë postim, ne do të hedhim një vështrim më të afërt në disa nga veçoritë më të avancuara të Chakra UI dhe se si ato mund t'ju ndihmojnë të bëheni më produktivë si programues.
Çfarë është Chakra UI?
Chakra UI është një paketë veglash përbërëse që i ndihmon zhvilluesit të ndërtojnë shpejt komponentë të ndërfaqes së përdoruesit të aksesueshëm dhe të ripërdorshëm për aplikacionet e tyre në ueb. Është ndërtuar në krye të React dhe përdor sistemin e stiluar për motorin e tij të tematikës.
Qëllimi i Chakra UI është t'ua lehtësojë programuesve krijimin e ndërfaqeve të bukura, të përgjegjshme dhe të aksesueshme të përdoruesit me përpjekje minimale. Paketa e veglave përfshin një gamë të gjerë komponentësh të gatshëm për përdorim që janë projektuar të jenë lehtësisht të kompozueshëm dhe të zgjerueshëm.
Chakra UI është me burim të hapur dhe zhvillimi i tij sponsorizohet nga Segment.
Si të instaloni Chakra UI
Ju do të duhet të shkruani komandat e mëposhtme për të përfshirë Chakra në Projektin tuaj:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Ju duhet të konfiguroni ChakraProvider në rrënjën e aplikacionit tuaj pas instalimit të Chakra UI. Në varësi të kornizës që përdorni, kjo mund të jetë në skedarin tuaj index.jsx, index.tsx ose app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Teknika të avancuara në UI Chakra
Gjenerimi i SVG-ve në kohë reale
Ju mund të dëshironi të përditësoni në mënyrë dinamike SVG-të tuaja për të pasqyruar dizajnin aktual ndërsa krijoni tema të reja për faqen tuaj të internetit. Kjo kërkon krijimin e SVG-ve të veçanta për secilën nga disa tema.
Chakra UI, nga ana tjetër, është një opsion më miqësor për përdoruesit. Duke perdorur useColorMode
fiksohemi në Chakra UI, ne mund të ndryshojmë në mënyrë dinamike ngjyrën e mbushjes së SVG-ve tona.
UseColorMode mund të përdoret vetëm pasi të zbatohet modaliteti i errët. Përdorni modalitetin e errët me Chakra UI për herë të parë? Ky artikull do t'ju tregojë se si ta bëni atë të funksionojë siç duhet.
La useColorMode
opsioni është i disponueshëm pasi të jetë aktivizuar modaliteti i errë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>
);
}
Kodi i mësipërm integron useColorMode
grep dhe SVG për t'i bërë ato dinamike. Duke përdorur useColorMode
ne mund të marrim dhe të ndryshojmë modalitetin e ngjyrave. Nëse dëshironi të ndërroni ngjyrat, duhet të përdorni njërën ose tjetrën colorMode
ose toggleColor
Funksioni i modalitetit.
Temat e çakrave
Temat e Chakra UI aplikohen duke përdorur Specifikimi i temës së sistemit të stiluar teknikë. Temat në Chakra mund të ndikojnë në një sërë aspektesh, duke filluar nga paleta e ngjyrave te hapësira.
Thjesht do t'ju duhet të importoni extendTheme
funksiononi ndërsa shtoni tastet për të modifikuar shenjat në paracaktuar. Le t'i hedhim një sy kësaj.
Ju vetëm duhet të krijoni një Theme.js
skedar për të filluar.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Ai shton dy ngjyra të tjera në objektin e temës për ta bërë atë më të gjallë dhe tërheqës. Sipas specifikimeve të softuerit, mund të krijoni shënues stilesh për shkronjat, pikat e ndërprerjes, madhësitë e shkronjave, gjerësinë e kolonave dhe më shumë.
Për të përfituar nga veçoritë e avancuara të prezantuara rishtazi në këtë objekt teme, fillimisht duhet të instaloni ChakraProvider
në rrënjë të aplikacionit.
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;
Pas kësaj, ju drejtoni ChakraProvider
për të përdorur objektin e temës që keni krijuar më parë. Të gjithë përbërësit e Chakrës tani mund të përdorin ngjyra të markës.
Disa projekte mund të kenë nevojë thjesht për të ndryshuar stilin e komponentit bazë të Chakrës në vend që të kërkojnë një modifikim stili në çfarëdo mënyre.
Si shembull i objektit të stilit të komponentit, këtu është:
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: "",
},
}
Tani, ne thjesht do ta modifikojmë Button
Heading
pjesë.
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;
Ne mund të heqim qafe rreze-kufi që ishte vendosur si parazgjedhje për Button
duke hequr atë baseStyle
. Ju mund të ndryshoni madhësinë e shkronjave dhe paraqitjen e shkronjave për Heading
. Duke përdorur shembujt e mësipërm, mund të kuptoni se si mund të ndryshojmë stilin standard të komponentëve të Chakrës.
Përmirësimi ose ndryshimi i stileve të komponentëve të Chakrës na siguron dukshmëri dhe kontroll mbi pamjen dhe funksionimin e ndërfaqeve tona të përdoruesit.
Chakra dhe komponentët e palëve të treta
Chakra lejon që modulet e palëve të treta të përfitojnë nga stili i tyre. Si rezultat, kombinimi i elementeve të palëve të treta me Chakra UI kërkon më pak mbështjellës përbërës të pronarit.
Më poshtë është një listë e elementeve HTML të mbështetur nga fabrika e 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>
);
}
Ne integrojmë Next.js Image
komponent me ndërfaqen e përdoruesit të Chakra në fragmentin e kodit të mësipërm. Më pas, kemi ngritur një ChakraNextImage
komponent, dhe nëpërmjet tij, ne mund t'i kalojmë mbështetësit e stilit të Chakrës Image
.
Animime
Ju mund të përcaktoni animacione duke përdorur ndërfaqen e Chakra keyframes
ndihmës. Keyframes
merrni një përkufizim të kornizave kyçe CSS dhe ktheni një objekt që mund të përdorni në stile:
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>
);
}
Përdorimi keyframes
asistent, mund të krijoni animacionin që shihni këtu. Mbështetja e animacionit na lejon të animojmë komponentët e Chakra UI.
Si hap i fundit, kaloni spinAnimation
në komponentin Box në mënyrë që animacionet të mund të shtohen në aplikacionet Chakra UI.
Tranzicionet e faqeve
Kalimet e faqeve mund të shtohen në aplikacionet tona për të përmirësuar përvojën e përdoruesit kur lëvizin midis faqeve.
Më poshtë është një shembull se si ta arrini atë me 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;
Për të zbatuar tranzicionet e faqeve, përdorni komponentët e tranzicionit nga Chakra UI. Tranzicioni ScaleFade përdoret në rreshtin e mësipërm të kodit.
Ju lutemi njoftoni ScaleFade
në lidhje me rrugën e aplikacionit tuaj në mënyrë që tranzicioni të funksionojë ndërsa lëvizni nëpër ekran! Objekti ofron të dhëna për shtegun aktual, të cilit më pas mund t'i dërgoni ScaleFade
mbështetëse kryesore. InitialScale
dhe in prop përdoren për të vendosur shkallën fillestare të tranzicionit dhe për ta bërë atë të ndodhë kur komponenti të jepet.
Në këtë pjesë, ne shikuam disa nga veçoritë dhe aftësitë që ofron Chakra UI dhe si na ndihmon në përvojën tonë të përsosur. Ne kemi eksploruar gjithashtu se si krijimi i objekteve tematike dhe zhvillimi i stileve globale mund të ndihmojnë në ruajtjen e shkallëzueshmërisë së sistemit tonë.
Nëse nuk e keni bërë tashmë, ne besojmë se ky artikull ju ka dhënë disa ide për të përmirësuar procesin tuaj të zhvillimit të Chakra UI.
Lini një Përgjigju