개발자는 Chakra UI가 가장 유용한 파트너임을 알게 될 것입니다. 온라인 서비스를 위한 컴포넌트 툴킷인 Chakra UI를 사용하면 포괄적인 앱을 효율적으로 쉽게 구축할 수 있습니다.
접근성 및 WAI-ARIA 준수의 결과로 Chakra UI의 요소는 API를 사용하여 간단하게 사용자 정의하고 테마를 변경할 수 있습니다. 그러나 이것은 개발자에게 제공하는 이점에 관한 빙산의 일각에 불과합니다.
이 게시물에서는 Chakra UI의 고급 기능 중 일부와 이러한 기능이 프로그래머로서 생산성을 높이는 데 어떻게 도움이 되는지 자세히 살펴보겠습니다.
차크라 UI란 무엇입니까?
Chakra UI는 개발자가 웹 응용 프로그램을 위해 액세스 가능하고 재사용 가능한 사용자 인터페이스 구성 요소를 빠르게 구축할 수 있도록 도와주는 구성 요소 도구 키트입니다. React 위에 구축되었으며 테마 엔진에 스타일이 지정된 시스템을 사용합니다.
Chakra UI의 목표는 프로그래머가 최소한의 노력으로 아름답고 반응이 빠르며 접근 가능한 사용자 인터페이스를 쉽게 만들 수 있도록 하는 것입니다. 이 툴킷에는 쉽게 구성하고 확장할 수 있도록 설계된 바로 사용할 수 있는 다양한 구성 요소가 포함되어 있습니다.
Chakra UI는 오픈 소스이며 개발은 Segment에서 후원합니다.
차크라 UI 설치 방법
프로젝트에 차크라를 통합하려면 다음 명령을 입력해야 합니다.
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Chakra UI를 설치한 후 애플리케이션의 루트에서 ChakraProvider를 구성해야 합니다. 사용하는 프레임워크에 따라 index.jsx, index.tsx 또는 app.jsx 파일에 있을 수 있습니다.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
차크라 UI의 고급 기술
실시간 SVG 생성
웹사이트의 새로운 테마를 설정하면서 현재 디자인을 반영하도록 SVG를 동적으로 업데이트할 수 있습니다. 이를 위해서는 여러 테마 각각에 대해 고유한 SVG를 만들어야 합니다.
반면에 차크라 UI는 사용자 친화적인 옵션입니다. 사용 useColorMode
Chakra UI에서 후크를 사용하면 SVG의 채우기 색상을 동적으로 변경할 수 있습니다.
UseColorMode는 어두운 모드가 구현된 후에만 사용할 수 있습니다. Chakra UI와 함께 다크 모드를 처음 사용하시나요? 이 기사에서는 제대로 작동하도록 하는 방법을 보여줍니다.
XNUMXD덴탈의 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의 테마는 다음을 사용하여 적용됩니다. 스타일 시스템 테마 사양 기술. 차크라의 테마는 색상 팔레트에서 간격에 이르기까지 다양한 측면에 영향을 줄 수 있습니다.
가져오기만 하면 됩니다. 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의 기본 구성 요소 스타일을 변경하기만 하면 됩니다.
구성 요소 스타일 개체의 예는 다음과 같습니다.
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;
기본적으로 설정된 border-radius를 제거할 수 있습니다. Button
제거함으로써 baseStyle
. 글꼴 크기와 서체 레이아웃을 변경할 수 있습니다. Heading
. 위의 예를 사용하여 차크라 구성 요소의 표준 스타일을 변경하는 방법을 이해할 수 있습니다.
Chakra 구성 요소의 스타일을 개선하거나 변경하면 사용자 인터페이스의 모양과 기능에 대한 가시성과 제어가 제공됩니다.
차크라 및 타사 구성 요소
Chakra를 사용하면 타사 모듈이 해당 스타일의 이점을 누릴 수 있습니다. 결과적으로 타사 요소를 Chakra UI와 결합하면 더 적은 수의 독점 구성 요소 래퍼가 필요합니다.
다음은 Chakra 팩토리에서 지원하는 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
위의 코드 조각에서 Chakra UI가 있는 구성 요소. 그런 다음, 우리는 ChakraNextImage
구성 요소를 통해 Chakra의 스타일 소품을 Image
.
애니메이션
Chakra UI를 사용하여 애니메이션을 정의할 수 있습니다. 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 UI 구성 요소에 애니메이션을 적용할 수 있습니다.
마지막 단계로 통과 spinAnimation
애니메이션을 Chakra UI 앱에 추가할 수 있도록 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;
페이지 전환을 구현하려면 Chakra UI의 전환 구성 요소를 사용하십시오. ScaleFade 전환은 위의 코드 줄에서 사용됩니다.
알려주세요 ScaleFade
화면을 가로질러 이동할 때 전환이 작동할 수 있도록 응용 프로그램의 경로에 대해 설명합니다. 개체는 현재 경로에 대한 데이터를 제공하며, 이 데이터를 다음으로 보낼 수 있습니다. ScaleFade
의 핵심 소품. InitialScale
및 in prop은 전환의 시작 크기를 설정하고 구성 요소가 렌더링될 때 발생하도록 하는 데 사용됩니다.
이 글에서 우리는 Chakra UI가 제공하는 몇 가지 기능과 그것이 우리의 완벽한 경험에 어떻게 도움이 되는지 살펴보았습니다. 또한 테마 개체를 설정하고 전역 스타일을 개발하는 것이 시스템의 확장성을 유지하는 데 어떻게 도움이 될 수 있는지 살펴보았습니다.
아직 하지 않았다면 이 기사가 Chakra UI 개발 프로세스를 간소화할 수 있는 몇 가지 아이디어를 제공했다고 생각합니다.
댓글을 남겨주세요.