Распрацоўшчыкі знойдуць карыстацкі інтэрфейс Chakra сваім самым карысным партнёрам. У якасці камплекта інструментаў для інтэрнэт-сэрвісаў Chakra UI дазваляе лёгка і эфектыўна ствараць інклюзіўныя праграмы.
Дзякуючы даступнасці і адпаведнасці WAI-ARIA, элементы карыстальніцкага інтэрфейсу Chakra лёгка наладжваць і змяняць тэмы з дапамогай API. Аднак гэта толькі вяршыня айсберга адносна пераваг, якія ён прапануе распрацоўшчыкам.
У гэтай публікацыі мы больш падрабязна разгледзім некаторыя з больш прасунутых функцый інтэрфейсу Chakra UI і тое, як яны могуць дапамагчы вам стаць больш прадуктыўным праграмістам.
Што такое інтэрфейс Chakra?
Карыстальніцкі інтэрфейс Chakra - гэта набор кампанентаў, які дапамагае распрацоўшчыкам хутка ствараць даступныя і шматразова выкарыстоўваныя кампаненты карыстальніцкага інтэрфейсу для сваіх вэб-праграм. Ён пабудаваны на аснове React і выкарыстоўвае стылізаваную сістэму для механізму стварэння тэмаў.
Мэта Chakra UI - палегчыць праграмістам стварэнне прыгожых, спагадных і даступных карыстальніцкіх інтэрфейсаў з мінімальнымі намаганнямі. Набор інструментаў уключае шырокі спектр гатовых да выкарыстання кампанентаў, якія распрацаваны так, каб іх можна было лёгка складаць і пашыраць.
Карыстацкі інтэрфейс Chakra з адкрытым зыходным кодам, і яго распрацоўка спансуецца Segment.
Як усталяваць Chakra UI
Вам трэба будзе ўвесці наступныя каманды, каб уключыць Chakra ў свой праект:
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>
)
}
Перадавыя метады ў інтэрфейсе Chakra
Стварэнне SVG у рэжыме рэальнага часу
Магчыма, вы захочаце дынамічна абнаўляць свае SVG, каб адлюстраваць бягучы дызайн, ствараючы новыя тэмы для вашага сайта. Гэта патрабуе стварэння асобных SVG для кожнай з некалькіх тэм.
Карыстацкі інтэрфейс Chakra, з іншага боку, з'яўляецца больш зручным варыянтам. Выкарыстоўваючы useColorMode
у карыстальніцкім інтэрфейсе Chakra, мы можам дынамічна змяняць колер залівання нашых SVG.
UseColorMode можна выкарыстоўваць толькі пасля рэалізацыі цёмнага рэжыму. Упершыню выкарыстоўваеце цёмны рэжым з інтэрфейсам Chakra? Гэты артыкул пакажа вам, як прымусіць яго працаваць належным чынам.
,en 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
Функцыя рэжыму.
Тэмы чакры
Тэмы Chakra UI прымяняюцца з дапамогай Спецыфікацыя стылізаванай сістэмнай тэмы тэхніка. Тэмы ў Chakra могуць уплываць на розныя аспекты, ад каляровай палітры да інтэрвалаў.
Вам проста трэба будзе імпартаваць extendTheme
функцыю, дадаючы клавішы для змены токенаў у прадусталёўцы. Давайце паглядзім на гэта.
Вам проста трэба стварыць a 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
выкарыстоўваць аб'ект тэмы, які вы стварылі раней. Усе кампаненты Chakra цяпер могуць выкарыстоўваць фірмовыя колеры.
У некаторых праектах можа спатрэбіцца проста змяніць стыль базавага кампанента Chakra, а не патрабаваць мадыфікацыі стылю якім-небудзь чынам.
У якасці прыкладу аб'екта стылю кампанента, вось ён:
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
. Выкарыстоўваючы прыведзеныя вышэй прыклады, вы можаце зразумець, як мы можам змяніць стандартны стыль кампанентаў Chakra.
Паляпшэнне або змяненне стыляў кампанентаў Chakra забяспечвае нам бачнасць і кантроль над знешнім выглядам і функцыянаваннем нашых карыстальніцкіх інтэрфейсаў.
Чакра і кампаненты іншых вытворцаў
Chakra дазваляе староннім модулям выкарыстоўваць іх стыль. У выніку аб'яднанне старонніх элементаў з карыстацкім інтэрфейсам Chakra патрабуе меншай колькасці ўласных абгортак кампанентаў.
Ніжэй прыведзены спіс элементаў HTML, якія падтрымліваюцца фабрыкай 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>
);
}
Мы інтэгруем Next.js Image
кампанент з інтэрфейсам Chakra ў прыведзеным вышэй фрагменце кода. Затым мы стварылі a 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
памочнік, вы можаце стварыць анімацыю, якую вы бачыце тут. Прапанова анімацыі дазваляе нам аніміраваць кампаненты інтэрфейсу Chakra.
У якасці апошняга кроку пас spinAnimation
у кампанент Box, каб анімацыю можна было дадаваць у прыкладанні карыстацкага інтэрфейсу Chakra.
Page Transitions
Пераходы паміж старонкамі могуць быць дададзены ў нашы прыкладанні, каб палепшыць карыстальніцкі досвед пры пераходзе паміж старонкамі.
Ніжэй прыведзены прыклад таго, як дасягнуць гэтага з дапамогай інтэрфейсу 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;
Каб рэалізаваць пераходы паміж старонкамі, выкарыстоўвайце кампаненты пераходу з інтэрфейсу Chakra. Пераход ScaleFade выкарыстоўваецца ў прыведзеным вышэй радку кода.
Калі ласка, паведаміце ScaleFade
аб шляху вашага прыкладання, каб пераход мог функцыянаваць, калі вы рухаецеся па экране! Аб'ект дае дадзеныя аб бягучым шляху, якія вы можаце адправіць ScaleFade
ключавая апора. InitialScale
і ў prop выкарыстоўваюцца для ўстанаўлення пачатковага маштабу пераходу і для таго, каб гэта адбылося пры візуалізацыі кампанента.
У гэтай частцы мы разгледзелі некалькі функцый і магчымасцей, якія прапануе карыстацкі інтэрфейс Chakra UI, а таксама тое, як ён дапамагае нам у ідэальным выкарыстанні. Мы таксама даследавалі, як стварэнне тэматычных аб'ектаў і распрацоўка глабальных стыляў могуць дапамагчы ў падтрыманні маштабаванасці нашай сістэмы.
Калі вы гэтага яшчэ не зрабілі, мы лічым, што гэты артыкул даў вам некалькі ідэй, каб упарадкаваць працэс распрацоўкі карыстацкага інтэрфейсу Chakra.
Пакінуць каментар