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/core@1.0.0-next.2

克隆默认主题
- Chakra-UI 提供的组件是建立在主题基础之上的, 只有先引入了主题组件才能够使用其他组件
```
npm install @chakra-ui/theme
```
引入主题

引入 CSS 重置组件

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

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 (<form><Stack spacing={5}><FormControl isDisabled isInvalid><InputGroup><InputLeftAddon children={<FaUserAlt />} /><Input placeholder="请输入用户名" /></InputGroup><FormHelperText>用户名是必填选项</FormHelperText></FormControl><InputGroup><InputLeftAddon children={<FaLock />} /><Input type="passowrd" placeholder="请输入密码"/><InputRightAddon children={<FaCheck />} /></InputGroup><RadioGroup defaultValue="0"><Stack spacing={5} direction="horizontal"><Radio value="0">男</Radio><Radio value="1">女</Radio></Stack></RadioGroup><Select appearance="none" placeholder="请选择学科"><option value="Java">Java</option><option value="大前端">大前端</option></Select><Flex><Switch id="deal" mr={2} /><FormLabel mr="0" mb="0" htmlFor="deal">是否同意协议</FormLabel></Flex><Buttontype="submit"boxShadow="xl"colorScheme="teal"w="100%"_hover={{ bgColor: "tomato" }}>注册</Button></Stack></form>);
}

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 (<Box bgColor={bgColor} p={3} w="100%" boxShadow="lg" borderRadius="lg"><Image w="250px" mx="auto" mt="2" mb="6" src={chakraUI} /><Tabs isFitted><TabList><Tab _focus={{ boxShadow: "none" }}>注册</Tab><Tab _focus={{ boxShadow: "none" }}>登录</Tab></TabList><TabPanels><TabPanel><SignUp /></TabPanel><TabPanel><SignIn /></TabPanel></TabPanels></Tabs></Box>);
}

选项卡组件的使用方式

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 (<BoxbgColor={bgColor}w={1 / 2}borderRadius="lg"boxShadow="lg"overflow="hidden"><Image src={chakraUI} /><Box p={3}><Stack direction="horizontal" align="center"><Badge variant="solid" colorScheme="teal" borderRadius="full" px="2">New</Badge><Badge variant="solid" colorScheme="teal" borderRadius="full" px="2">React</Badge><Badge variant="solid" colorScheme="teal" borderRadius="full" px="2">Chakra-UI</Badge><Text color={textColor}>拉钩出品 必属精品</Text></Stack><TextfontSize="xl"pt={3}pb={2}color={textColor}as="h3"fontWeight="semibold">Chakra-UI 框架专题课程</Text><Text fontWeight="light" fontSize="sm" lineHeight="tall">Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建React 应用所需的UI组件.在整个应用程序中，在任何组件上快速、轻松地引用主题中的值。组件的构建考虑到了组合。你可以利用任何组件来创造新事物。Chakra-UI严格遵循WAI-ARIA标准。所有组件都有适当的属性和现成的键盘交互。ChakraUI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React应用所需的UI组件.</Text><Flex align="center" mt={2}><Flex color="teal.500"><AiFillStar /><AiFillStar /><AiFillStar /><AiFillStar /></Flex><AiFillStar /><Text ml={1}>100 评论</Text></Flex></Box><Button w="100%" colorScheme="teal">登录</Button></Box>);
}

Reacr -- Chakra-UI相关推荐

Chakra UI Pro (Marketing + Application UI + ECommerce)
Chakra UI Pro (Marketing + Application UI + ECommerce) 快速创建可访问的 React 应用程序 Chakra UI 是一个简单.模块化且可访问的 ...
React UI 组件库 Chakra UI - 02 颜色模式
Color Mode 颜色模式 Chakra UI 内置支持管理应用程序的颜色模式,默认可配置的颜色模式有浅色模式(light).暗色模式(dark).系统模式(system). 大部分组件默认都支持 ...
React UI 组件库 Chakra UI - 01 v1.0介绍和快速使用
Chakra UI Chakra UI 是简单.模块化和可访问的 UI 组件库. 本文 Chakra UI 版本:v1.6.2 基于 React 和 Emotion(CSS-IN-JS 方案库) 基于 ...
React UI 组件库 Chakra UI - 03主题对象和 chakra factory
主题对象使用 Chakra UI 默认主题对象中包含很多样式的预设值. 打印 theme 对象: 在使用样式属性设置样式的时候,Chakra 会先从主题对象中获取对应的预设值,如果不存在,则将值作为 ...
React UI 组件库 Chakra UI - 05 案例实践
案例实践使用 create-react-app 新建项目. 表单使用 Chakra UI 实现下图的表单: 构建注册表单 react-icons 是一个 React 流行图标库. // compo ...
如何在 React 应用程序中使用 Chakra UI
Chakra UI 是一个用于 React 的 UI 库,它提供了一组简单.模块化且易于访问的组件,用于构建快速美观的用户界面.它旨在实现高度可定制,并提供出色的开发人员体验,能够使用基于 JavaS ...
React UI 组件库 Chakra UI - 04全局组件样式配置
全局组件样式配置官方文档:Component Style 基础样式和修改器样式大多数组件的样式由基础样式和修改器样式组成,修改器样式根据某些特性或状态更改其大小或视觉样式. 基础样式:默认样式修 ...
react ui框架_顶级React组件库推荐
作者丨Max Rozen 译者丨王强策划丨小智转发链接:https://mp.weixin.qq.com/s/-vRr8Qd8DCNiza09eZjmbQ 本文最初发布于 maxrozen.com ...
Chakra-UI——React UI 框架
Chakra-UI 介绍快速上手下载 Chakra-UI 克隆默认主题主题的引入 Style Props 样式属性主题颜色模式(color mode) 根据颜色模式设置样式强制设置组件颜色 ...
全新的 React 组件设计理念 Headless UI
其实,最早接触 Headless UI 是在去年,碰巧看到了一个非常前沿且优秀的组件库 ---- Chakra UI,这个组件库本身就是 Headless UI 的实践者,同时也是 CSS-IN-JS ...

Reacr -- Chakra-UI

主题

Reacr -- Chakra-UI相关推荐

最新文章

热门文章