Programeri će smatrati da je korisničko sučelje Chakra njihov najkorisniji partner. Kao sastavni alat za online usluge, Chakra UI olakšava izradu inkluzivnih aplikacija s učinkovitošću.
Kao rezultat njegove pristupačnosti i usklađenosti s WAI-ARIA-om, elemente korisničkog sučelja Chakra jednostavno je prilagoditi i ponovno tematizirati pomoću API-ja. Međutim, ovo je samo vrh ledenog brijega u pogledu prednosti koje nudi programerima.
U ovom ćemo postu pobliže pogledati neke od naprednijih značajki korisničkog sučelja Chakra i kako vam one mogu pomoći da postanete produktivniji kao programer.
Što je Chakra UI?
Chakra UI je komplet alata za komponente koji pomaže programerima da brzo izgrade dostupne komponente korisničkog sučelja koje se mogu ponovno koristiti za njihove web aplikacije. Izgrađen je na temelju Reacta i koristi stilizirani sustav za svoj pokretač tema.
Cilj Chakra UI je olakšati programerima stvaranje prekrasnih, responzivnih i pristupačnih korisničkih sučelja uz minimalan napor. Komplet alata uključuje široku paletu komponenti spremnih za korištenje koje su dizajnirane tako da ih je lako sastaviti i proširiti.
Chakra UI je otvorenog koda, a njegov razvoj sponzorira Segment.
Kako instalirati Chakra UI
Morat ćete upisati sljedeće naredbe da uključite Chakru u svoj projekt:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Morate konfigurirati ChakraProvider u korijenu vaše aplikacije nakon instaliranja Chakra UI. Ovisno o okviru koji koristite, to može biti u vašoj datoteci index.jsx, index.tsx ili app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Napredne tehnike u korisničkom sučelju Chakra
Generiranje SVG-ova u stvarnom vremenu
Možda ćete htjeti dinamički ažurirati svoje SVG-ove kako bi odražavali trenutni dizajn dok postavljate nove teme za svoju web stranicu. Ovo zahtijeva stvaranje različitih SVG-ova za svaku od nekoliko tema.
Sučelje Chakra, s druge strane, opcija je lakša za korištenje. Koristiti useColorMode
kuka u Chakra UI, možemo dinamički mijenjati boju ispune naših SVG-ova.
UseColorMode može se koristiti samo nakon implementacije tamnog načina rada. Prvi put koristite tamni način rada s Chakra UI? Ovaj će vam članak pokazati kako ga natjerati da ispravno radi.
Korištenje električnih romobila ističe useColorMode
opcija je dostupna nakon što je tamni način rada omogućen.
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>
);
}
Gornji kod integrira useColorMode
kuka i SVG kako bi ih učinili dinamičnim. Korištenje useColorMode
možemo dohvatiti i promijeniti način boje. Ako želite mijenjati boje, trebali biste koristiti bilo koju colorMode
ili toggleColor
Funkcija načina rada.
Teme o čakrama
Teme korisničkog sučelja Chakra primjenjuju se pomoću Stilizirana specifikacija teme sustava tehnika. Teme u Chakri mogu utjecati na različite aspekte, od palete boja do razmaka.
Samo ćete morati uvesti extendTheme
funkciju dok dodajete tipke za izmjenu tokena u unaprijed postavljenoj postavci. Pogledajmo ovo.
Vi samo trebate stvoriti Theme.js
datoteku za početak.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Dodaje još dvije boje objektu teme kako bi ga učinio življim i privlačnijim. U skladu sa specifikacijama softvera, možete stvoriti markere stilova za slova, prijelomne točke, veličine fonta, širine stupaca i još mnogo toga.
Kako biste iskoristili prednosti novouvedenih naprednih značajki u ovom objektu teme, prvo morate instalirati ChakraProvider
u korijenu aplikacije.
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;
Nakon toga ti režiraš ChakraProvider
koristiti objekt teme koji ste prije stvorili. Sve komponente Chakre sada mogu koristiti boje robne marke.
Neki projekti mogu samo trebati promijeniti stil Chakrine osnovne komponente umjesto da zahtijevaju modifikaciju stila na bilo koji način.
Kao primjer objekta stila komponente, evo ga:
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: "",
},
}
Sada ćemo samo modificirati Button
i Heading
dijelova.
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;
Možemo se riješiti graničnog radijusa koji je postavljen prema zadanim postavkama za Button
uklanjanjem njenog baseStyle
. Možete promijeniti veličinu fonta i raspored slova za Heading
. Koristeći gornje primjere, možete razumjeti kako možemo promijeniti standardni stil komponenti Čakre.
Poboljšanje ili mijenjanje stilova komponenti Chakra daje nam vidljivost i kontrolu nad izgledom i funkcioniranjem naših korisničkih sučelja.
Čakra i komponente trećih strana
Chakra omogućuje modulima trećih strana da iskoriste njihov stil. Kao rezultat toga, kombiniranje elemenata treće strane s korisničkim sučeljem Chakra zahtijeva manje omotača vlasničkih komponenti.
Slijedi popis HTML elemenata koje podržava tvornica Chakra:
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>
);
}
Integriramo Next.js Image
komponenta s korisničkim sučeljem Chakra u gornjem isječku koda. Zatim smo postavili a ChakraNextImage
komponentu, a kroz nju možemo proslijediti Chakrine stilske rekvizite Image
.
Animacije
Možete definirati animacije koristeći Chakra UI keyframes
pomagač. Keyframes
uzmite definiciju CSS ključnog okvira i vratite objekt koji možete koristiti u stilovima:
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>
);
}
Korištenje keyframes
pomoćnika, možete stvoriti animaciju koju vidite ovdje. Rekvizit za animaciju omogućuje nam animiranje komponenti korisničkog sučelja Chakra.
Kao posljednji korak, prođite spinAnimation
u komponentu Box kako bi se animacije mogle dodati u aplikacije Chakra UI.
Prijelazi stranica
Prijelazi stranica mogu se dodati našim aplikacijama kako bi se poboljšalo korisničko iskustvo kada se kreću između stranica.
Slijedi primjer kako to postići pomoću korisničkog sučelja Chakra:
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;
Kako biste implementirali prijelaze stranica, koristite komponente prijelaza iz korisničkog sučelja Chakra. Prijelaz ScaleFade koristi se u gornjem retku koda.
Obavijestite ScaleFade
o putanji vaše aplikacije kako bi prijelaz mogao funkcionirati dok se krećete zaslonom! Objekt daje podatke o trenutnoj stazi, na koje možete poslati ScaleFade
ključni podupirač. InitialScale
i u prop koriste se za uspostavljanje početne ljestvice prijelaza i da se to dogodi kada se komponenta renderira.
U ovom smo članku pogledali nekoliko značajki i mogućnosti koje Chakra UI nudi i kako nam pomaže u našem savršenom iskustvu. Također smo istražili kako uspostavljanje tematskih objekata i razvoj globalnih stilova može pomoći u održavanju skalabilnosti našeg sustava.
Ako već niste, vjerujemo da vam je ovaj članak dao neke ideje za pojednostavljenje procesa razvoja korisničkog sučelja Chakra.
Ostavi odgovor