Chakra UI React - 编码一个简单的登陆页面

317 阅读10分钟

编码员们好!

这篇文章解释了如何使用Chakra UIReact库并编写一个简单的、响应式的登陆页面。该页面将只用Chakra组件构建,不使用HTML元素。对于新手来说,Chakra UI 是一个库,它允许你使用各种布局组件来构建令人惊叹的现代Web应用程序。它与其他UI框架的不同之处在于,它默认提供accessibilitydark mode 的支持。

感谢阅读!

Coding a Simple Landing Page with Chakra UI and React.

✨ 主题

在这篇文章中,你将了解不同的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 

否则,你可以手动安装CRAChakra 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中的各种屏幕尺寸。

React Chakra UI Sample - Hero Component

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

React Chakra UI Sample - About US 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的包,并导入了FaToolsFaHandshake 、和FaStar
  • Chakra UI 虽没有庞大的图标库,但它提供了一个简单的方法来扩展包。阅读更多关于使用第三方图标库的信息。
  • useMediaQuery 检查屏幕尺寸是否大于48em。isLargerThan48持有从useMediaQuery返回的布尔值。
  • Array持有要在屏幕上显示的内容,然后将内容映射到视图中。

✨ 服务组件

这个组件在左边使用一个图片,可能用来展示你项目背后的团队。

React Chakra UI Sample - Services Component.

我们来分析一下下面的代码。

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组件。

React Chakra UI Sample - Footer Component.

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**- 创建一个包含两个属性的配置对象 -initialColorModeuseSystemColorMode

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导入ChakraProviderColorModeScript ,从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 模式

在本节中,我们将创建一个开关,可以用来在浅色和深色模式之间进行切换。

React Chakra UI Sample - Dark Mode

👉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模板(一个精心策划的列表)。

Chakra UI - Curated list with FREE Starters