目錄[隱藏][顯示]
開發人員會發現 Chakra UI 是他們最有用的合作夥伴。 作為在線服務的組件工具包,Chakra UI 可以輕鬆高效地構建包容性應用程序。
由於其可訪問性和 WAI-ARIA 合規性,Chakra UI 的元素很容易使用其 API 進行自定義和重新主題化。 然而,這只是它為開發人員提供的優勢的冰山一角。
在這篇文章中,我們將仔細研究 Chakra UI 的一些更高級的功能,以及它們如何幫助您提高程序員的工作效率。
什麼是脈輪用戶界面?
Chakra UI 是一個組件工具包,可幫助開發人員為其 Web 應用程序快速構建可訪問且可重用的用戶界面組件。 它建立在 React 之上,並將樣式化系統用於其主題引擎。
Chakra UI 的目標是讓程序員輕鬆創建美觀、響應迅速且易於訪問的用戶界面,並且花費最少的精力。 該工具包包括各種易於組合和可擴展的即用型組件。
Chakra UI 是開源的,它的開發是由 Segment 贊助的。
如何安裝脈輪 UI
您必須鍵入以下命令才能將 Chakra 合併到您的項目中:
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>
)
}
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 的基本組件樣式,而不需要以任何方式修改樣式。
作為組件樣式對象的示例,這裡是:
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 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 的 style props 傳遞給 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
到 Box 組件中,以便可以將動畫添加到 Chakra UI 應用程序中。
頁面過渡
頁面轉換可能會添加到我們的應用程序中,以改善用戶在頁面之間移動時的體驗。
以下是如何使用 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 開發過程。
發表評論