编码员们好!
这篇文章解释了如何使用Chakra UIReact库并编写一个简单的、响应式的登陆页面。该页面将只用Chakra组件构建,不使用HTML元素。对于新手来说,Chakra UI
是一个库,它允许你使用各种布局组件来构建令人惊叹的现代Web应用程序。它与其他UI框架的不同之处在于,它默认提供accessibility
和dark mode
的支持。
感谢阅读!
- 👉Chakra UI登陆页面- 现场演示样本
- 👉Chakra UI Landing Page- 源代码(所有组件)
- 👉 更多的Chakra UI模板(全部免费且开放源代码)
✨ 主题
在这篇文章中,你将了解不同的Chakra UI组件以及如何通过使用React.js构建一个完全响应的网页来使用它们。
闲话少说,让我们看看这篇文章中你将学习的内容的概述。
- 👉
Chakra UI
的5个主要特点 - 👉
How to setup Chakra UI
在Create-React-App中的应用 - 👉 如何使用
style Chakra UI components
- 👉 对
Nav component
进行编码 - 👉 编码
Hero component
- 👉 编码
About Us component
- 👉 编码
Services component
- 👉 编码
Footer component
- 👉 如何启用
Chakra UI Dark Mode
- 🎁 结论与
Free Resources
✨ Chakra UI,主要特点
Chakra UI提供的布局组件是现代的和无障碍的。意味着有残疾的用户可以不受任何限制地访问你的网站,无论他们的残疾情况如何。有了Chakra UI,残疾就不会成为拥有良好用户体验的障碍。
🚀高度的可定制性
Chakra UI提供的每个网络组件都是高度可定制的。你可以完全控制它们的外观和行为。Chakra UI允许你编辑和扩展UI组件以适应你的需求。例如,Chakra UI只有几个图标,但允许你轻松地扩展图标库。
🚀主题和黑暗模式支持
在你的网站上为用户手动提供不同的主题选项可能是一项乏味的工作。但是使用Chakra UI,你不需要做太多的编码,因为所有的组件都有内置的对黑暗模式的支持。
你还可以创建自定义主题或编辑Chakra UI提供的默认主题。
🚀 简单的学习曲线
Chakra UI的学习曲线很短。你不需要花很多时间学习如何使用网络组件。如果你熟悉CSS或其他UI库,如Tailwind CSS,你将在阅读文档的几分钟内掌握Chakra UI。
🚀优秀的文档
Chakra UI拥有优秀的文档,易于新老用户浏览并迅速了解其功能。Chakra UI的文档对开发者和用户都很友好。使用Chakra UI,你很可能不会遇到与UI有关的bug。
✨ 用CRA
设置Chakra UI
如前所述,我将指导你使用Chakra UI建立一个完全响应的现代网站。在此之前,让我们来安装所需的必要工具。
- 打开你的终端
- 运行下面的代码,用create-react-app(CRA)自动安装Chakra UI。
$ npx create-react-app my-app --template @chakra-ui
否则,你可以手动安装CRA
和Chakra UI
。
$ npx create-react-app react-chakra
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
在你的CRA项目中打开index.js
文件并添加ChakraProvider
。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ChakraProvider>
<App />
</ChakraProvider>
);
打开App.js
文件并复制以下代码。
import AboutUs from './components/AboutUs';
import ContactUs from './components/ContactUs';
import Footer from './components/Footer';
import Hero from './components/Hero';
import Nav from './components/Nav';
import Services from './components/Services';
import Testimonials from './components/Testimonials';
function App() {
return (
<div>
<Nav />
<Hero />
<AboutUs />
<Services />
<Testimonials />
<ContactUs />
<Footer />
</div>
);
}
export default App
从上面的代码片断中。
- 我为网页创建了结构,将其分为7个不同的组件--导航、英雄、关于我们,等等。
- 继续在src/components文件夹中创建这些组件。
一旦你成功地用Chakra UI
设置了你的CRA
项目,让我们来学习如何为Chakra UI组件样式。
✨ 如何设计Chakra组件的样式
与其他UI库不同,Chakra UI组件的样式是通过将CSS属性作为props传递给Web组件的。这使得编辑不同的Web组件的布局更容易,同时减少了你要写的样式的数量。
让我们来看看一个例子。
import React from 'react';
import { Text, Box, Flex } from '@chakra-ui/react';
const Example = () => {
return (
<Box>
<Flex
alignItems="center"
height="100vh"
bg="red.400"
justifyContent="space-between"
p="16"
>
<Text fontSize="3xl" color="green.700">
Hello World
</Text>
<Text>Welcome to Chakra UI</Text>
</Flex>
</Box>
);
};
export default Example;
从上面的代码片段来看。
- 我从
Chakra UI
中导入了三个组件。 - Text在我们的网页上渲染文本。它接受不同的道具,如
fontSize
,color
, 和其他与文本有关的属性。 Chakra UI
有一个颜色库,在这种格式下使用--颜色。不透明度。例如,blue.900意味着blue
的非常深的变体,而blue.50
是最浅的。更多信息请查看文档。Box
是与div标签相同的。Flex
代表一个显示为flex的div标签。它也接受不同的道具--bg
代表背景颜色,以及padding。
我们现在可以开始对网页的每个部分进行编码。随着我们在本文中的进一步深入,你将了解到更多关于Chakra UI中可用的不同组件。
✨ 编码导航组件
这个组件包含了网页的导航栏--标志和菜单栏。
让我们来看看下面的代码。
import React, { useState } from 'react';
import { Text, Flex, Spacer } from '@chakra-ui/react';
const Nav = () => {
const [scroll, setScroll] = useState(false);
const changeScroll = () =>
document.body.scrollTop > 80 || document.documentElement.scrollTop > 80
? setScroll(true)
: setScroll(false);
window.addEventListener('scroll', changeScroll);
return (
<Flex
h="10vh"
alignItems="center"
p="6"
boxShadow={scroll ? 'base' : 'none'}
position="sticky"
top="0"
zIndex="sticky"
w="full"
>
<Text fontSize="xl" fontWeight="bold">
Chakra Sample
</Text>
<Spacer />
<Flex alignItems="center">
<Text fontSize="md" mr="10">
About
</Text>
<Text fontSize="md">More Apps</Text>
</Flex>
</Flex>
);
};
export default Nav;
从上面的代码片段来看。
- 我从Chakra UI中导入了
Text
,Flex
, 和Spacer
组件。 - Spacer组件在柔性项目之间创建空间,类似于justify-content: space-between CSS属性。
- 当用户向下滚动网页时,
changeScroll()
功能会提升导航栏。 scroll state
用来在用户滚动网页时切换boxShadow属性。
✨ 构建Hero Component
在这里,你将了解到useMediaQuery
钩子,不同的断点,以及屏幕如何响应Chakra UI中的各种屏幕尺寸。
import {
Box,
Button,
Flex,
Image,
Spacer,
Text,
useMediaQuery,
} from '@chakra-ui/react';
import React from 'react';
import chakraHero from '../assets/chakraHero.jpg';
const Hero = () => {
const [isLargerThan62] = useMediaQuery('(min-width: 62em)');
return (
<Flex
alignItems="center"
w="full"
px={isLargerThan62 ? '16' : '6'}
py="16"
minHeight="90vh"
justifyContent="space-between"
flexDirection={isLargerThan62 ? 'row' : 'column'}
>
<Box mr={isLargerThan62 ? '6' : '0'} w={isLargerThan62 ? '60%' : 'full'}>
<Text
fontSize={isLargerThan62 ? '5xl' : '4xl'}
fontWeight="bold"
mb="4"
>
{' '}
Let's scale your business
</Text>
<Text mb="6" fontSize={isLargerThan62 ? 'lg' : 'base'} opacity={0.7}>
Hire professionals who will help your business make 10X
</Text>
<Button
w="200px"
colorScheme="blue"
variant="solid"
h="50px"
size={isLargerThan62 ? 'lg' : 'md'}
mb={isLargerThan62 ? '0' : '10'}
>
HIRE US
</Button>
</Box>
<Spacer />
<Flex
w={isLargerThan62 ? '40%' : 'full'}
alignItems="center"
justifyContent="center"
>
<Image src={chakraHero} alt="Chakra UI" />
</Flex>
</Flex>
);
};
export default Hero;
从上面的代码片段来看。
Hero component
返回父组件,Flex包含一个盒子和另一个Flex组件。Box component
包含文本和按钮组件,而子Flex组件包含图像。- 我还导入了
useMediaQuery
钩子,检查用户的屏幕尺寸是否符合指定的断点。它返回一个代表每个断点的布尔值数组。 - 如果屏幕尺寸小于62em,则变量
isLargerThan62
为假,否则为真。 isLargerThan62
也是从useMediaQuery钩子返回的布尔值数组中解构出来的。下面是Chakra UI中可用的预定义断点。这些断点也可以被扩展或定制。
✨ 编码 关于我们组件
在本节中,你将学习如何在Chakra UI中使用第三方图标库,同时构建AboutUs component
。
让我们研究一下下面的代码。
import React from 'react';
import { Flex, Spacer, Text, useMediaQuery, Icon } from '@chakra-ui/react';
import { FaTools, FaHandshake, FaStar } from 'react-icons/fa';
const AboutUs = () => {
const [isLargerThan48] = useMediaQuery('(min-width: 48em)');
const array = [
{
id: 1,
text: ' Solving world ... [truncated]',
icon: FaTools,
},
{
id: 2,
text: 'Through team work, ... [truncated]',
icon: FaHandshake,
},
{
id: 3,
text: 'Five star service with ... [truncated]',
icon: FaStar,
},
];
return (
<Flex
minH="70vh"
alignItems="center"
justifyContent="space-between"
w="full"
py="16"
px={isLargerThan48 ? '16' : '6'}
flexWrap="wrap"
flexDirection={isLargerThan48 ? 'row' : 'column'}
>
{array.map((arr) => (
<>
<Flex
height="300px"
bg="blackAlpha.200"
width={isLargerThan48 ? '32%' : 'full'}
shadow="md"
p="6"
alignItems="center"
justifyContent="center"
borderRadius="md"
flexDirection="column"
textAlign="center"
mb={isLargerThan48 ? '0' : '4'}
border="1px solid #C4DDFF"
>
<Icon as={arr.icon} boxSize={14} color="blue.600" mb="5" />
<Text>{arr.text}</Text>
</Flex>
<Spacer />
</>
))}
</Flex>
);
};
export default AboutUs;
从上面的代码片段来看。
- 我安装了一个名为react-icons的包,并导入了
FaTools
、FaHandshake
、和FaStar
。 Chakra UI
虽没有庞大的图标库,但它提供了一个简单的方法来扩展包。阅读更多关于使用第三方图标库的信息。useMediaQuery
检查屏幕尺寸是否大于48em。isLargerThan48持有从useMediaQuery返回的布尔值。- Array持有要在屏幕上显示的内容,然后将内容映射到视图中。
✨ 服务组件
这个组件在左边使用一个图片,可能用来展示你项目背后的团队。
我们来分析一下下面的代码。
import {
Flex,
Spacer,
Image,
Text,
Button,
useMediaQuery,
} from '@chakra-ui/react';
import React from 'react';
import teamImage from '../assets/teamImage.jpg';
const Services = () => {
const [isLargerThan62] = useMediaQuery('(min-width: 62em)');
return (
<Flex
width="full"
minHeight="70vh"
alignItems="center"
px={isLargerThan62 ? '16' : '6'}
py="16"
justifyContent="center"
flexDirection={isLargerThan62 ? 'row' : 'column'}
>
<Flex
w={isLargerThan62 ? '40%' : 'full'}
mb={isLargerThan62 ? '0' : '6'}
alignItems="center"
justifyContent="center"
>
<Image src={teamImage} alt="Chakra Team" w="full" />
</Flex>
<Spacer />
<Flex
w={isLargerThan62 ? '60%' : 'full'}
flexDirection="column"
ml={isLargerThan62 ? '7' : '0'}
>
<Text fontSize={isLargerThan62 ? '5xl' : '4xl'} fontWeight="bold">
We build, We revive
</Text>
<Text mb="6" opacity="0.8">
Your business needs to be .. [truncated]
</Text>
<Button width="200px" size="lg" colorScheme="blue">
CONTACT US
</Button>
</Flex>
</Flex>
);
};
export default Services;
从上面的代码来看,Chakra UI
提供了一个图像组件,用来显示图像。它也接受与HTML中的IMG标签相同的道具。
✨ 编码页脚组件
在本节中,我们将建立网页的页脚部分,并学习Chakra UI
中的Link组件。
import { Flex, Text, Link } from '@chakra-ui/react';
import React from 'react';
const Footer = () => {
return (
<Flex
w="full"
bg="blackAlpha.50"
minHeight="20vh"
flexDirection="column"
alignItems="center"
textAlign="center"
justifyContent="center"
>
<Text mb="3">
Provided by{' '}
<Link href="https://appseed.us" isExternal color="blue.500">
AppSeed
</Link>
</Text>
<Text opacity="0.5">Open-Source Sample - Buit with Chakra UI</Text>
</Flex>
);
};
export default Footer;
从上面的代码片段来看。
Link
是一个组件,用于导航到网站的各个部分或外部资源。Link
接受一个isExternal
,用于链接外部资源的道具。
✨ 启用黑暗模式
本节解释了如何使用useColorModeValue
启用黑暗模式和添加自定义配色方案。 以下是步骤。
👉**#1**- 在
src
文件夹中创建一个theme.js
文件并导入extendTheme
//in theme.js
import { extendTheme } from '@chakra-ui/react';
👉**#2**- 创建一个包含两个属性的配置对象 -
initialColorMode
和useSystemColorMode
。
import { extendTheme } from '@chakra-ui/react';
const config = {
initialColorMode: 'light',
useSystemColorMode: false,
};
从上面的代码片段来看。
initialColorMode
代表用户第一次访问你的网站时显示的初始颜色模式。useSystemColorMode
- 可以是真,也可以是假。
👉**#3**- 创建一个主题变量并使用
extendTheme
输出配置。
import { extendTheme } from '@chakra-ui/react';
const config = {
initialColorMode: 'light',
useSystemColorMode: false,
};
const theme = extendTheme({ config });
export default theme;
👉**#4**- 编辑
index.js
文件以使用ChakraProvider
从Chakra UI导入ChakraProvider
和ColorModeScript
,从theme.js
导入主题。
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import theme from './theme'
👉**#5**- 启用对主题设置的访问(所有组件)。
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import theme from './theme';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ChakraProvider>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<App />
</ChakraProvider>
);
最后,我们已经在我们的Web应用程序中设置了黑暗模式。接下来,让我们学习如何在浅色和深色模式之间切换。
✨ 切换dark
/light
模式
在本节中,我们将创建一个开关,可以用来在浅色和深色模式之间进行切换。
👉1#- 打开 src/components/Nav.js 并导入以下内容。
import { useColorMode, useColorModeValue } from '@chakra-ui/react';
/*
useColorMode is a hook that selects and toggles between different colour modes.
useColorModeValue is a hook that allows you to select the colour you want a Chakra UI component to change to.
*/
👉2#- 在组件中声明钩子
import { useColorMode, useColorModeValue } from '@chakra-ui/react';
const Nav = () => {
const { colorMode, toggleColorMode } = useColorMode();
const navBg = useColorModeValue('white', 'blackAlpha.200');
....
....
return (
<Flex
bg={navBg}
>
....
....
</Flex>
)
}
export default Nav;
从上面的代码片段来看
colorMode
持有当前的颜色方案,toggleColorMode是将颜色方案从浅色变为深色的函数。navBg
是一个变量,决定了Flex组件在两种颜色模式下的确切颜色。在浅色模式下,背景颜色为白色,而在dark mode
,背景颜色为blackAlpha.200
。
👉3#- 添加点击时切换颜色模式的图标
import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react';
import { MoonIcon, SunIcon } from '@chakra-ui/icons';
const Nav = () => {
const { colorMode, toggleColorMode } = useColorMode();
const navBg = useColorModeValue('white', 'blackAlpha.200');
....
....
return (
<Flex
bg={navBg}
>
<IconButton onClick={toggleColorMode}>
{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
</IconButton>
....
....
</Flex>
)
}
export default Nav;
从上面的代码片断来看。
- 如果
colorMode
,它显示月亮图标,否则它显示太阳图标。 - 当图标被点击时,它也会调用
toggleColorMode
函数。
✨ 结论与资源
在这篇文章中,我们已经能够使用Chakra UI建立一个完整的、完全响应的网页。你也已经了解了Chakra UI中的各种布局组件。
Chakra UI使你能够用更少的代码建立一个现代化的网站。通过其易于浏览的文档,你可以了解到Chakra UI提供的各种布局组件和功能。
它提供了一种简洁有效的方式来使用本地存储改变颜色模式。如果你想建立一个允许用户选择不同颜色模式的网站,Chakra UI是一个很好的选择。
谢谢你的阅读!如需更多资源,请随时访问免费的Chakra UI模板(一个精心策划的列表)。