Програмери ће пронаћи Цхакра УИ као најкориснији партнер. Као комплет компоненти за онлајн услуге, Цхакра УИ олакшава конструисање инклузивних апликација са ефикасношћу.
Као резултат његове приступачности и усаглашености са ВАИ-АРИА, елементи корисничког интерфејса Цхакра су једноставни за прилагођавање и преобликовање тема помоћу АПИ-ја. Међутим, ово је само врх леденог брега у погледу предности које нуди програмерима.
У овом посту ћемо детаљније погледати неке од напреднијих функција корисничког интерфејса Цхакра и како вам оне могу помоћи да постанете продуктивнији као програмер.
Шта је Цхакра УИ?
Цхакра УИ је комплет алата који помаже програмерима да брзо направе приступачне и вишекратне компоненте корисничког интерфејса за своје веб апликације. Изграђен је на врху Реацт-а и користи стилизовани систем за свој мотор за тему.
Циљ корисничког интерфејса Цхакра је да олакша програмерима да креирају лепе, прилагодљиве и приступачне корисничке интерфејсе уз минималан напор. Комплет алата укључује широк спектар компоненти спремних за употребу које су дизајниране да се лако састављају и могу проширити.
Цхакра УИ је отвореног кода, а његов развој спонзорише Сегмент.
Како инсталирати Цхакра УИ
Мораћете да унесете следеће команде да бисте укључили чакру у свој пројекат:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Морате да конфигуришете ЦхакраПровидер у корену ваше апликације након инсталирања Цхакра УИ. У зависности од оквира који користите, ово може бити у вашој датотеци индек.јск, индек.тск или апп.јск.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Напредне технике у корисничком интерфејсу Цхакра
Генерисање СВГ-ова у реалном времену
Можда ћете желети да динамички ажурирате своје СВГ датотеке да одражавају тренутни дизајн док успостављате нове теме за своју веб локацију. Ово захтева креирање различитих СВГ-ова за сваку од неколико тема.
Цхакра УИ је, с друге стране, опција једноставнија за употребу. Помоћу useColorMode
кука у корисничком интерфејсу Цхакра, можемо динамички да мењамо боју испуне наших СВГ-ова.
УсеЦолорМоде се може користити само када се имплементира тамни режим. Први пут користите тамни режим са корисничким интерфејсом Цхакра? Овај чланак ће вам показати како да га натерате да ради како треба.
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
куку и СВГ да би их учинили динамичним. Користећи useColorMode
можемо да преузмемо и променимо режим боја. Ако желите да промените боје, требало би да користите било коју colorMode
или toggleColor
Функција режима.
Цхакра Тхемес
Теме корисничког интерфејса Цхакра се примењују помоћу Спецификација стилизоване системске теме техника. Теме у чакри могу утицати на различите аспекте у распону од палете боја до размака.
Мораћете само да увезете 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
. Користећи горње примере, можете разумети како можемо да променимо стандардни стил компоненти чакре.
Побољшање или измена стилова компоненти чакре омогућава нам видљивост и контролу над изгледом и функционисањем наших корисничких интерфејса.
Чакра и компоненте треће стране
Чакра омогућава модулима трећих страна да имају користи од свог стила. Као резултат тога, комбиновање елемената трећих страна са корисничким интерфејсом Цхакра захтева мање омотача за власничке компоненте.
Следи листа ХТМЛ елемената које подржава фабрика Цхакра:
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>
);
}
Интегришемо Нект.јс Image
компонента са корисничким интерфејсом Цхакра у фрагменту кода изнад. Затим смо поставили а ChakraNextImage
компоненту, и кроз њу можемо пренети реквизите чакриног стила Image
.
анимације
Можете да дефинишете анимације помоћу корисничког интерфејса Цхакра keyframes
помагач. Keyframes
узмите дефиницију ЦСС кључног кадра и вратите објекат који можете користити у стиловима:
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
у компоненту Бок тако да се анимације могу додати апликацијама корисничког интерфејса Цхакра.
Паге Транситионс
Прелази страница могу да се додају у наше апликације како би се побољшало корисничко искуство када се крећу између страница.
Следи пример како то постићи помоћу Цхакра УИ:
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
'с кеи проп. InitialScale
и ин проп се користе за успостављање почетне скале транзиције и да се то деси када се компонента прикаже.
У овом делу погледали смо неколико функција и могућности које Цхакра УИ нуди и како нам помаже у нашем савршеном искуству. Такође смо истражили како успостављање тематских објеката и развој глобалних стилова могу помоћи у одржавању скалабилности нашег система.
Ако већ нисте, верујемо да вам је овај чланак дао неке идеје за поједностављење процеса развоја корисничког интерфејса чакре.
Ostavite komentar