Utvecklare kommer att tycka att Chakra UI är deras mest användbara partner. Som en komponentverktygssats för onlinetjänster gör Chakra UI det enkelt att konstruera inkluderande appar med effektivitet.
Som ett resultat av dess tillgänglighet och WAI-ARIA-efterlevnad är Chakra UI:s element enkla att anpassa och ändra temat med hjälp av dess API. Detta är dock bara toppen av isberget när det gäller de fördelar det erbjuder utvecklare.
I det här inlägget kommer vi att titta närmare på några av de mer avancerade funktionerna i Chakra UI och hur de kan hjälpa dig att bli mer produktiv som programmerare.
Vad är Chakra UI?
Chakra UI är en komponentverktygssats som hjälper utvecklare att snabbt bygga tillgängliga och återanvändbara användargränssnittskomponenter för sina webbapplikationer. Den är byggd ovanpå React och använder det stiliserade systemet för sin temamotor.
Chakra UI:s mål är att göra det enkelt för programmerare att skapa vackra, lyhörda och tillgängliga användargränssnitt med minimal ansträngning. Verktygslådan innehåller ett brett utbud av färdiga att använda komponenter som är designade för att vara lätta att komponera och utöka.
Chakra UI är öppen källkod, och dess utveckling sponsras av Segment.
Hur man installerar Chakra UI
Du måste skriva följande kommandon för att införliva Chakra i ditt projekt:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Du måste konfigurera ChakraProvider i roten av din applikation efter att ha installerat Chakra UI. Beroende på vilket ramverk du använder kan detta finnas 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>
)
}
Avancerade tekniker i Chakra UI
Generera SVG i realtid
Du kanske vill uppdatera dina SVG:er för att återspegla den nuvarande designen samtidigt som du skapar nya teman för din webbplats. Detta kräver skapandet av distinkta SVG:er för vart och ett av de olika teman.
Chakra UI, å andra sidan, är ett mer användarvänligt alternativ. Använda useColorMode
haka i Chakra UI kan vi dynamiskt ändra fyllningsfärgen på våra SVG:er.
UseColorMode kan endast användas när mörkt läge är implementerat. Använder du mörkt läge med Chakra UI för första gången? Den här artikeln visar hur du får det att fungera korrekt.
Smakämnen useColorMode
alternativet är tillgängligt efter att mörkt läge har aktiverats.
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>
);
}
Ovanstående kod integrerar useColorMode
hook och SVG för att göra dem dynamiska. Använder sig av useColorMode
vi kan hämta och ändra färgläge. Om du vill byta färg bör du använda antingen colorMode
eller toggleColor
Lägesfunktion.
Chakra-teman
Chakra UI:s teman tillämpas med hjälp av Designad systemtemaspecifikation Metod. Teman i Chakra kan påverka en mängd olika aspekter, allt från färgpaletter till mellanrum.
Du behöver bara importera extendTheme
funktion medan du lägger till nycklar för att ändra tokens i förinställningen. Låt oss ta en titt på det här.
Du behöver bara skapa en Theme.js
fil för att komma igång.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Den lägger till ytterligare två färger till temaobjektet för att göra det mer levande och tilltalande. Enligt programvaruspecifikationerna kan du skapa stilmarkörer för typsnitt, brytpunkter, teckenstorlekar, kolumnbredder och mer.
För att kunna dra nytta av de nyligen introducerade avancerade funktionerna i detta temaobjekt måste du först installera ChakraProvider
i roten av applikationen.
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;
Efter det styr du ChakraProvider
för att använda temaobjektet du skapade tidigare. Alla chakrakomponenter kan nu använda märkesfärger.
Vissa projekt kanske bara behöver ändra Chakras grundläggande komponentstyling snarare än att kräva en stiländring på något sätt.
Som ett exempel på komponentstilsobjektet är det här:
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: "",
},
}
Nu ska vi bara ändra Button
och Heading
delar.
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 av med gränsradien som var inställd som standard för Button
genom att ta bort den baseStyle
. Du kan ändra teckenstorlek och typsnittslayout för Heading
. Med hjälp av ovanstående exempel kan du förstå hur vi kan ändra standardutformningen av chakrakomponenter.
Att förbättra eller ändra stilen på chakrakomponenter ger oss synlighet och kontroll över utseendet och funktionen hos våra användargränssnitt.
Chakra och komponenter från tredje part
Chakra tillåter tredjepartsmoduler att dra nytta av sin stil. Som ett resultat kräver kombinationen av tredjepartselement med Chakra UI färre proprietära komponentomslag.
Följande är en lista över HTML-element som stöds av Chakra-fabriken:
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 integrerar Next.js Image
komponent med Chakra UI i kodavsnittet ovan. Sedan satte vi upp en ChakraNextImage
komponent, och genom den kan vi skicka Chakras stilrekvisita till Image
.
animeringar
Du kan definiera animationer med Chakra UI:s keyframes
hjälpare. Keyframes
ta in en CSS-nyckelramsdefinition och returnera ett objekt som du kan använda i stilar:
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>
);
}
Använda keyframes
assistent kan du skapa animationen du ser här. Animationsrekvisiten låter oss animera Chakra UI-komponenter.
Som sista steg, passera spinAnimation
i Box-komponenten så att animationer kan läggas till i Chakra UI-apparna.
Sidövergångar
Sidövergångar kan läggas till i våra appar för att förbättra användarens upplevelse när de flyttar mellan sidor.
Följande är ett exempel på hur man uppnå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;
För att implementera sidövergångar, använd övergångskomponenterna från Chakra UI. ScaleFade-övergången används i ovanstående kodrad.
Vänligen meddela ScaleFade
om din applikations väg så att övergången kan fungera när du rör dig över skärmen! Objektet tillhandahåller data om den aktuella sökvägen, som du sedan kan skicka till ScaleFade
s nyckelrekvisita. InitialScale
och in prop används för att fastställa startskalan för övergången och för att få det att hända när komponenten renderas.
I det här stycket tittade vi på några av de funktioner och möjligheter som Chakra UI erbjuder och hur det hjälper oss i vår perfekta upplevelse. Vi har också utforskat hur etablering av temaobjekt och utveckling av globala stilar kan hjälpa till att upprätthålla skalbarheten i vårt system.
Om du inte redan har gjort det, tror vi att den här artikeln har gett dig några idéer för att effektivisera din Chakra UI-utvecklingsprocess.
Kommentera uppropet