Deweloperzy uznają Chakra UI za najbardziej przydatnego partnera. Jako zestaw narzędzi komponentów dla usług online, Chakra UI ułatwia i wydajne konstruowanie inkluzywnych aplikacji.
Ze względu na jego dostępność i zgodność z WAI-ARIA, elementy interfejsu użytkownika Chakra można łatwo dostosowywać i zmieniać motyw za pomocą interfejsu API. To jednak tylko wierzchołek góry lodowej, jeśli chodzi o korzyści, jakie oferuje deweloperom.
W tym poście przyjrzymy się bliżej niektórym z bardziej zaawansowanych funkcji interfejsu użytkownika Chakra i jak mogą one pomóc ci stać się bardziej produktywnym jako programista.
Co to jest interfejs czakry?
Chakra UI to zestaw narzędzi komponentów, który pomaga programistom szybko tworzyć dostępne i wielokrotnego użytku komponenty interfejsu użytkownika dla ich aplikacji internetowych. Jest zbudowany na bazie Reacta i wykorzystuje system stylów dla swojego silnika motywów.
Celem Chakra UI jest ułatwienie programistom tworzenia pięknych, responsywnych i dostępnych interfejsów użytkownika przy minimalnym wysiłku. Zestaw narzędzi zawiera szeroką gamę gotowych do użycia komponentów, które zaprojektowano tak, aby można je było łatwo komponować i rozszerzać.
Chakra UI jest oprogramowaniem typu open source, a jego rozwój jest sponsorowany przez Segment.
Jak zainstalować interfejs czakry
Będziesz musiał wpisać następujące polecenia, aby włączyć czakrę do swojego projektu:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Musisz skonfigurować ChakraProvider w katalogu głównym aplikacji po zainstalowaniu interfejsu użytkownika Chakra. W zależności od używanej platformy może to być plik index.jsx, index.tsx lub app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Zaawansowane techniki w interfejsie czakry
Generowanie plików SVG w czasie rzeczywistym
Możesz chcieć dynamicznie aktualizować swoje pliki SVG, aby odzwierciedlić obecny projekt, jednocześnie ustanawiając nowe motywy dla swojej witryny. Wymaga to stworzenia odrębnych plików SVG dla każdego z kilku motywów.
Z drugiej strony interfejs czakry jest bardziej przyjazną dla użytkownika opcją. Używając useColorMode
hook w interfejsie użytkownika Chakra, możemy dynamicznie zmieniać kolor wypełnienia naszych plików SVG.
UseColorMode można używać tylko po zaimplementowaniu trybu ciemnego. Używasz trybu ciemnego z interfejsem Chakra po raz pierwszy? W tym artykule dowiesz się, jak sprawić, by działała poprawnie.
Połączenia useColorMode
opcja dostępna po włączeniu trybu ciemnego.
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>
);
}
Powyższy kod integruje useColorMode
hook i SVG, aby były dynamiczne. Za pomocą useColorMode
możemy odzyskać i zmienić tryb kolorów. Jeśli chcesz zmienić kolory, powinieneś użyć jednego z nich colorMode
albo toggleColor
Funkcja trybu.
Motywy czakry
Motywy interfejsu czakry są stosowane za pomocą Specyfikacja stylizowanego motywu systemu technika. Motywy w czakrze mogą wpływać na różne aspekty, od palety kolorów po odstępy.
Musisz tylko zaimportować extendTheme
funkcja podczas dodawania klawiszy do modyfikacji tokenów w presecie. Przyjrzyjmy się temu.
Wystarczy stworzyć Theme.js
plik, aby rozpocząć.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Dodaje dwa dodatkowe kolory do obiektu motywu, aby był bardziej żywy i atrakcyjny. Zgodnie ze specyfikacją oprogramowania możesz tworzyć znaczniki stylu dla krojów pisma, punktów przerwania, rozmiarów czcionek, szerokości kolumn i innych.
Aby skorzystać z nowo wprowadzonych zaawansowanych funkcji tego obiektu motywu, musisz najpierw zainstalować ChakraProvider
w katalogu głównym aplikacji.
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;
Następnie kierujesz ChakraProvider
aby użyć utworzonego wcześniej obiektu motywu. Wszystkie komponenty czakry mogą teraz używać kolorów firmowych.
Niektóre projekty mogą po prostu wymagać zmiany stylizacji podstawowych komponentów Chakry, zamiast wymagać modyfikacji stylu w jakikolwiek sposób.
Oto przykład obiektu stylu komponentu:
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 po prostu zmodyfikujemy Button
i Heading
części.
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;
Możemy pozbyć się promienia granicznego, który był ustawiony domyślnie dla Button
usuwając jego baseStyle
. Możesz zmienić rozmiar czcionki i układ kroju czcionki dla Heading
. Korzystając z powyższych przykładów, możesz zrozumieć, jak możemy zmienić standardową stylizację komponentów czakry.
Ulepszanie lub zmienianie stylów komponentów Czakry zapewnia nam widoczność i kontrolę nad wyglądem i funkcjonowaniem naszych interfejsów użytkownika.
Czakra i komponenty innych firm
Chakra pozwala modułom innych firm korzystać z ich stylu. W rezultacie łączenie elementów stron trzecich z interfejsem użytkownika Chakra wymaga mniejszej liczby zastrzeżonych opakowań komponentów.
Poniżej znajduje się lista elementów HTML obsługiwanych przez fabrykę 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>
);
}
Integrujemy Next.js Image
komponent z interfejsem użytkownika Chakra w powyższym fragmencie kodu. Następnie zakładamy ChakraNextImage
komponentu i za jego pomocą możemy przekazać rekwizyty stylu Chakry do Image
.
Animacje
Możesz zdefiniować animacje za pomocą interfejsu użytkownika Chakra keyframes
pomocnik. Keyframes
weź definicję klatki kluczowej CSS i zwróć obiekt, którego możesz użyć w stylach:
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>
);
}
Korzystanie z keyframes
asystenta, możesz stworzyć animację, którą widzisz tutaj. Rekwizyt animacji pozwala nam animować elementy interfejsu użytkownika Chakra.
Jako ostatni krok przejdź spinAnimation
do komponentu Box, aby animacje mogły być dodawane do aplikacji interfejsu użytkownika Chakra.
Przejścia stron
Przejścia stron mogą być dodawane do naszych aplikacji, aby poprawić wrażenia użytkownika podczas przechodzenia między stronami.
Poniżej znajduje się przykład, jak to osiągnąć za pomocą interfejsu użytkownika 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;
Aby zaimplementować przejścia stron, użyj komponentów przejścia z interfejsu użytkownika Chakra. Przejście ScaleFade jest używane w powyższym wierszu kodu.
Proszę powiadomić ScaleFade
o ścieżce aplikacji, aby przejście mogło działać podczas poruszania się po ekranie! Obiekt dostarcza dane o bieżącej ścieżce, które można następnie wysłać do ScaleFade
kluczowy rekwizyt. InitialScale
oraz w prop są używane do ustalenia początkowej skali przejścia i umożliwienia jej wykonania podczas renderowania komponentu.
W tym artykule przyjrzeliśmy się kilku funkcjom i możliwościom oferowanym przez interfejs Chakra i tym, jak pomaga nam w naszym doskonałym doświadczeniu. Zbadaliśmy również, w jaki sposób tworzenie obiektów tematycznych i opracowywanie stylów globalnych może pomóc w utrzymaniu skalowalności naszego systemu.
Jeśli jeszcze tego nie zrobiłeś, uważamy, że ten artykuł dał ci kilka pomysłów na usprawnienie procesu rozwoju interfejsu użytkownika Chakra.
Dodaj komentarz