Розробники знайдуть Chakra UI своїм найкориснішим партнером. Як компонент інструментарію для онлайн-сервісів, Chakra UI дозволяє легко створювати інклюзивні програми з ефективністю.
Завдяки доступності та сумісності з WAI-ARIA елементи інтерфейсу користувача Chakra легко налаштувати та змінити тему за допомогою API. Однак це лише верхівка айсберга щодо переваг, які він пропонує розробникам.
У цій публікації ми докладніше розглянемо деякі з більш просунутих функцій Chakra UI і те, як вони можуть допомогти вам стати більш продуктивним програмістом.
Що таке Chakra UI?
Chakra UI — це набір компонентів, який допомагає розробникам швидко створювати доступні та повторно використовувані компоненти інтерфейсу користувача для своїх веб-додатків. Він створений на основі 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>
)
}
Advanced Techniques in Chakra UI
Створення SVG у реальному часі
Ви можете динамічно оновлювати свої SVG, щоб відобразити поточний дизайн, створюючи нові теми для свого веб-сайту. Це вимагає створення окремих SVG для кожної з кількох тем.
Chakra UI, з іншого боку, є більш зручним варіантом. Використовуючи useColorMode
в Chakra UI, ми можемо динамічно змінювати колір заливки наших 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
hook і SVG, щоб зробити їх динамічними. Використання useColorMode
ми можемо отримати та змінити колірний режим. Якщо ви хочете змінити кольори, вам слід скористатися будь-яким із них colorMode
або toggleColor
Функція режиму.
Теми чакр
Теми Chakra UI застосовуються за допомогою Специфікація теми стилізованої системи техніка. Теми в Chakra можуть впливати на різні аспекти, починаючи від палітри кольорів і закінчуючи інтервалами.
Вам просто потрібно буде імпортувати 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
використовувати об’єкт теми, який ви створили раніше. Усі компоненти 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
.
Анімації
Ви можете визначити анімацію за допомогою інтерфейсу користувача Chakra 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.
Переходи сторінок
Переходи між сторінками можуть бути додані в наші програми, щоб покращити роботу користувача під час переходу між сторінками.
Нижче наведено приклад того, як цього досягти за допомогою інтерфейсу користувача 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;
Щоб реалізувати переходи сторінок, використовуйте компоненти переходу з інтерфейсу користувача Chakra. Перехід ScaleFade використовується у наведеному вище рядку коду.
Будь ласка, повідомте ScaleFade
про шлях вашої програми, щоб перехід міг функціонувати під час руху по екрану! Об’єкт надає дані про поточний шлях, який потім можна надіслати ScaleFade
's key prop. InitialScale
і в prop використовуються для встановлення початкового масштабу переходу та для того, щоб це відбувалося під час візуалізації компонента.
У цьому матеріалі ми розглянули кілька функцій і можливостей, які пропонує інтерфейс користувача Chakra, і те, як він допомагає нам досягти ідеального досвіду. Ми також дослідили, як встановлення об’єктів теми та розробка глобальних стилів можуть допомогти підтримувати масштабованість нашої системи.
Якщо ви ще цього не зробили, ми вважаємо, що ця стаття дала вам кілька ідей щодо оптимізації процесу розробки інтерфейсу користувача Chakra.
залишити коментар