Innholdsfortegnelse[Gjemme seg][Forestilling]
Utviklere vil finne Chakra UI som deres mest nyttige partner. Som et komponentverktøy for nettjenester gjør Chakra UI det enkelt å konstruere inkluderende apper med effektivitet.
Som et resultat av tilgjengeligheten og WAI-ARIA-overholdelse, er Chakra UIs elementer enkle å tilpasse og re-tema ved hjelp av API-en. Dette er imidlertid bare toppen av isfjellet når det gjelder fordelene det gir utviklere.
I dette innlegget skal vi se nærmere på noen av de mer avanserte funksjonene til Chakra UI og hvordan de kan hjelpe deg med å bli mer produktiv som programmerer.
Hva er Chakra UI?
Chakra UI er et verktøysett for komponenter som hjelper utviklere raskt å bygge tilgjengelige og gjenbrukbare brukergrensesnittkomponenter for deres webapplikasjoner. Den er bygget på toppen av React og bruker det stilige systemet for sin temamotor.
Chakra UI sitt mål er å gjøre det enkelt for programmerere å lage vakre, responsive og tilgjengelige brukergrensesnitt med minimal innsats. Verktøysettet inneholder et bredt utvalg av ferdige komponenter som er designet for å være lett komponerbare og utvidbare.
Chakra UI er åpen kildekode, og utviklingen er sponset av Segment.
Hvordan installere Chakra UI
Du må skrive inn følgende kommandoer for å inkludere Chakra i prosjektet ditt:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Du må konfigurere ChakraProvider i roten av applikasjonen din etter å ha installert Chakra UI. Avhengig av rammeverket du bruker, kan dette være i filen index.jsx, index.tsx eller app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Avanserte teknikker i Chakra UI
Generer sanntids SVG-er
Det kan være lurt å oppdatere SVG-ene dine dynamisk for å gjenspeile dagens design mens du etablerer nye temaer for nettstedet ditt. Dette nødvendiggjør opprettelsen av distinkte SVG-er for hvert av de flere temaene.
Chakra UI, derimot, er et mer brukervennlig alternativ. Bruker useColorMode
hekte i Chakra UI, kan vi dynamisk endre fyllfargen til våre SVG-er.
UseColorMode kan bare brukes når mørk modus er implementert. Bruker du mørk modus med Chakra UI for første gang? Denne artikkelen vil vise deg hvordan du får den til å fungere ordentlig.
De useColorMode
alternativet er tilgjengelig etter at mørk modus er aktivert.
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>
);
}
Koden ovenfor integrerer useColorMode
hook og SVG for å gjøre dem dynamiske. Ved hjelp av useColorMode
vi kan hente og endre fargemodus. Hvis du vil bytte farger, bør du bruke enten colorMode
eller toggleColor
Modusfunksjon.
Chakra-temaer
Chakra UIs temaer brukes ved å bruke Stylet systemtema spesifikasjon teknikk. Temaer i Chakra kan påvirke en rekke aspekter, alt fra fargepaletter til mellomrom.
Du trenger bare å importere extendTheme
funksjon mens du legger til tastene for å endre tokens i forhåndsinnstillingen. La oss ta en titt på dette.
Du trenger bare å lage en Theme.js
fil for å komme i gang.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Den legger til to farger til temaobjektet for å gjøre det mer levende og tiltalende. I henhold til programvarespesifikasjonene kan du lage stilmarkører for skrifttyper, bruddpunkter, skriftstørrelser, kolonnebredder og mer.
For å dra nytte av de nylig introduserte avanserte funksjonene i dette temaobjektet, må du først installere ChakraProvider
i roten av applikasjonen.
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;
Etter det dirigerer du ChakraProvider
for å bruke temaobjektet du opprettet før. Alle Chakra-komponentene kan nå bruke merkefarger.
Noen prosjekter trenger kanskje bare å endre Chakras grunnleggende komponentstyling i stedet for å kreve en stilendring på noen måte.
Som et eksempel på komponentstilobjektet, her er det:
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å skal vi bare endre Button
og Heading
deler.
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 kan bli kvitt kantradiusen som ble satt som standard for Button
ved å fjerne den baseStyle
. Du kan endre skriftstørrelsen og skrifttypelayouten for Heading
. Ved å bruke eksemplene ovenfor kan du forstå hvordan vi kan endre standardstilen til Chakra-komponenter.
Å forbedre eller endre stilene til Chakra-komponentene gir oss synlighet og kontroll over utseendet og funksjonen til brukergrensesnittene våre.
Chakra og tredjepartskomponenter
Chakra lar tredjepartsmoduler dra nytte av stilen deres. Som et resultat krever å kombinere tredjepartselementer med Chakra UI færre proprietære komponentinnpakninger.
Følgende er en liste over HTML-elementene som støttes av Chakra-fabrikken:
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 integrerer Next.js Image
komponent med Chakra UI i kodebiten ovenfor. Deretter setter vi opp en ChakraNextImage
komponent, og gjennom den kan vi sende Chakras stilrekvisitter til Image
.
animasjoner
Du kan definere animasjoner ved å bruke Chakra UI-er keyframes
hjelper. Keyframes
ta inn en CSS keyframe-definisjon og returner et objekt du kan bruke i stiler:
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>
);
}
Bruke keyframes
assistent, kan du lage animasjonen du ser her. Animasjonsrekvisitten lar oss animere Chakra UI-komponenter.
Som siste trinn, bestå spinAnimation
inn i Box-komponenten slik at animasjoner kan legges til Chakra UI-appene.
Sideoverganger
Sideoverganger kan legges til appene våre for å forbedre brukeropplevelsen når de beveger seg mellom sider.
Følgende er et eksempel på hvordan du oppnår det med 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;
For å implementere sideoverganger, bruk overgangskomponentene fra Chakra UI. ScaleFade-overgangen brukes i kodelinjen ovenfor.
Vennligst gi beskjed ScaleFade
om applikasjonens vei slik at overgangen kan fungere mens du beveger deg over skjermen! Objektet gir data om gjeldende bane, som du deretter kan sende til ScaleFade
sin nøkkelrekvisitt. InitialScale
og i prop brukes til å etablere startskalaen for overgangen og for å få det til å skje når komponenten er gjengitt.
I dette stykket så vi på noen av funksjonene og egenskapene som Chakra UI tilbyr, og hvordan det hjelper oss i vår perfekte opplevelse. Vi har også utforsket hvordan etablering av temaobjekter og utvikling av globale stiler kan hjelpe til med å opprettholde skalerbarheten til systemet vårt.
Hvis du ikke allerede har gjort det, tror vi at denne artikkelen har gitt deg noen ideer for å effektivisere utviklingsprosessen for Chakra UI.
Legg igjen en kommentar