Reacr -- Chakra-UI

Chakra-UI 介绍

• Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React 应用所需的UI组件.
• 文档: https://next.chakra-ui.com/docs/getting-started
• Chakra UI 内置 Emotion，是 CSS-IN-JS 解决方案的集大成者
• 基于 Styled-Systems https://styled-system.com/
• 支持开箱即用的主题功能
• 默认支持白天和黑夜两种模式
• 拥有大量功能丰富且非常有用的组件
• 使响应式设计变得轻而易举
• 文档清晰而全面. 查找API更加容易
• 适用于构建用于展示的给用户的界面
• 框架正在变得越来越完善

Chakra-UI 快速开始

• 下载 chakra-ui

  npm install @chakra-ui/[email protected]
  

• 克隆默认主题

  • Chakra-UI 提供的组件是建立在主题基础之上的, 只有先引入了主题组件才能够使用其他组件

    npm install @chakra-ui/theme
    

• 引入主题

• 引入 CSS 重置组件

  import { ChakraProvider, CSSReset } from "@chakra-ui/core";
  import theme from '@chakra-ui/theme';
  
  
  	
  	
  
  

Style Props 样式属性

• Style Props 是用来更改组件样式的, 通过为组件传递属性的方式实现. 通过传递简化的样式属性以达到提升开发效率的目的
  
  

主题

颜色模式(color mode)

• chakra-ui 提供的组件都支持两种颜色模式, 浅色模式(light)和暗色模式(dark).
• 可以通过 useColorMode 进行颜色模式的更改
  
• Chakra 将颜色模式存储在 localStorage 中, 并使用类名策略来确保颜色模式是持久的

根据颜色模式设置样式

• chakra 允许在为元素设置样式时根据颜色模式产生不同值. 通过 useColorModeValue 钩子函数实现
  

强制组件颜色模式

• 使组件不受颜色模式的影响, 始终保持在某个颜色模式下的样式
  

颜色模式通用设置

• 设置默认颜色模式
  • 通过 theme.config.initialColorMode 可以设置应用使用的默认主题
• 使用操作系统所使用的颜色模式
  • 通过 theme.config.useSystemColorMode 可以设置将应用的颜色模式设置为操作系统所使用的颜色模式.

主题对象

• Colors
  • 在设置颜色时, 可以但不限于取主题中提供的颜色值
    
    

Space

• 使用 space 可以自定义项目间距. 这些间距值可以由 padding, margin 和 top, left, right,bottom 样式引用.
  

Sizes

• 使用 size 可以自定义元素大小, 这些值可以由 width, height 和 maxWidth, minWidth 等样式引用
  

Breakpoints

• 配置响应数组值中使用的默认断点. 这些值将用于生成移动优先(即最小宽度)的媒体查询
  
  

创建标准的 Chakra-UI 组件

• 创建 Chakra-UI 组件
  

全局化 Chakra-UI 组件样式

• 在 src 文件夹中创建 lagou 文件夹用于放置自定义 Chakra-UI 组件

• 在 lagou 文件夹中创建 button.js 文件并将组件样式放置于当前文件中并进行默认导出
  

• 在 lagou 文件夹中创建 index.js 文件用于导入导出所有的自定义组件
  

• 在 src 文件夹中的 index.js 文件中导入自定义 Chakra-UI 组件并和 components 属性进行合并
  

• 在组件中使用样式化组件
  

构建注册表单

import React from "react";
import {
  Input,
  Stack,
  InputGroup,
  InputLeftAddon,
  InputRightAddon,
  FormControl,
  Button,
  RadioGroup,
  Radio,
  Select,
  Switch,
  FormLabel,
  Flex,
  FormHelperText,
} from "@chakra-ui/core";

import { FaUserAlt, FaLock, FaCheck } from "react-icons/fa";

export default function SignUp() {
  return (
    

      
        
          
            } />
            
          
          用户名是必填选项
        
        
          } />
          
          } />
        
        
          
            男
            女
          
        
        
          Java
          大前端
        
        
          
          
            是否同意协议
          
        
        
          注册
        
      
    
  );
}

Tabs 组件的使用

import React from "react";
import {
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Box,
  Image,
  useColorModeValue
} from "@chakra-ui/core";
import SignUp from "./SignUp";
import SignIn from "./SignIn";

import chakraUILight from "../assets/images/chakra-ui-light.png";
import chakraUIDark from '../assets/images/chakra-ui-dark.png';

export default function Form() {
  const bgColor = useColorModeValue('gray.200', 'gray.700');
  const chakraUI = useColorModeValue(chakraUILight, chakraUIDark)
  return (
    
      
      
        
          注册
          登录
        
        
          
            
          
          
            
          
        
      
    
  );
}

选项卡组件的使用方式

import React from "react";
import { Box, Image, Badge, Text, Stack, Flex, Button, useColorModeValue, useColorMode } from "@chakra-ui/core";
import chakraUI from "../assets/images/chakra-ui.png";
import { AiFillStar } from "react-icons/ai";

export default function Card() {
  const bgColor = useColorModeValue('gray.200', 'gray.700');
  const textColor = useColorModeValue('gray.700', 'gray.100');
  return (
    
      
      
        
          
            New
          
          
            React
          
          
            Chakra-UI
          
          拉钩出品 必属精品
        
        
          Chakra-UI 框架专题课程
        
        
          Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建
          React 应用所需的UI组件.
          在整个应用程序中，在任何组件上快速、轻松地引用主题中的值。组件的构建考虑到了组合。你可以利用任何组件来创造新事物。Chakra-UI
          严格遵循WAI-ARIA标准。所有组件都有适当的属性和现成的键盘交互。Chakra
          UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React
          应用所需的UI组件.
        
        
          
            
            
            
            
          
          
          100 评论
        
      
      登录
    
  );
}