Razvijalci bodo ugotovili, da je uporabniški vmesnik Chakra njihov najbolj uporaben partner. Kot sestavni komplet orodij za spletne storitve Chakra UI omogoča enostavno in učinkovito sestavljanje vključujočih aplikacij.
Zaradi njegove dostopnosti in skladnosti z WAI-ARIA je elemente uporabniškega vmesnika Chakra preprosto prilagoditi in ponovno tematizirati z uporabo API-ja. Vendar je to le vrh ledene gore glede prednosti, ki jih ponuja razvijalcem.
V tej objavi si bomo podrobneje ogledali nekatere naprednejše funkcije uporabniškega vmesnika Chakra in kako vam lahko pomagajo postati bolj produktivni kot programer.
Kaj je uporabniški vmesnik Chakra?
Chakra UI je komplet orodij za komponente, ki razvijalcem pomaga hitro zgraditi dostopne in večkrat uporabne komponente uporabniškega vmesnika za njihove spletne aplikacije. Zgrajen je na vrhu Reacta in uporablja stiliziran sistem za svoj tematski mehanizem.
Cilj Chakra UI je programerjem olajšati ustvarjanje lepih, odzivnih in dostopnih uporabniških vmesnikov z minimalnim naporom. Zbirka orodij vključuje široko paleto komponent, pripravljenih za uporabo, ki so zasnovane tako, da jih je enostavno sestaviti in razširiti.
Uporabniški vmesnik Chakra je odprtokoden, njegov razvoj pa sponzorira Segment.
Kako namestiti uporabniški vmesnik Chakra
Za vključitev Chakre v svoj projekt boste morali vnesti naslednje ukaze:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Po namestitvi uporabniškega vmesnika Chakra morate konfigurirati ChakraProvider v korenu vaše aplikacije. Odvisno od ogrodja, ki ga uporabljate, je to lahko v vaši datoteki index.jsx, index.tsx ali app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Napredne tehnike v uporabniškem vmesniku Chakra
Ustvarjanje SVG v realnem času
Morda boste želeli dinamično posodobiti svoje SVG-je, da bodo odražali trenutno zasnovo, hkrati pa vzpostaviti nove teme za vaše spletno mesto. To zahteva ustvarjanje ločenih SVG za vsako od več tem.
Uporabniški vmesnik Chakra je na drugi strani uporabniku prijaznejša možnost. Uporabljati useColorMode
kavelj v uporabniškem vmesniku Chakra, lahko dinamično spremenimo barvo polnila naših SVG.
UseColorMode je mogoče uporabiti samo, ko je implementiran temni način. Prvič uporabljate temni način z uporabniškim vmesnikom Chakra? Ta članek vam bo pokazal, kako ga pripraviti do pravilnega delovanja.
O useColorMode
možnost je na voljo, ko je omogočen temni način.
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>
);
}
Zgornja koda združuje useColorMode
kavelj in SVG, da postanejo dinamični. Uporaba useColorMode
lahko pridobimo in spremenimo barvni način. Če želite zamenjati barvo, uporabite eno od obeh colorMode
ali toggleColor
Funkcija načina.
Teme čaker
Teme uporabniškega vmesnika Chakra se uporabljajo z uporabo Specifikacija stilizirane sistemske teme tehnika. Teme v Chakri lahko vplivajo na različne vidike, od barvne palete do razmikov.
Samo uvoziti boste morali extendTheme
funkcijo, medtem ko dodajate tipke za spreminjanje žetonov v prednastavitvi. Oglejmo si to.
Samo ustvariti morate a Theme.js
datoteko za začetek.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Tematskemu predmetu doda še dve barvi, da postane bolj živahen in privlačen. V skladu s specifikacijami programske opreme lahko ustvarite slogovne oznake za pisave, prelomne točke, velikosti pisave, širine stolpcev in drugo.
Če želite izkoristiti novo uvedene napredne funkcije v tem objektu teme, morate najprej namestiti ChakraProvider
v korenu 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;
Po tem režirate ChakraProvider
za uporabo predmeta teme, ki ste ga ustvarili prej. Vse komponente čakre lahko zdaj uporabljajo barve blagovnih znamk.
Nekateri projekti bodo morda morali le spremeniti slog osnovnega sestavnega dela Chakre, namesto da bi kakor koli zahtevali spremembo sloga.
Kot primer predmeta sloga komponente je tukaj:
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: "",
},
}
Zdaj bomo samo spremenili Button
in Heading
deli.
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;
Lahko se znebimo mejnega polmera, ki je bil privzeto nastavljen za Button
z odstranitvijo njenega baseStyle
. Spremenite lahko velikost pisave in postavitev pisave za Heading
. Z uporabo zgornjih primerov lahko razumete, kako lahko spremenimo standardni slog komponent Chakra.
Izboljšanje ali spreminjanje stilov komponent Chakra nam zagotavlja vidnost in nadzor nad videzom in delovanjem naših uporabniških vmesnikov.
Čakra in komponente tretjih oseb
Chakra omogoča modulom tretjih oseb, da izkoristijo njihov slog. Posledično združevanje elementov tretjih oseb z uporabniškim vmesnikom Chakra zahteva manj lastniških ovojov komponent.
Sledi seznam elementov HTML, ki jih podpira tovarna 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
komponento z uporabniškim vmesnikom Chakra v zgornjem delčku kode. Nato smo postavili a ChakraNextImage
komponento, prek nje pa lahko posredujemo Chakrine stilske pripomočke Image
.
Animacije
Animacije lahko definirate z uporabniškim vmesnikom Chakra keyframes
pomočnik. Keyframes
vzemite definicijo ključne sličice CSS in vrnite predmet, ki ga lahko uporabite v slogih:
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>
);
}
Uporaba keyframes
pomočnik, lahko ustvarite animacijo, ki jo vidite tukaj. Animacijski rekvizit nam omogoča animiranje komponent uporabniškega vmesnika Chakra.
Kot zadnji korak, mimo spinAnimation
v komponento Box, tako da se lahko dodajo animacije aplikacijam uporabniškega vmesnika Chakra.
Prehodi strani
Prehodi strani so lahko dodani v naše aplikacije, da bi izboljšali uporabniško izkušnjo, ko se premikajo med stranmi.
Sledi primer, kako to doseči z uporabniškim vmesnikom 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;
Za izvedbo prehodov strani uporabite komponente prehoda iz uporabniškega vmesnika Chakra. Prehod ScaleFade je uporabljen v zgornji vrstici kode.
Prosimo, obvestite ScaleFade
o poti vaše aplikacije, tako da lahko prehod deluje, ko se premikate po zaslonu! Objekt zagotavlja podatke o trenutni poti, ki jih lahko nato pošljete ScaleFade
ključni rekvizit. InitialScale
in in prop se uporabljata za določitev začetne lestvice prehoda in za njegovo izvedbo, ko je komponenta upodobljena.
V tem delu smo si ogledali nekaj funkcij in zmožnosti, ki jih ponuja uporabniški vmesnik Chakra UI, in kako nam pomaga pri naši popolni izkušnji. Raziskali smo tudi, kako lahko vzpostavitev predmetov teme in razvoj globalnih slogov pomagata pri ohranjanju razširljivosti našega sistema.
Če tega še niste storili, verjamemo, da vam je ta članek dal nekaj idej za poenostavitev procesa razvoja uporabniškega vmesnika Chakra.
Pustite Odgovori