介绍

Chakra UI是一个在Github上开源的React组件库。具备简单灵活模块化的特点，可以使用它来轻松构建你的React应用，虽然国内大厂阿里巴巴开源的的Antd也是一个非常好的组件，但是Chakra UI也带来了另一个选择，最主要的是和antd拥有完全不一样的风格样式！

Github

目前Github上已经拥有10k+的star数，基于MIT开源许可

https://github.com/chakra-ui/chakra-ui

特性

• 易于设计

Chakra UI包含一组布局组件，例如Box和Stack，可通过传递属性轻松设置组件的样式

import { Box } from "@chakra-ui/core";

// m={2} refers to the value of `theme.space[2]`
Tomato;

// You can also use custom values
;

// sets margin `8px` on all viewports and `12px` from the first breakpoint and up
;

• 灵活且可组合

Chakra UI组件基于React UI Primitive构建，具有无限的可组合性。

• 可靠性

Chakra UI组件遵循WAI-ARIA准则规范，并具有正确的aria- *属性。

• 暗黑模式

Chakra UI中的大多数组件都兼容暗模式。

组件预览

以下仅展示部分组件截图

• 手风琴

import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionPanel,
  AccordionIcon,
} from "@chakra-ui/core";

• 警示框

import {
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@chakra-ui/core";

• 弹出提示框

import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
} from "@chakra-ui/core";

• 头像

import { Avatar, AvatarBadge } from "@chakra-ui/core";

• 面包屑

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
} from "@chakra-ui/core";

• 按钮

import { Button } from "@chakra-ui/core";

• 复选框

import { Checkbox, CheckboxGroup } from "@chakra-ui/core";

• 边栏抽屉

import {
  Drawer,
  DrawerBody,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
} from "@chakra-ui/core";

• 内置图标

import { Icon } from "@chakra-ui/core";

  {/* Default size is 1em => 16px */}
  

  {/* Use the `size` prop to change the icon size */}
  

  {/* Use the `color` prop to change the icon color */}
  

• 输入框

import { Input } from "@chakra-ui/core";

• 模态框

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
} from "@chakra-ui/core";

• 悬浮提示框

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  PopoverArrow,
  PopoverCloseButton,
} from "@chakra-ui/core";

• 进度条

import { Progress } from "@chakra-ui/core";

• 骨架屏

import { Skeleton } from "@chakra-ui/core";

• 拖动条

• loading提示框

• 开关按钮

import { Switch } from "@chakra-ui/core";

• 标签栏

import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/core";

• 标签

import { Tag, TagIcon, TagLabel, TagCloseButton } from "@chakra-ui/core";

• 消息提示框

import { useToast } from "@chakra-ui/core";

总结

以上只是部分组件，完整的组件和具体的用法可以参考官方文档！