A fejlesztők a Chakra UI-t tartják a leghasznosabb partnerüknek. Az online szolgáltatások összetevő-eszközkészleteként a Chakra UI megkönnyíti az átfogó alkalmazások hatékony létrehozását.
Hozzáférhetőségének és a WAI-ARIA-kompatibilitásnak köszönhetően a Chakra UI elemei egyszerűen testreszabhatók és átalakíthatók az API segítségével. Ez azonban csak a jéghegy csúcsa a fejlesztők számára kínált előnyök tekintetében.
Ebben a bejegyzésben közelebbről megvizsgáljuk a Chakra UI néhány fejlettebb funkcióját, és azt, hogy ezek hogyan segíthetnek abban, hogy programozóként produktívabbá váljon.
Mi az a Chakra UI?
A Chakra UI egy olyan összetevő eszközkészlet, amely segít a fejlesztőknek gyorsan hozzáférhető és újrafelhasználható felhasználói felület-összetevőket összeállítani webes alkalmazásaikhoz. A Reactre épül, és a stílusos rendszert használja a tematikus motorhoz.
A Chakra UI célja, hogy megkönnyítse a programozók számára a gyönyörű, reszponzív és hozzáférhető felhasználói felületek létrehozását minimális erőfeszítéssel. Az eszközkészlet számos felhasználásra kész komponenst tartalmaz, amelyeket úgy terveztek, hogy könnyen összeállíthatóak és bővíthetők legyenek.
A Chakra UI nyílt forráskódú, fejlesztését a Segment támogatja.
A Chakra UI telepítése
A következő parancsokat kell begépelnie a Chakra projektbe való beépítéséhez:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
A Chakra UI telepítése után be kell állítania a ChakraProvider-t az alkalmazás gyökerében. A használt keretrendszertől függően ez az index.jsx, index.tsx vagy app.jsx fájlban lehet.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Fejlett technikák a Chakra UI-ban
Valós idejű SVG-k generálása
Érdemes lehet dinamikusan frissíteni az SVG-ket, hogy az tükrözze a jelenlegi megjelenést, miközben új témákat hoz létre webhelye számára. Ez szükségessé teszi különálló SVG-k létrehozását a számos téma mindegyikéhez.
A Chakra UI viszont egy felhasználóbarátabb lehetőség. Használni a useColorMode
A Chakra UI-ban dinamikusan módosíthatjuk az SVG-ink kitöltési színét.
A UseColorMode csak a sötét mód megvalósítása után használható. Először használ sötét módot a Chakra UI-val? Ez a cikk megmutatja, hogyan lehet megfelelően működni.
A useColorMode
opció a sötét mód engedélyezése után érhető el.
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>
);
}
A fenti kód integrálja a useColorMode
hook és SVG, hogy dinamikussá tegyék őket. Használata useColorMode
lekérhetjük és módosíthatjuk a színmódot. Ha színt szeretne váltani, használja bármelyiket colorMode
vagy a toggleColor
Üzemmód funkció.
Csakra témák
A Chakra UI témái a következővel kerülnek alkalmazásra Stílusos rendszertéma specifikáció technika. A Chakra témái számos szempontot befolyásolhatnak, a színpalettától a térközig.
Csak importálnia kell a extendTheme
funkciót, miközben hozzáadja a kulcsokat az előre beállított tokenek módosításához. Nézzük meg ezt.
Csak létre kell hoznia a Theme.js
fájlt a kezdéshez.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Két további színt ad a téma objektumhoz, hogy élénkebbé és vonzóbbá tegye. A szoftver specifikációi szerint stílusjelölőket hozhat létre betűtípusokhoz, töréspontokhoz, betűméretekhez, oszlopszélességekhez stb.
A témaobjektum újonnan bevezetett speciális funkcióinak kihasználásához először telepítenie kell ChakraProvider
az alkalmazás gyökerében.
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;
Utána irányítod ChakraProvider
a korábban létrehozott témaobjektum használatához. A Chakra összes komponense márkaszíneket használhat.
Egyes projekteknél előfordulhat, hogy a Chakra alapvető összetevőinek megváltoztatására van szükség, ahelyett, hogy bármilyen módon módosítani kellene a stílust.
Példa a komponens stílus objektumra:
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: "",
},
}
Most csak módosítjuk a Button
és a Heading
alkatrészek.
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;
Megszabadulhatunk attól a határsugártól, amely alapértelmezés szerint be lett állítva a Button
eltávolításával baseStyle
. Módosíthatja a betűméretet és a betűtípus-elrendezést Heading
. A fenti példák segítségével megértheti, hogyan változtathatjuk meg a csakra összetevőinek standard stílusát.
A Chakra komponensek stílusának javítása vagy módosítása láthatóságot és ellenőrzést biztosít felhasználói felületeink megjelenése és működése felett.
Csakra és harmadik féltől származó komponensek
A Chakra lehetővé teszi a harmadik féltől származó modulok számára, hogy hasznot húzzanak stílusukból. Ennek eredményeként a harmadik féltől származó elemek és a Chakra UI kombinálása kevesebb szabadalmaztatott összetevő-burkolót igényel.
Az alábbi lista a Chakra gyár által támogatott HTML elemeket tartalmazza:
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>
);
}
Integráljuk a Next.js-t Image
komponens Chakra UI-val a fenti kódrészletben. Ezután felállítottunk a ChakraNextImage
komponenst, és ezen keresztül átadhatjuk Chakra stíluskellékeit Image
.
Animációk
Animációkat definiálhat a Chakra UI segítségével keyframes
segítő. Keyframes
vegyen be egy CSS kulcskeret definíciót, és adjon vissza egy objektumot, amelyet stílusokban használhat:
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>
);
}
az keyframes
asszisztens, létrehozhatja az itt látható animációt. Az animációs kellék lehetővé teszi, hogy animáljuk a Chakra UI összetevőit.
Utolsó lépésként adja át spinAnimation
a Box komponensbe, hogy animációkat adhasson hozzá a Chakra UI alkalmazásokhoz.
Oldalátmenetek
Oldalátmenetek hozzáadhatók alkalmazásainkhoz annak érdekében, hogy javítsák a felhasználói élményt az oldalak közötti váltás során.
A következő egy példa arra, hogyan lehet elérni ezt a Chakra UI-val:
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;
Az oldalátmenetek megvalósításához használja a Chakra UI átmeneti összetevőit. A fenti kódsorban a ScaleFade átmenet használatos.
Kérjük, értesítse ScaleFade
az alkalmazás elérési útjáról, hogy az átmenet a képernyőn való mozgás közben is működhessen! Az objektum adatokat szolgáltat az aktuális útvonalról, amelyet ezután elküldhet ScaleFade
kulcsfontosságú kelléke. InitialScale
és prop az átmenet kezdő léptékének meghatározására és annak megvalósítására szolgál, amikor a komponens renderelésre kerül.
Ebben a cikkben megvizsgáltunk néhány olyan funkciót és képességet, amelyet a Chakra UI kínál, és hogyan segít nekünk a tökéletes élményben. Azt is megvizsgáltuk, hogy a témaobjektumok létrehozása és a globális stílusok fejlesztése hogyan segítheti a rendszerünk méretezhetőségének fenntartását.
Ha még nem tette meg, úgy gondoljuk, hogy ez a cikk néhány ötletet adott a Chakra UI fejlesztési folyamatának egyszerűsítéséhez.
Hagy egy Válaszol