Các nhà phát triển sẽ thấy Chakra UI là đối tác hữu ích nhất của họ. Là một bộ công cụ thành phần cho các dịch vụ trực tuyến, Chakra UI giúp bạn dễ dàng tạo các ứng dụng bao gồm một cách hiệu quả.
Do khả năng truy cập và tuân thủ WAI-ARIA, các phần tử của Chakra UI rất đơn giản để tùy chỉnh và bố cục lại chủ đề bằng cách sử dụng API của nó. Tuy nhiên, đây chỉ là phần nổi của tảng băng chìm về những lợi thế mà nó mang lại cho các nhà phát triển.
Trong bài đăng này, chúng ta sẽ xem xét kỹ hơn một số tính năng nâng cao hơn của Chakra UI và cách chúng có thể giúp bạn trở nên hiệu quả hơn với tư cách là một lập trình viên.
Chakra UI là gì?
Chakra UI là một bộ công cụ thành phần giúp các nhà phát triển nhanh chóng xây dựng các thành phần giao diện người dùng có thể truy cập và tái sử dụng cho các ứng dụng web của họ. Nó được xây dựng dựa trên React và sử dụng hệ thống được tạo kiểu cho công cụ chủ đề của nó.
Mục tiêu của Chakra UI là giúp các lập trình viên dễ dàng tạo ra các giao diện người dùng đẹp, đáp ứng và dễ tiếp cận với nỗ lực tối thiểu. Bộ công cụ bao gồm nhiều thành phần sẵn sàng sử dụng được thiết kế để có thể dễ dàng kết hợp và mở rộng.
Chakra UI là mã nguồn mở và sự phát triển của nó được tài trợ bởi Segment.
Cách cài đặt giao diện người dùng Chakra
Bạn sẽ phải nhập các lệnh sau để kết hợp Chakra trong Dự án của mình:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Bạn phải định cấu hình ChakraProvider ở gốc ứng dụng của mình sau khi cài đặt Chakra UI. Tùy thuộc vào khuôn khổ bạn sử dụng, điều này có thể nằm trong tệp index.jsx, index.tsx hoặc app.jsx của bạn.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Các kỹ thuật nâng cao trong giao diện người dùng Chakra
Tạo SVG thời gian thực
Bạn có thể muốn cập nhật động SVG của mình để phản ánh thiết kế hiện tại trong khi thiết lập các chủ đề mới cho trang web của bạn. Điều này đòi hỏi phải tạo ra các SVG riêng biệt cho từng chủ đề.
Mặt khác, Chakra UI là một tùy chọn thân thiện hơn với người dùng. Sử dụng useColorMode
hook trong Chakra UI, chúng ta có thể tự động thay đổi màu tô của SVG.
UseColorMode chỉ có thể được sử dụng khi chế độ tối được triển khai. Sử dụng chế độ tối với Chakra UI lần đầu tiên? Bài viết này sẽ hướng dẫn bạn cách làm thế nào để nó hoạt động bình thường.
Sản phẩm useColorMode
tùy chọn khả dụng sau khi chế độ tối đã được bật.
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>
);
}
Đoạn mã trên tích hợp useColorMode
hook và SVG để làm cho chúng năng động. Sử dụng useColorMode
chúng ta có thể truy xuất và thay đổi chế độ màu. Nếu bạn muốn chuyển đổi màu sắc, bạn nên sử dụng colorMode
hoặc là toggleColor
Chức năng chế độ.
Chủ đề luân xa
Các chủ đề của Chakra UI được áp dụng bằng cách sử dụng Đặc điểm kỹ thuật chủ đề hệ thống theo kiểu kĩ thuật. Các chủ đề trong Chakra có thể tác động đến nhiều khía cạnh khác nhau, từ bảng màu đến khoảng cách.
Bạn sẽ chỉ cần nhập extendTheme
hoạt động trong khi thêm các phím để sửa đổi mã thông báo trong cài đặt trước. Chúng ta hãy xem xét điều này.
Bạn chỉ cần tạo một Theme.js
tệp để bắt đầu.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Nó thêm hai màu nữa vào đối tượng chủ đề để làm cho nó trở nên sống động và hấp dẫn hơn. Theo thông số kỹ thuật của phần mềm, bạn có thể tạo các điểm đánh dấu kiểu cho kiểu chữ, điểm ngắt, kích thước phông chữ, độ rộng cột, v.v.
Để tận dụng các tính năng nâng cao mới được giới thiệu trong đối tượng chủ đề này, trước tiên bạn phải cài đặt ChakraProvider
ở gốc của ứng dụng.
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;
Sau đó, bạn chỉ đạo ChakraProvider
để sử dụng đối tượng chủ đề bạn đã tạo trước đó. Tất cả các thành phần Chakra bây giờ có thể sử dụng màu thương hiệu.
Một số dự án có thể chỉ cần thay đổi kiểu dáng thành phần cơ bản của Chakra thay vì yêu cầu sửa đổi kiểu theo bất kỳ cách nào.
Ví dụ về đối tượng kiểu thành phần, đây là:
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: "",
},
}
Bây giờ, chúng tôi sẽ chỉ sửa đổi Button
và Heading
các bộ phận.
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;
Chúng tôi có thể loại bỏ bán kính đường viền được đặt theo mặc định cho Button
bằng cách loại bỏ nó baseStyle
. Bạn có thể thay đổi kích thước phông chữ và bố cục kiểu chữ cho Heading
. Sử dụng các ví dụ trên, bạn có thể hiểu cách chúng tôi có thể thay đổi kiểu dáng chuẩn của các thành phần Chakra.
Nâng cao hoặc thay đổi phong cách của các thành phần Chakra cung cấp cho chúng tôi khả năng hiển thị và kiểm soát sự xuất hiện và hoạt động của các giao diện người dùng của chúng tôi.
Chakra và các thành phần của bên thứ ba
Chakra cho phép các mô-đun của bên thứ ba hưởng lợi từ phong cách của họ. Do đó, việc kết hợp các phần tử của bên thứ ba với Chakra UI yêu cầu ít trình bao bọc thành phần độc quyền hơn.
Sau đây là danh sách các phần tử HTML được hỗ trợ bởi nhà máy 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>
);
}
Chúng tôi tích hợp Next.js Image
thành phần với giao diện người dùng Chakra trong đoạn mã trên. Sau đó, chúng tôi thiết lập một ChakraNextImage
và thông qua đó, chúng ta có thể chuyển các đạo cụ phong cách của Chakra sang Image
.
Ảnh động
Bạn có thể xác định hình ảnh động bằng cách sử dụng Chakra UI's keyframes
người giúp đỡ. Keyframes
đưa vào định nghĩa khung hình chính CSS và trả về một đối tượng mà bạn có thể sử dụng trong các kiểu:
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>
);
}
Sử dụng keyframes
trợ lý, bạn có thể tạo hoạt ảnh mà bạn thấy ở đây. Phần hỗ trợ hoạt ảnh cho phép chúng ta tạo hiệu ứng cho các thành phần Chakra UI.
Bước cuối cùng, vượt qua spinAnimation
vào thành phần Hộp để các hoạt ảnh có thể được thêm vào các ứng dụng Chakra UI.
Chuyển trang
Chuyển đổi trang có thể được thêm vào ứng dụng của chúng tôi để cải thiện trải nghiệm của người dùng khi họ di chuyển giữa các trang.
Sau đây là một ví dụ về cách đạt được nó với 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;
Để thực hiện chuyển đổi trang, hãy sử dụng các thành phần chuyển tiếp từ Chakra UI. Quá trình chuyển đổi ScaleFade được sử dụng trong dòng mã trên.
Xin vui lòng thông báo ScaleFade
về đường dẫn ứng dụng của bạn để quá trình chuyển đổi có thể hoạt động khi bạn di chuyển trên màn hình! Đối tượng cung cấp dữ liệu về đường dẫn hiện tại, sau đó bạn có thể gửi đến ScaleFade
chỗ dựa chính của. InitialScale
và trong prop được sử dụng để thiết lập quy mô bắt đầu của quá trình chuyển đổi và làm cho nó xảy ra khi thành phần được hiển thị.
Trong phần này, chúng tôi đã xem xét một số tính năng và khả năng mà Chakra UI cung cấp và cách nó hỗ trợ chúng tôi trong trải nghiệm hoàn hảo. Chúng tôi cũng đã khám phá cách thiết lập các đối tượng chủ đề và phát triển các phong cách toàn cầu có thể hỗ trợ trong việc duy trì khả năng mở rộng của hệ thống của chúng tôi.
Nếu bạn chưa có, Chúng tôi tin rằng bài viết này đã cung cấp cho bạn một số ý tưởng để hợp lý hóa quá trình phát triển Chakra UI của bạn.
Bình luận