在快节奏的软件开发世界中，Web 开发人员需要快速交付的网站，而这就是 Chakra UI 的强项，它为开发者提供了一个强大且多功能的框架，使开发人员能够轻松、快速地制作美观、快速的用户界面。

在本文中，我们就和各位讨论 Chakra UI 是什么、其核心特性和功能。

先决条件

本文假设各位读者了解基本的HTML、 CSS、JavaScript和ReactJs。

Chakra UI 是什么？

Chakra UI 是一个开源前端库，提供了大量简单且可访问的组件，用于在 ReactJS 中构建快速且具有视觉吸引力的用户界面。这表示着 Chakra UI 提供了一组“预构建”组件，可用于组织应用程序的视觉层次结构。

Chakra UI 概述

需要明确的是，Chakra UI 不是一个 CSS 库，尽管它利用 CSS 进行样式设置，它通过提供具有默认样式的预样式化组件来消除编写原始 CSS 代码的“压力”。然后可以自定义这些组件的样式，以适应应用程序需要满足的任何设计规范。

Chakra UI 的优点

以下是使用 Chakra UI 的一些功能和优势。

Chakra UI 的特点和优势总结：

• 辅助功能：Chakra UI 具有非常大的辅助功能，它为组件提供了可访问的默认设置，还确保了残障人的包容性。

• 响应式设计：Chakra UI 组件在构建时考虑了响应性，允许你的 UI 适应不同的屏幕尺寸和设备。开发者可以轻松创建响应式布局并根据断点调整组件样式。

• 定制：Chakra UI 中组件的一项关键功能是其可重用与可定制的能力。这仅仅意味着每个组件都可以根据你的具体设计规范进行定制，而无需牺牲任何功能。

• 主题：Chakra UI 提供了强大的主题系统，允许开发者自定义组件的视觉外观。你可以创建多个主题并在主题之间切换，也可以更改颜色、排版、间距和其它样式属性，以匹配项目的设计和品牌。

• 内置样式道具：样式道具是一种通过向组件添加道具来改变组件样式的方法，可以有效减少了构建组件所需的时间。

下面的代码示例显示了一个使用 Chakra UI 中的文本组件的 React 组件。它使用样式道具来更改字体和颜色。

import React from "react"; import { Text } from "chakraui/react";
const MyComponent = () => { return (     <Text color="#fff" fontSize="14px">       Hello world     </Text> )   };
export default MyComponent;

• 图标库：Chakra UI 还拥有一个用于管理图标的丰富库。这意味着开发者可以轻松使用流行库中的图标，不需要再引用其它图标库。

• 表单处理和验证：Chakra UI 中的表单处理通过提供处理表单状态、验证、错误消息和表单提交的表单组件得到简化。这有助于快速跟踪表单密集型的用户界面的开发。

• TypeScript 支持：从 TypeScript 3.8.0 开始，TypeScript 应用程序支持 Chakra UI。对于在 React 项目中喜欢或需要静态类型的开发人员来说，它是一个很好的选择项。

• 开发人员体验：Chakra UI 旨在通过提供流畅高效的工作流程来增强开发人员体验。从安装和设置到样式道具的使用，再到与 TypeScript 的集成，所有这些都能够协同工作，为使用该技术的开发者提供最佳体验。

• 全面的文档和社区支持：Chakra UI 拥有完善的开发文档，涵盖使用、自定义、主题以及高级主题。它还拥有一个活跃且提供支持的开发者社区，你可以在其中寻求帮助、分享想法，也可为项目做出贡献。

安装与设置

1.首先需要在本地设备上安装Node.js，您可以从官方网站下载。

完成后，接下来需要在 ReactJs 应用程序中安装 Chakra UI。我们通过在终端中运行以下代码来完成此操作。

 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motio

这将使用 Chakra UI 初始化您的 React 应用程序。

2.需要在应用程序的根目录下设置ChakraProvider

这样以确保应用程序中组件的一致性。可以根据自己使用的框架在app.js, app.jsx, index.js, app.tsx,文件中执行此操作。

index.tsx：

import * as React from 'react'

// 1. import ChakraProvider component import { ChakraProvider } from '@chakra-ui/react'
function App() {   // 2. Wrap ChakraProvider at the root of your app   return (     <ChakraProvider>       <TheRestOfYourApplication />     </ChakraProvider> )   }

Chakra UI 中的组件

现在我们已经在 React 应用程序中设置了 Chakra UI，接下来探索 Chakra UI 中可用的组件。

之前所说，Chakra UI 具有许多用于不同目的组件，根据其功能将它们分为不同的类别。以下是其中一些主要组件：

布局

Chakra UI 中的布局组件专门设计用于帮助构建应用程序的视觉层次结构并以视觉上吸引人的方式排列组件。

其中一些组件包括：

1）Box


Box组件是一个多功能的布局组件，可以用作其他组件的容器。它提供了各种道具来控制间距、对齐与样式。




import { Box } from "@chakra-ui/react";
function MyComponent() {   return (     <Box bg="gray.200" p={4}> //"bg" specifies background and "p" specifies padding.     {/* Content goes here */}     </Box> ); }




2）Flex




Flex组件对于创建灵活且响应式的布局非常有用。它使用 Flexbox 水平或垂直排列其子组件。




import { Flex, Box } from "@chakra-ui/react";
function MyComponent() {return (<Flex direction="row" align="center" justify="space-between"><Box>Component 1</Box><Box>Component 2</Box></Flex>);}




3）Grid




Grid组件允许开发者创建响应式网格布局。可以指定列数并定义网格项，以及应如何放置在网格组件中。




import { Grid, Box } from "@chakra-ui/react";
function MyComponent() {return (<Grid templateColumns="repeat(3, 1fr)" gap={4}><Box>Component 1</Box><Box>Component 2</Box><Box>Component 3</Box></Grid>);}

媒体和图标

还有一些组件可用于一致、方便地处理媒体相关内容。

例如图像、视频和图标。这些组件是：




1）Image




Image组件用于显示图像。它提供了一种简单的方法来加载和显示图像，并提供响应行为、回退和辅助功能选项。

  import { Image } from "@chakra-ui/react";

  function MyComponent() {    return <Image src="/path/to/image.jpg" alt="Description of the image" />;  }

2）Avatar




用于通过个人资料图片代表应用程序中的用户。它允许显示具有不同尺寸选项的圆形或方形图像（头像）。

  import { Avatar } from "@chakra-ui/react";
  function MyComponent() {    return <Avatar name="Eren Jaeger" src="/path/to/avatar.jpg" />;  }




3）Video




Video组件用于嵌入来自外部源或自托管的视频。它提供了用于响应式的视频大小调整、控制自动播放及其它视频属性等多种选项。




  import { Video } from "@chakra-ui/react";
  function MyComponent() {    return <Video src="/path/to/video.mp4" controls />;  }




4）Icon




Icon用于显示流行图标库中的矢量图标，例如 Feather Icons、Font Awesome 等。开发者可以选择图标，自定义其大小和颜色，并应用其他样式。




import { Icon } from "@chakra-ui/react";  import { FaHome } from "react-icons/fa";
  function MyComponent() {    return <Icon as={FaHome} boxSize={6} color="blue.500" />;  }

导航组件




这些组件有助于简化整个应用程序的导航。它们之中一些重要的组件有：







• Link：Link组件用于在应用程序中创建可点击的链接。它提供了各种样式选项和辅助功能，以创建辅助功能和提示等。

  
  

• Navbar：该Navbar组件用于在组件中构建灵活且响应灵敏的导航栏和链接。

  
  

表单




这些组件专门设计用于简化应用程序中所有与表单相关的流程。确保收集用户输入、验证表单、管理表单提交和处理错误消息的过程和组织良好。




大多数这些组件的操作方式与HTML表单元素相同。




• 输入

• 选择

• 单选项

• 按钮

• 样式表

• 表单错误信息

• 表单辅助文本

• 复选框

  
  

段落版块




这些组件在应用程序中保存或设置文本内容的样式。




Text：Text组件用于保存应用程序中的文本和段落。Chakra UI 提供一系列样式道具来改变文本的样式。




import { Text, Stack } from '@chakra-ui/react'
  <Stack spacing={3}>    <Text fontSize='lg'>(lg) In love with React & Next</Text>    <Text fontSize='md'>(md) In love with React & Next</Text>    <Text fontSize='sm'>(sm) In love with React & Next</Text>    <Text fontSize='xs'>(xs) In love with React & Next</Text>  </Stack>

为了简洁起见，我在这里只提到主要分类，各位可以参考官方文档了解更多信息。

Chakra UI 的缺点

Chakra UI 是一个功能强大的库，但是在使用它时还会面临一些潜在的缺点。以下做列表总结：

1. 学习曲线：Chakra UI 拥有一组与大多数开发人员原有习惯的完全不同的 API 和概念。就我个人而言，我是花了一些时间才掌握这些概念，因此请记住，它可能需要一些时间和精力才能搞定。

   
   

2. 设计约束：在了解 Chakra UI 后，约束是我们面临的下一个问题。由于 Chakra UI 组件已经预先构建，因此它并不完全适合我正在开发的应用程序的设计，我必须添加额外的样式。随着时间的推移，我习惯了这一点，开发了解决这个特定问题的方法。

   
   

3. 软件包大小：将 Chakra UI 添加到应用程序中一定会增加应用程序的尺寸。如果你正在构建具有严格性能限制的应用程序，可能需要注意这一点，因为整体软件包大小可能会影响这一指标。

   
   

4. 依赖项：如果你在使用 Chakra UI 初始化 React 应用程序时，会注意到它安装了一些依赖项，其中之一是用于样式设置的Emotion 。这些依赖项可能会使项目的依赖项树变得更复杂，并可能导致应用程序中出现版本控制的问题。目前，我尚不知解决这个问题的有效方法。

   
   

结论

Chakra UI 为构建组件提供了强大的框架，对于我们开发者来说，重要的是要考量该技术的优缺点，以及它是否适合当前项目的设计和约束。

如果想用Chakra UI ，相信本文内容对你即将构建的项目有一定必要。

作者：场长