Arendajad leiavad, et Chakra kasutajaliides on nende kõige kasulikum partner. Veebiteenuste komponendi tööriistakomplektina muudab Chakra UI hõlpsaks tõhusalt kaasavate rakenduste loomise.
Tänu juurdepääsetavusele ja WAI-ARIA nõuetele vastavusele on Chakra kasutajaliidese elemente selle API abil lihtne kohandada ja ümber kujundada. See on aga vaid jäämäe tipp seoses eelistega, mida see arendajatele pakub.
Selles postituses vaatleme lähemalt mõnda Chakra kasutajaliidese täiustatud funktsiooni ja seda, kuidas need võivad aidata teil programmeerijana produktiivsemaks saada.
Mis on Chakra UI?
Chakra UI on komponentide tööriistakomplekt, mis aitab arendajatel kiiresti luua oma veebirakenduste jaoks juurdepääsetavaid ja korduvkasutatavaid kasutajaliidese komponente. See on üles ehitatud Reacti peale ja kasutab oma teemamootori jaoks stiilisüsteemi.
Chakra kasutajaliidese eesmärk on muuta programmeerijate jaoks lihtsaks ilusate, tundlike ja ligipääsetavate kasutajaliideste loomine minimaalse pingutusega. Tööriistakomplekt sisaldab laias valikus kasutusvalmis komponente, mis on loodud nii, et neid oleks lihtne koostada ja laiendada.
Chakra kasutajaliides on avatud lähtekoodiga ja selle arendamist sponsoreerib Segment.
Kuidas installida Chakra kasutajaliidest
Chakra oma projekti kaasamiseks peate tippima järgmised käsud:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Pärast Chakra kasutajaliidese installimist peate oma rakenduse juurtes konfigureerima ChakraProvider. Olenevalt kasutatavast raamistikust võib see olla failis index.jsx, index.tsx või app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Chakra kasutajaliidese täiustatud tehnikad
Reaalajas SVG-de genereerimine
Võimalik, et soovite oma SVG-sid dünaamiliselt värskendada, et kajastada praegust kujundust, luues samal ajal oma veebisaidile uusi teemasid. See nõuab iga teema jaoks eraldiseisvate SVG-de loomist.
Chakra UI seevastu on kasutajasõbralikum valik. Kasutades useColorMode
Chakra kasutajaliidese konksu abil saame dünaamiliselt muuta oma SVG-de täitevärvi.
UseColorMode'i saab kasutada ainult siis, kui tume režiim on rakendatud. Kas kasutate esimest korda Chakra kasutajaliidesega tumedat režiimi? See artikkel näitab teile, kuidas see korralikult tööle panna.
. useColorMode
valik on saadaval pärast tumeda režiimi lubamist.
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>
);
}
Ülaltoodud kood integreerib useColorMode
konks ja SVG, et muuta need dünaamiliseks. Kasutades useColorMode
saame hankida ja muuta värvirežiimi. Kui soovite värve vahetada, peaksite kasutama kumbagi colorMode
või toggleColor
Režiimi funktsioon.
Tšakrate teemad
Chakra kasutajaliidese teemasid rakendatakse kasutades Stiilitud süsteemiteema spetsifikatsioon tehnikat. Chakra teemad võivad mõjutada mitmesuguseid aspekte alates värvipaletist kuni vahekauguseni.
Peate lihtsalt importima extendTheme
funktsioon, lisades samal ajal võtmeid eelseadistuses olevate žetoonide muutmiseks. Vaatame seda.
Peate lihtsalt looma a Theme.js
alustamiseks faili.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
See lisab teemaobjektile veel kaks värvi, et muuta see elavamaks ja atraktiivsemaks. Vastavalt tarkvara spetsifikatsioonidele saate luua stiilimarkereid kirjatüüpide, katkestuspunktide, fondi suuruste, veergude laiuste ja muu jaoks.
Selle teemaobjekti äsja kasutusele võetud täiustatud funktsioonide kasutamiseks peate esmalt installima ChakraProvider
rakenduse juurtes.
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;
Pärast seda suunate ChakraProvider
et kasutada varem loodud teemaobjekti. Kõik Chakra komponendid võivad nüüd kasutada kaubamärgi värve.
Mõned projektid võivad vajada lihtsalt Chakra põhikomponentide stiili muutmist, selle asemel, et nõuda stiili muutmist.
Siin on komponendi stiiliobjekti näide:
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üüd muudame lihtsalt Button
ja Heading
osad.
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;
Saame vabaneda piiriraadiusest, mis oli vaikimisi määratud Button
selle eemaldades baseStyle
. Saate muuta fondi suurust ja kirjatüübi paigutust Heading
. Ülaltoodud näidete abil saate aru, kuidas saame Chakra komponentide standardset stiili muuta.
Chakra komponentide stiilide täiustamine või muutmine annab meile nähtavuse ja kontrolli meie kasutajaliideste välimuse ja toimimise üle.
Tšakra ja kolmanda osapoole komponendid
Chakra võimaldab kolmandate osapoolte moodulitel oma stiilist kasu saada. Selle tulemusena nõuab kolmanda osapoole elementide kombineerimine Chakra kasutajaliidesega vähem patenteeritud komponentide ümbriseid.
Järgmine on Chakra tehase toetatud HTML-elementide loend:
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>
);
}
Integreerime faili Next.js Image
komponent Chakra UI-ga ülaltoodud koodilõigul. Seejärel seadsime üles a ChakraNextImage
komponent ja selle kaudu saame edastada Chakra stiilis rekvisiite Image
.
Animatsioonid
Animatsioone saate määratleda Chakra kasutajaliidese abil keyframes
abistaja. Keyframes
võtke sisse CSS-i võtmekaadri definitsioon ja tagastage objekt, mida saate stiilides kasutada:
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>
);
}
kasutades keyframes
assistent, saate luua siin kuvatava animatsiooni. Animatsioonirekvisiit võimaldab meil animeerida Chakra kasutajaliidese komponente.
Viimase sammuna mööduge spinAnimation
kasti komponenti, et Chakra kasutajaliidese rakendustesse saaks lisada animatsioone.
Lehekülje üleminekud
Meie rakendustele võidakse lisada lehtede üleminekuid, et parandada kasutajakogemust lehtede vahel liikumisel.
Järgnev on näide selle kohta, kuidas seda Chakra UI abil saavutada:
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;
Leheüleminekute rakendamiseks kasutage Chakra kasutajaliidese üleminekukomponente. ScaleFade üleminekut kasutatakse ülaltoodud koodireal.
Palun teavitage ScaleFade
teie rakenduse tee kohta, et üleminek saaks toimida ekraanil liikudes! Objekt pakub andmeid praeguse tee kohta, mille saate seejärel saata ScaleFade
võti rekvisiit. InitialScale
ja in prop kasutatakse ülemineku algusskaala määramiseks ja selle toimumiseks komponendi renderdamisel.
Selles artiklis vaatlesime mõningaid funktsioone ja võimalusi, mida Chakra kasutajaliides pakub ning kuidas see aitab meil täiuslikku kogemust saada. Samuti oleme uurinud, kuidas teemaobjektide loomine ja globaalsete stiilide arendamine võib aidata säilitada meie süsteemi skaleeritavust.
Kui te pole seda veel teinud, siis usume, et see artikkel on andnud teile ideid oma Chakra kasutajaliidese arendusprotsessi sujuvamaks muutmiseks.
Jäta vastus