Програмерите ќе сметаат дека Chakra UI е нивниот најкорисен партнер. Како комплет алатки за компоненти за онлајн услуги, Chakra UI го олеснува создавањето инклузивни апликации со ефикасност.
Како резултат на неговата пристапност и усогласеноста со WAI-ARIA, елементите на Chakra UI се едноставни за приспособување и претематирање со помош на неговиот API. Сепак, ова е само врвот на ледениот брег во однос на предностите што им ги нуди на програмерите.
Во оваа објава, ќе погледнеме подетално некои од понапредните функции на Chakra UI и како тие можат да ви помогнат да станете попродуктивни како програмер.
Што е интерфејс на чакра?
Chakra UI е комплет алатки за компоненти што им помага на програмерите брзо да изградат компоненти на кориснички интерфејс достапни и повеќекратно за нивните веб-апликации. Изграден е на врвот на React и го користи стилизираниот систем за својата тематска машина.
Целта на Chakra UI е да им олесни на програмерите да создаваат убави, одговорни и достапни кориснички интерфејси со минимален напор. Комплетот со алатки вклучува широк спектар на компоненти готови за употреба кои се дизајнирани да бидат лесно компонирачки и растегливи.
Chakra UI е со отворен код, а неговиот развој е спонзориран од Segment.
Како да инсталирате интерфејс на Чакра
Ќе треба да ги напишете следните команди за да ја вклучите чакрата во вашиот проект:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Мора да го конфигурирате ChakraProvider во коренот на вашата апликација откако ќе го инсталирате Chakra UI. Во зависност од рамката што ја користите, ова може да биде во вашата датотека index.jsx, index.tsx или app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Напредни техники во интерфејсот на чакра
Генерирање SVG во реално време
Можеби ќе сакате динамично да ги ажурирате вашите SVG за да го одразуваат тековниот дизајн додека воспоставувате нови теми за вашата веб-локација. Ова бара создавање на различни SVG за секоја од неколкуте теми.
Од друга страна, интерфејсот на чакра е попогодна опција. Користење на useColorMode
закачете го интерфејсот на Чакра, можеме динамички да ја смениме бојата на полнењето на нашите SVG.
UseColorMode може да се користи само откако ќе се имплементира темниот режим. Користите темниот режим со Chakra UI за прв пат? Оваа статија ќе ви покаже како да ја натерате да работи правилно.
на useColorMode
опцијата е достапна откако ќе се овозможи темниот режим.
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>
);
}
Горенаведениот код го интегрира useColorMode
кука и SVG за да ги направат динамични. Користење на useColorMode
можеме да добиеме и да го смениме режимот на боја. Ако сакате да ги менувате боите, треба да користите или colorMode
или toggleColor
Функција на режим.
Теми за чакра
Темите на Чакра UI се применуваат со користење на Стилизирана системска тема Спецификација техника. Темите во чакра може да влијаат на различни аспекти кои се движат од палетата на бои до растојанието.
Ќе треба само да го увезете extendTheme
функционира додека ги додавате копчињата за менување токени во претходно поставените. Ајде да го погледнеме ова.
Треба само да креирате а Theme.js
датотека за да започнете.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Додава уште две бои на тематскиот објект за да го направи поживописен и привлечен. Според спецификациите на софтверот, можете да креирате маркери за стилови за букви, точки на прекин, големини на фонтови, ширини на колони и друго.
За да ги искористите новововедените напредни функции во овој тематски објект, прво мора да инсталирате ChakraProvider
во коренот на апликацијата.
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;
После тоа вие режирате ChakraProvider
да го користите објектот за тема што сте го создале претходно. Сите компоненти на Чакра сега може да користат бои на брендот.
Некои проекти можеби ќе треба само да го променат стилот на основната компонента на Чакра наместо да бараат промена на стилот на кој било начин.
Како пример за објектот во стилот на компонентата, еве го:
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: "",
},
}
Сега, ние само ќе го измениме Button
Heading
делови.
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;
Можеме да се ослободиме од граничниот радиус што беше стандардно поставен за Button
со отстранување на нејзиниот baseStyle
. Можете да ја промените големината на фонтот и распоредот на фонтот за Heading
. Користејќи ги горенаведените примери, можете да разберете како можеме да го промениме стандардниот стил на компонентите на Чакра.
Подобрувањето или менувањето на стиловите на компонентите на Чакра ни обезбедува видливост и контрола врз изгледот и функционирањето на нашите кориснички интерфејси.
Чакра и компоненти од трета страна
Чакра им овозможува на модулите од трети страни да имаат корист од нивниот стил. Како резултат на тоа, комбинирањето на елементи од трета страна со интерфејсот на Чакра бара помалку сопственички обвивки на компоненти.
Следното е список на HTML елементи поддржани од фабриката на Чакра:
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>
);
}
Ние го интегрираме Next.js Image
компонента со интерфејс на чакра во фрагментот од кодот погоре. Потоа, поставивме а ChakraNextImage
компонента и преку неа можеме да ги пренесеме стилските реквизити на Чакра Image
.
анимации
Можете да дефинирате анимации користејќи интерфејс на Чакра keyframes
помошник Keyframes
земете дефиниција за CSS клучна рамка и вратете објект што можете да го користите во стилови:
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>
);
}
Користење на keyframes
асистент, можете да ја креирате анимацијата што ја гледате овде. Реквизитот за анимација ни овозможува да ги анимираме компонентите на интерфејсот на Чакра.
Како последен чекор, поминете spinAnimation
во компонентата Box за да може да се додадат анимации во апликациите на 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;
Со цел да се имплементираат транзиции на страници, користете ги компонентите за транзиција од интерфејсот на Чакра. Транзицијата ScaleFade се користи во горната линија на код.
Ве молиме известете ScaleFade
за патеката на вашата апликација за да може транзицијата да функционира додека се движите низ екранот! Објектот обезбедува податоци за тековната патека, на која потоа можете да ја испратите ScaleFade
клучниот реквизит. InitialScale
а во проп се користат за да се воспостави почетната скала на транзицијата и да се оствари кога компонентата е рендерирана.
Во овој дел, разгледавме неколку од карактеристиките и можностите што ги нуди Chakra UI и како ни помага во нашето совршено искуство. Исто така, истраживме како воспоставувањето тематски објекти и развојот на глобални стилови може да помогнат во одржувањето на приспособливоста на нашиот систем.
Ако веќе не сте го направиле тоа, веруваме дека овој напис ви даде неколку идеи за да го насочите вашиот процес на развој на интерфејсот на Чакра.
Оставете Одговор