Hönnuðir munu finna Chakra UI sem gagnlegasta samstarfsaðila þeirra. Sem íhlutaverkfærasett fyrir netþjónustu gerir Chakra UI það auðvelt að smíða innifalin öpp með skilvirkni.
Sem afleiðing af aðgengi þess og WAI-ARIA samræmi eru þættir Chakra UI einfaldir að sérsníða og endurþema með því að nota API þess. Hins vegar er þetta aðeins toppurinn á ísjakanum varðandi þá kosti sem það býður þróunaraðilum.
Í þessari færslu munum við skoða nánar nokkra af fullkomnari eiginleikum Chakra UI og hvernig þeir geta hjálpað þér að verða afkastameiri sem forritari.
Hvað er Chakra UI?
Chakra UI er íhlutaverkfærasett sem hjálpar forriturum að smíða fljótt aðgengilega og endurnýtanlega notendaviðmótshluta fyrir vefforrit sín. Það er byggt ofan á React og notar stílkerfið fyrir þemavélina sína.
Markmið Chakra UI er að auðvelda forriturum að búa til falleg, móttækileg og aðgengileg notendaviðmót með lágmarks fyrirhöfn. Verkfærakistan inniheldur mikið úrval af tilbúnum íhlutum sem eru hönnuð til að vera auðvelt að setja saman og stækka.
Chakra UI er opinn uppspretta og þróun þess er styrkt af Segment.
Hvernig á að setja upp Chakra UI
Þú verður að slá inn eftirfarandi skipanir til að fella orkustöðina inn í verkefnið þitt:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Þú verður að stilla ChakraProvider í rót forritsins þíns eftir að þú hefur sett upp Chakra UI. Það fer eftir rammanum sem þú notar, þetta gæti verið í index.jsx, index.tsx eða app.jsx skránni þinni.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Háþróuð tækni í Chakra UI
Búa til rauntíma SVG
Þú gætir viljað uppfæra SVG myndirnar þínar á virkan hátt til að endurspegla núverandi hönnun á meðan þú setur upp ný þemu fyrir vefsíðuna þína. Þetta krefst þess að búa til sérstakar SVG fyrir hvert af nokkrum þemum.
Chakra UI er aftur á móti notendavænni valkostur. Með því að nota useColorMode
krók í Chakra UI, getum við breytt fyllingarlit SVGs okkar á virkan hátt.
UseColorMode er aðeins hægt að nota þegar dökk stilling er innleidd. Notarðu dökka stillingu með Chakra UI í fyrsta skipti? Þessi grein mun sýna þér hvernig á að fá það til að virka rétt.
The useColorMode
valmöguleikinn er tiltækur eftir að myrka stillingin hefur verið virkjuð.
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>
);
}
Ofangreindur kóði samþættir useColorMode
hook og SVG til að gera þá kraftmikla. Notar useColorMode
við getum sótt og breytt litastillingu. Ef þú vilt skipta um liti ættirðu að nota annað hvort colorMode
eða toggleColor
Mode virka.
Orkustöðvarþemu
Þemu HÍ Chakra eru notuð með því að nota Forskrift um stílað kerfisþema tækni. Þemu í orkustöðinni geta haft áhrif á ýmsa þætti, allt frá litatöflu til bils.
Þú þarft bara að flytja inn extendTheme
virka á meðan tökkunum er bætt við til að breyta táknum í forstillingunni. Við skulum kíkja á þetta.
Þú þarft bara að búa til a Theme.js
skrá til að byrja.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Það bætir tveimur litum í viðbót við þemahlutinn til að gera hann líflegri og aðlaðandi. Samkvæmt hugbúnaðarforskriftum geturðu búið til stílmerki fyrir leturgerðir, brotpunkta, leturstærð, dálkabreidd og fleira.
Til þess að nýta nýlega kynntu háþróaða eiginleikana í þessum þemahlut verður þú fyrst að setja upp ChakraProvider
undirrót umsóknarinnar.
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;
Eftir það leikstýrir þú ChakraProvider
til að nota þemahlutinn sem þú bjóst til áður. Allir Chakra hlutir geta nú notað vörumerkisliti.
Sum verkefni gætu þurft að breyta grunnhönnun Chakra frekar en að krefjast stílbreytinga á nokkurn hátt.
Sem dæmi um hluti stílhlutinn, hér er hann:
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: "",
},
}
Nú munum við bara breyta Button
og Heading
hlutar.
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;
Við getum losnað við landamæraradíusinn sem var sjálfgefið stilltur fyrir Button
með því að fjarlægja hana baseStyle
. Þú getur breytt leturstærð og leturgerð fyrir Heading
. Með því að nota ofangreind dæmi geturðu skilið hvernig við getum breytt stöðluðu útliti Chakra íhluta.
Með því að bæta eða breyta stílum orkustöðvaríhluta fáum við sýnileika og stjórn á útliti og virkni notendaviðmóta okkar.
Orkustöðvar og íhlutir þriðja aðila
Orkustöðin gerir einingar frá þriðja aðila kleift að njóta góðs af stíl þeirra. Þar af leiðandi þarf færri séríhluti umbúðir til að sameina þætti frá þriðja aðila með Chakra UI.
Eftirfarandi er listi yfir HTML þætti sem studdir eru af Chakra verksmiðjunni:
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>
);
}
Við samþættum Next.js Image
hluti með Chakra UI í kóðabútinum hér að ofan. Síðan settum við upp a ChakraNextImage
hluti, og í gegnum hann getum við sent stílleikmuni Chakra til Image
.
hreyfimyndir
Þú getur skilgreint hreyfimyndir með Chakra UI keyframes
hjálpar. Keyframes
taktu inn CSS lykilramma skilgreiningu og skilaðu hlut sem þú getur notað í stílum:
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>
);
}
Notkun á keyframes
aðstoðarmaður, þú getur búið til hreyfimyndina sem þú sérð hér. Hreyfimyndabúnaðurinn gerir okkur kleift að lífga Chakra UI hluti.
Sem síðasta skrefið, farðu framhjá spinAnimation
inn í Box íhlutinn svo hægt sé að bæta hreyfimyndum við Chakra UI öppin.
Síðuskipti
Síðubreytingum gæti verið bætt við öppin okkar til að bæta upplifun notandans þegar þeir fara á milli síðna.
Eftirfarandi er dæmi um hvernig á að ná því 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;
Til að innleiða síðuskipti, notaðu umbreytingarhlutana frá Chakra UI. ScaleFade umskiptin eru notuð í kóðalínunni hér að ofan.
Vinsamlegast látið vita ScaleFade
um leið forritsins þíns svo að umskiptin geti virkað þegar þú ferð yfir skjáinn! Hluturinn veitir gögn um núverandi slóð sem þú getur síðan sent á ScaleFade
lykilstoð. InitialScale
og í prop eru notuð til að ákvarða upphafsskala breytinganna og til að láta það gerast þegar íhluturinn er sýndur.
Í þessu verki skoðuðum við nokkra eiginleika og möguleika sem Chakra UI býður upp á og hvernig það hjálpar okkur í okkar fullkomnu upplifun. Við höfum líka kannað hvernig það að koma á fót þemahlutum og þróa alþjóðlega stíla gæti hjálpað til við að viðhalda sveigjanleika kerfisins okkar.
Ef þú hefur ekki gert það nú þegar, teljum við að þessi grein hafi gefið þér nokkrar hugmyndir til að hagræða þróunarferli Chakra UI.
Skildu eftir skilaboð