Chakra-UI 学习笔记
Chakra-UI 学习笔记
文章出处: 拉 勾 大前端 高薪训练营
现代化 React UI 框架 Chakra-UI
1. Chakra-UI 介绍
Chakra UI是一个简单的,模块化的易于理解的UI组件库.提供了丰富的构建React应用所需的U|组件.
文档: https://next.chakra-ui.com/docs/getting-started
- Chakra UI内置Emotion,是CSS-IN-JS解决方案的集大成者
- 基于Styled-Systems https://styled-system.com/
- 支持开箱即用的主题功能
- 默认支持白天和黑夜两种模式
- 拥有大量功能丰富且非常有用的组件
- 使响应式设计变得轻而易举
- 文档清晰而全面.查找API更加容易
- 适用于构建用于展示的给用户的界面
- 框架正在变得越来越完善
2. Chakra-UI 快速开始
2.1 下载 Chakra-UI
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
2.2 克隆默认主题
Chakra-UI 提供的组件是建立在主题基础之上的,只有先引入了主题组件才能够使用其他组件。
npm install @chakra-ui/theme
2.3 引入主题
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import theme from '@chakra-ui/theme'
import { ChakraProvider } from "@chakra-ui/react"ReactDOM.render(<ChakraProvider theme={theme}><App /></ChakraProvider>,document.getElementById('root')
);
2.4 依赖清单
{"name": "chakra-ui-guide","version": "0.1.0","private": true,"dependencies": {"@chakra-ui/react": "^1.0.4","@chakra-ui/theme": "^1.2.2","@emotion/react": "^11.1.3","@emotion/styled": "^11.0.0","@testing-library/jest-dom": "^5.11.4","@testing-library/react": "^11.1.0","@testing-library/user-event": "^12.1.10","framer-motion": "^3.1.1","react": "^17.0.1","react-dom": "^17.0.1","react-scripts": "4.0.1","web-vitals": "^0.2.4"},"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},"eslintConfig": {"extends": ["react-app","react-app/jest"]},"browserslist": {"production": [">0.2%","not dead","not op_mini all"],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]}
}
2.5 引用组件
import { Button } from '@chakra-ui/react'function App() {return (<div><Button>submit</Button></div>);
}export default App;
3. Style Props 样式属性
Style Props 是用来更改组件样式的,通过为组件传递属性的方式实现。通过传递简化的样式属性一达到提升开发效率的目的。可以在https://chakra-ui.com/docs/features/style-props查看样式简写
Prop | CSS Property | Theme Key |
---|---|---|
m , margin
|
margin
|
space
|
mt , marginTop
|
margin-top
|
space
|
mr , marginRight
|
margin-right
|
space
|
mb , marginBottom
|
margin-bottom
|
space
|
ml , marginLeft
|
margin-left
|
space
|
mx
|
margin-left and margin-right
|
space
|
my
|
margin-top and margin-bottom
|
space
|
p , padding
|
padding
|
space
|
pt , paddingTop
|
padding-top
|
space
|
pr , paddingRight
|
padding-right
|
space
|
pb , paddingBottom
|
padding-bottom
|
space
|
pl , paddingLeft
|
padding-left
|
space
|
px
|
padding-left and padding-right
|
space
|
py
|
padding-top and padding-bottom
|
space
|
如何使用:
import { Box } from '@chakra-ui/react'function App() {return (<div><Box w={256} h={200} bg='tomato'>Box</Box></div>);
}export default App;
4. 主题
4.1 颜色模式(color mode)
chakra-ui 提供的组件都支持两种颜色模式,浅色模式(light)和暗色模式(dark).
可以通过 useColorMode 进行颜色模式的更改。
import { Box, Text, Button, useColorMode } from '@chakra-ui/react'function App() {const {colorMode, toggleColorMode} = useColorMode() // 注意这里是对象解构,不是数组解构return (<Box w={256} h={200} bg='tomato'><Text>当前的颜色模式为 {colorMode}</Text><Button onClick={toggleColorMode}>切换颜色模式</Button></Box>);
}export default App;
Chakra 将颜色模式存储在 localStorage 中,并使用类名策略来确保颜色模式是持久的
4.2 根据颜色模式设置样式
chakra 允许在为元素设置样式时根据颜色模式产生不同值。通过 useColorModeValue 钩子函数实现
import { Box, useColorModeValue } from '@chakra-ui/react'
const bg = useColorModeValue('tomato', 'skyblue')<Box w={256} h={200} bg={bg}></Box>
4.3 强制组件颜色模式
使组件不受颜色模式的影响,始终保持在某个颜色模式下的样式,使用 LightMode 组件包裹需要作用的组件只显示浅色模式,,使用 DarkMode 组件包裹需要作用的组件只显示暗色模式
import { Button, LightMode } from '@chakra-ui/react'
<LightMode><Button onClick={toggleColorMode}>切换颜色模式</Button>
</LightMode>
4.4颜色模式通用设置
设置默认颜色模式
通过 theme.config.initialColorMode 可以设置应用使用的默认主题.使用操作系统所使用的颜色模式
通过 theme.config.useSystemColorMode 可以设置将应用的颜色模式设置为操作系统所使用的颜色模式.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import theme from '@chakra-ui/theme'
import { ChakraProvider } from "@chakra-ui/react"// 1. 设置默认颜色模式
// theme.config.initialColorMode = 'dark'// 2. 使用操作系统所使用的颜色模式
theme.config.useSystemColorMode = trueReactDOM.render(<ChakraProvider theme={theme}><App /></ChakraProvider>,document.getElementById('root')
);
4.5 主题对象
- Colors
在设置颜色时,可以但不限于取主题对象中的颜色值
function App() {return <Box w={200} h={200} bg="cyan.500"></Box>
}
- Space
使用 space 可以自定义项目间距。这些间距值可以由 width, height 和 maxWidth, minWidth 等样式引用
<Box mt={6} w="lg" h="2xl" ></Box> <!-- lg => 32rem -->
- Breakpoints
配置响应数组值中使用的默认断点。这些值将用于生成移动优先(即最小宽度)的媒体查询
// theme.js
export default {breakpoints: ["30em", "48em", "62em", "8Øem"] ,
};
<Box fontSize={["12px", "14px", "16px", "18px", "20px"]}></Box>
4.6 创建标准的Chakra-Ul组件
- 创建 Chakra-Ul 组件
import {chakra} from '@chakra-ui/react'
const LaGouButton = chakra("button", {baseStyle: {borderRadius: 'lg'},sizes: {sm: {px: '3', // padding-left/padding-rightpy: '1', // padding-right/padding-bottomfontSize: '12px'},md: {px: '4',py: '2',fontSize: '14px'}},variants: { // 风格化样式primary: {bgColor: 'blue.500',color: 'white'},danger: {bgColor: 'red.500',color: 'white'}}
});LaGouButton.defaultProps = {size: 'sm',variant: 'primary'
};function App() {return (<div><LaGouButton> 按钮 </LaGouButton></div>)
}export default App;
- 全局化Chakra-UI组件样式
a. 在 src 文件夹中创建 LaGou 文件夹用于放置自定义Chakra-UI组件
b. 在 lagou 文件夹中创建 Button.js 文件并将组件样式放置于当前文件中并进行默认导出
const LaGouButton = {baseStyle: {borderRadius: 'lg'},sizes: {sm: {px: '3', // padding-left/padding-rightpy: '1', // padding-right/padding-bottomfontSize: '12px'},md: {px: '4',py: '2',fontSize: '14px'}},variants: { // 风格化样式primary: {bgColor: 'blue.500',color: 'white'},danger: {bgColor: 'red.500',color: 'white'}},defaultProps: {size: 'sm',variant: 'primary'}
}export default LaGouButton
c. 在 LaGou 文件夹中创建 index.js 文件用于导入导出所有的自定义组件
import LaGouButton from './Button'export default {LaGouButton
}
d. 在 src 文件夹中的 index.js 文件中导入自定义 Chakra-UI 组件并和 components 属性进行合并
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import theme from '@chakra-ui/theme'
import { ChakraProvider } from "@chakra-ui/react"
import LaGouComponents from './LaGou'const myTheme = {...theme,components: {...theme.components,...LaGouComponents}
}console.log(myTheme)ReactDOM.render(<ChakraProvider theme={myTheme}><App /></ChakraProvider>,document.getElementById('root')
);
e. 在组件中使用样式化组件
import {chakra} from '@chakra-ui/react'
const LaGouButton = chakra("button", {themeKey: 'LaGouButton'
});function App() {return (<div><LaGouButton> 按钮 </LaGouButton></div>)
}export default App;
Chakra-UI 学习笔记相关推荐
- UI学习笔记---EasyUI panel插件使用---03
UI学习笔记---EasyUI panel插件使用---03 UI学习笔记---EasyUI panel插件使用---03 1.panel简单小例子 ------------------- 2.可以自 ...
- Ui学习笔记---EasyUI的EasyLoader组件源码分析
Ui学习笔记---EasyUI的EasyLoader组件源码分析 技术qq交流群:JavaDream:251572072 1.问题1:为什么只使用了dialog却加载了那么多的js http: ...
- Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用
Ui学习笔记---EasyUI的使用方法,EasyLoader组件使用 技术qq交流群:CreDream:251572072 1.使用之前导入文件: 这里用jquery-easyui-1.2.6 ...
- Ui学习笔记---EasyUI的介绍
Ui学习笔记---EasyUI的介绍 -------------------------- 1.组织: a.EasyUI官方:http://www.jeasyui.com EasyUI是一 ...
- 基于AngularJS的Onsen UI --Onsen UI学习笔记
AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...
- 基于AngularJS的Onsen UI --Onsen UI学习笔记
AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...
- UI学习笔记---第十四天数据持久化
一.沙盒机制 每个应用程序位于文件系统的严格限制部分 每个应用程序只能在为该程序创建的文件系统中读取文件 每个应用程序在iOS系统内斗放在了统一的文件夹目录下 沙盘路径的位置 1. 通过Finder查 ...
- Onsen UI 学习笔记之二:路由
上次写好了登录页,登录成功之后如何呢? 登录成功之后应该进入用户主页,主页上有显示操作的菜单,对吧. 为了完成上述目标,我们需要添加一个组件Vue Router 添加Vue Router 注意vue ...
- Element Ui 学习笔记(部分)
border-radius 边界半径 margin-bottom 页边距底部 grid-content 网格内容 min-height 最小高度 padding 凑篇幅的文字 gutter 檐沟(属性 ...
- NGUI 学习笔记实战——制作商城UI界面
Unity3D的uGUI听说最近4.6即将推出,但是目前NGUI等UI插件大行其道并且已经非常成熟,所以我们还是先看眼前吧. 一.实现思想 商城的功能是很多游戏都拥有的,按下一个界面按钮,弹出一个窗体 ...
最新文章
- iOS ---网络请求封装(自动缓存与手动缓存)
- 9月22日 奇怪的贸易
- django 快速实现session的操作
- vijos p1433——火炬手之梦
- 对python的意思_python的意思
- 路径规划之曲线插值拟合算法分析
- 电子相册系统(八)验证用户是否可用
- SDL如何嵌入到QT中?!
- SQL-(增)-插入操作
- 华为c8818刷原生Android 6,华为C8818刷机教程_华为C8818强刷官方rom系统包
- 计算机视觉——图像检索与识别
- hbase版本对应的hadoop版本
- Wii 补充运动利器
- 安卓中如何获取MD5码
- JUnit之Rule的使用
- read/write 阻塞/非阻塞
- pdf转换工具有哪些?试一试这几个方法!
- Hololens学习(三)打包编译安装HoloLens2应用
- Pycharm远程调试服务器代码出错:[Errno 2] No such file or directory
- python填写问卷星_使用Python自动填写问卷星(pyppeteer反爬虫版)
热门文章
- 【重磅】2021年SCI影响因子滚烫式公布!各领域TOP期刊!(附下载链接)
- 云中和花木_王者荣耀:体验服4位英雄加强,狂铁不再“漏电”,云中君又行了...
- 商丘学院计算机考研,商丘学院院校简介_商丘学院研究生院 - 中国考研网
- Sublime Text的使用代码块安装的模块
- 美国服务器怎么怎么修改密码,RAKsmart美国服务器更改密码的简单方法
- XSS笔记-来源于个人思路构造以及网络分享
- 沉淀近900万+营销资产,天攻智投户外营销助力网易有道实现“品效双赢”
- Unity iOS包打出的app名称空格丢失
- 【GANs学习笔记】目录
- 菲尼克斯2961105继电器REL-MR- 24DC/21