继续昨天的主题,该怎麽用 Chakra UI 做开发呢?现成的元件该怎麽去做客制化?专案有定设计系统 (design system),那怎麽跟 Chakra UI 结合呢?
Chakra UI 提供的元件都会包含这些 style props,什麽东西?就是一般的 React component props,可是他的用途是加一些 CSS styling 到元件上,而这些 props 的命名都很简单,如果大家已熟悉 Tailwind CSS 的话,一定很快就会用这些 style props。
import { Box, Flex } from "@chakra-ui/react"
// m={2} 代表把 margin 设成 `theme.space[2]`,也就是 2 * 4px
<Box m={2} maxW="960px">Tomato</Box>
// display: flex, align-items: center, 和 justify-content: space-between
<Box display="flex" alignItems="center" justifyContent="space-between">
Box with Flex props
</Box>
// 上面的元件可以直接用 Flex 元件来代替 `<Box display="flex" />`
<Flex align="center" justify="center">
Flex Container
</Flex>
现在很流行的渐层设计,Chakra UI 也提供一些 gradient API,让我们可以快速写渐层。
linear(<direction>, <from>, <to>)
radial(<from>, <to>)
repeating-linear
,conic
,等等其他渐层模式除了 background
相关的 API 之外,也不忘记 text gradient,就是让文字加上渐层~
import { Text } from "@chakra-ui/react"
<Text
bgGradient="linear(to-l, #7928CA, #FF0080)"
bgClip="text" // background-clip: text
fontSize="6xl" // font-size: theme.fontSizes.6xl => 3.75rem
fontWeight="extrabold" // font-weight: theme.fontWeights.extrabold => 800
>
Welcome to Chakra UI
</Text>
像这样:
越来越多网站有提供 dark mode 了,而 Chakra UI 内建支援 color mode 管理喔!Chakra UI 会把使用者设定的 color mode 存到浏览器的 localStorage
,让使用者下一次来到网站的时候,网站会采取之前设定好的模式。想要使用 color mode 的话,必须加这些程序:
// theme.js
import { extendTheme } from "@chakra-ui/react"
const config = {
initialColorMode: "light", // 设定预设的模式
useSystemColorMode: false, // 要不要跟着使用者系统的 color mode
}
// 把设定加进 theme 里
const theme = extendTheme({ config })
export default theme
还有很重要的 ColorModeScript
,这 script 会确保我们网站的 color mode 会持续跟 localStorage
同步,而这 script 一定要放在 body
之前或是如果用 Next.js 那要放在我们的 pages/_document.js
里:
// pages/_document.js
import { ColorModeScript } from "@chakra-ui/react"
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
import theme from "./theme"
export default class Document extends NextDocument {
render() {
return (
<Html lang="en">
<Head />
<body>
// body 里的第一个~
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main /> // 这是我们的 App!
<NextScript />
</body>
</Html>
)
}
}
这应该是很多人很在意的功能,使用上也很简单,而且 Chakra UI 是采用 @media(min-width)
的方式,让画面是 mobile-first 的~ 内建有提供一些 breakpoints
,不过我们也可以去做调整!基本上,写 responsive 元件有两种方法:
用 array (阵列) 定义 style props,像下面的例子,我们想要让 Box
的宽度跟着萤幕大小而改变:
<Box bg="red.200" w={[300, 400, 500]}>
This is a responsive box
</Box>
所以
更多的 breakpoints 可以看在这里~
除了用 array 以外,我们也可以用 object (物件),好处是不需要按照顺序去设定 style props:
<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>
This is responsive text
</Text>
物件里的每一个 key
会对应到一个 breakpoint,例如 md
就是大於 48em 的时候,fontSize
字体大小会等於 40px
。
以上讲到怎麽用现成的元件去做客制,那如果我们想要从头刻一个元件该怎麽办呢?或是原本已经有的非 Chakra 元件,该怎麽做?Chakra UI 有提供叫做 Chakra Factory,让任一个元件也可以有 style props 方便去做客制:
<chakra.button
px="3"
py="2"
bg="green.200"
rounded="md"
_hover={{ bg: "green.300" }}
>
Click me
</chakra.button>
我们可以用 chakra.<element>
然後 <element>
为 HTML element 开发全新的元件。或是我们也可以用 Chakra factory function 去把其他元件 Chakra-化:
// AnotherCard 是个 React 元件
const AwesomeCard = chakra(AnotherCard, {
baseStyle: {
shadow: "lg",
rounded: "lg",
bg: "white",
},
})
除了针对元件的客制化,我们也可以加一些 Global Styles,就是对整个 HTML 加一些 CSS styling,例如设定字体~
const theme = {
styles: {
global: {
"html, body": {
color: "gray.600",
lineHeight: "tall",
fontFamily: "'Open Sans', Helvetica Neue, sans-serif",
},
a: {
color: "teal.500",
},
},
},
}
别忘记把上面的 theme
加进 ChakraProvider
里喔~
大家本来就知道 Chakra UI 吗?觉得如何呢?个人觉得真的好用!因为他提供蛮多元件可以直接拿来用,而且还有像 Tailwind CSS 的那种 style props 方式,让客制化变得简单一些~ 想看 Chakra UI 的简介和比较可以看这篇!
大家想要看看之前的网站可以看这里,或是直接到首页~ 不过这专案不是用 Chakra UI 开发出来的喔。
祝大家明天上班上课愉快!
晚安 <3
请顾问辅导撰写 ISMS 程序书 充份说明企业或机构需求与资安目标(SPEC开好、说清楚、讲明白) ...
小玛莉游戏机 教学原文参考:小玛莉游戏机 这篇文章会介绍如何使用「函式」、「逻辑判断」、「当按钮按下...
全球个资保护如雨後春笋般的出现,各国对於个资保护的意识更加积极主动,且也陆续参考GDPR进行个资隐私...
今天来说要如何做出一个可以左右滑的拉杆,程序码范例如下 <input type="r...
前言 该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系...