Vývojári považujú používateľské rozhranie Chakra za ich najužitočnejšieho partnera. Ako súprava komponentov pre online služby uľahčuje používateľské rozhranie Chakra efektívne vytváranie inkluzívnych aplikácií.
Vďaka svojej dostupnosti a súladu s WAI-ARIA sa prvky používateľského rozhrania Chakra dajú jednoducho prispôsobiť a prepracovať pomocou rozhrania API. Toto je však len špička ľadovca, pokiaľ ide o výhody, ktoré vývojárom ponúka.
V tomto príspevku sa bližšie pozrieme na niektoré pokročilejšie funkcie používateľského rozhrania Chakra a na to, ako vám môžu pomôcť stať sa produktívnejšími ako programátor.
Čo je to Chakra UI?
Chakra UI je súprava komponentov, ktorá pomáha vývojárom rýchlo vytvárať dostupné a opakovane použiteľné komponenty používateľského rozhrania pre ich webové aplikácie. Je postavený na Reacte a využíva štýlový systém pre svoj tematický engine.
Cieľom Chakra UI je uľahčiť programátorom vytváranie krásnych, citlivých a prístupných používateľských rozhraní s minimálnym úsilím. Sada nástrojov obsahuje širokú škálu komponentov pripravených na použitie, ktoré sú navrhnuté tak, aby sa dali ľahko skladať a rozširovať.
Chakra UI je open source a jeho vývoj je sponzorovaný spoločnosťou Segment.
Ako nainštalovať používateľské rozhranie Chakra
Na začlenenie čakry do vášho projektu budete musieť zadať nasledujúce príkazy:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Po nainštalovaní používateľského rozhrania Chakra musíte nakonfigurovať ChakraProvider v koreňovom adresári vašej aplikácie. V závislosti od rámca, ktorý používate, to môže byť vo vašom súbore index.jsx, index.tsx alebo app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Pokročilé techniky v používateľskom rozhraní čakry
Generovanie SVG v reálnom čase
Možno budete chcieť dynamicky aktualizovať svoje SVG tak, aby odrážali aktuálny dizajn a zároveň vytvárať nové témy pre vašu webovú stránku. To si vyžaduje vytvorenie samostatných súborov SVG pre každú z niekoľkých tém.
Chakra UI, na druhej strane, je užívateľsky príjemnejšia možnosť. Pomocou useColorMode
háčik v používateľskom rozhraní Chakra, môžeme dynamicky meniť farbu výplne našich SVG.
UseColorMode je možné použiť až po implementácii tmavého režimu. Prvýkrát používate tmavý režim s používateľským rozhraním Chakra? Tento článok vám ukáže, ako to urobiť správne.
useColorMode
možnosť je dostupná po zapnutí tmavého režimu.
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>
);
}
Vyššie uvedený kód integruje useColorMode
háčik a SVG, aby boli dynamické. Použitím useColorMode
môžeme načítať a zmeniť farebný režim. Ak chcete zmeniť farby, mali by ste použiť jednu z nich colorMode
alebo toggleColor
Funkcia režimu.
Témy čakier
Témy používateľského rozhrania čakry sa aplikujú pomocou Špecifikácia štýlovej systémovej témy technika. Témy v čakre môžu ovplyvniť rôzne aspekty, od palety farieb až po medzery.
Budete musieť iba importovať extendTheme
pri pridávaní kľúčov na úpravu tokenov v predvoľbe. Poďme sa na to pozrieť.
Stačí si vytvoriť a Theme.js
súbor, aby ste mohli začať.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
K tematickému objektu pridáva ďalšie dve farby, aby bol živší a príťažlivejší. Podľa špecifikácií softvéru môžete vytvárať značky štýlu pre typy písma, zarážky, veľkosti písma, šírky stĺpcov a ďalšie.
Aby ste mohli využívať výhody novo predstavených pokročilých funkcií v tomto objekte témy, musíte najprv nainštalovať ChakraProvider
v koreňovom adresári aplikácie.
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;
Potom budete režírovať ChakraProvider
použiť objekt témy, ktorý ste predtým vytvorili. Všetky čakrové komponenty môžu teraz používať značkové farby.
Niektoré projekty môžu potrebovať len zmeniť štýl základných komponentov čakry namiesto toho, aby vyžadovali akýmkoľvek spôsobom úpravu štýlu.
Ako príklad objektu štýlu komponentu tu je:
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: "",
},
}
Teraz len upravíme Button
a Heading
diely.
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;
Môžeme sa zbaviť hraničného polomeru, ktorý bol predvolene nastavený pre Button
odstránením jeho baseStyle
. Môžete zmeniť veľkosť písma a rozloženie typu písma Heading
. Pomocou vyššie uvedených príkladov môžete pochopiť, ako môžeme zmeniť štandardný štýl čakrových komponentov.
Vylepšovanie alebo zmena štýlov čakrových komponentov nám poskytuje viditeľnosť a kontrolu nad vzhľadom a fungovaním našich používateľských rozhraní.
Čakra a komponenty tretích strán
Čakra umožňuje modulom tretích strán ťažiť z ich štýlu. Výsledkom je, že kombinovanie prvkov tretích strán s používateľským rozhraním Chakra vyžaduje menej proprietárnych obalov komponentov.
Nasleduje zoznam prvkov HTML podporovaných továrňou na čakry:
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>
);
}
Integrujeme súbor Next.js Image
komponent s používateľským rozhraním Chakra v úryvku kódu vyššie. Potom sme nastavili a ChakraNextImage
komponentu a prostredníctvom nej môžeme odovzdať rekvizity štýlu čakry Image
.
animácie
Animácie môžete definovať pomocou používateľského rozhrania Chakra keyframes
pomocník. Keyframes
prijať definíciu kľúčovej snímky CSS a vrátiť objekt, ktorý môžete použiť v štýloch:
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>
);
}
Použitie keyframes
asistenta, môžete vytvoriť animáciu, ktorú vidíte tu. Animačná rekvizita nám umožňuje animovať komponenty používateľského rozhrania čakry.
Ako posledný krok prejdite spinAnimation
do komponentu Box, aby sa animácie mohli pridať do aplikácií používateľského rozhrania Chakra.
Prechody strán
Prechody stránok môžu byť pridané do našich aplikácií s cieľom zlepšiť používateľskú skúsenosť pri prechode medzi stránkami.
Nasleduje príklad, ako to dosiahnuť pomocou používateľského rozhrania 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;
Ak chcete implementovať prechody stránok, použite prechodové komponenty z používateľského rozhrania Chakra. Prechod ScaleFade sa používa vo vyššie uvedenom riadku kódu.
Prosím, informujte ScaleFade
o ceste vašej aplikácie, aby prechod fungoval pri pohybe po obrazovke! Objekt poskytuje údaje o aktuálnej ceste, ktorú potom môžete odoslať ScaleFade
kľúčová rekvizita. InitialScale
a in prop sa používajú na stanovenie počiatočnej mierky prechodu a na jeho uskutočnenie, keď je komponent vykreslený.
V tomto diele sme sa pozreli na niekoľko funkcií a schopností, ktoré ponúka používateľské rozhranie Chakra, a na to, ako nám pomáha pri našom perfektnom zážitku. Skúmali sme tiež, ako môže vytvorenie tematických objektov a vývoj globálnych štýlov pomôcť udržať škálovateľnosť nášho systému.
Ak ste tak ešte neurobili, veríme, že tento článok vám dal niekoľko nápadov na zefektívnenie procesu vývoja používateľského rozhrania Chakra.
Nechaj odpoveď