Chakra-ui — 比antd更具自由度
介绍
Chakra-ui是专门用于react开发的现代化结构。其官方地址为：https://next.chakra-ui.com/docs/getting-started
特色
- 内置Emotion库，天然支撑css-in-js解决方案
- 依据Styled-Systems
- 支撑开箱即用的主题功能
- 默许支撑白天和黑夜两种主题款式
- 具有大量功能丰厚并且十分有用的组件
- 使得呼应式的设计变得十分轻松
- 完整可用的文档
- 特别适合构建给用户展现的页面
- 结构活跃度高，目前还在活跃保护中
下载
npm install @chakra-ui/core@1.0.0-next.x
npm isntall @chakra-ui/theme
这儿需求着重的是，chakra的ui组件依据主题款式，所以必须首先引进主题。
基本运用
运用主题的结构和款式重置
import { ChakraProvider } from '@chakra-ui/core';
import theme from '@chakra-ui/theme';
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
一般来说还需求重置款式：
import { ChakraProvider， CSSReset } from '@chakra-ui/core';
import theme from '@chakra-ui/theme';
<ChakraProvider theme={theme}>
<CSSReset />
<App />
</ChakraProvider>
Style Props列表
chakra中的组件都支撑运用props直接设置款式的行为，下表展现的是常用的一些style props:
运用举例：
import {Box} from '@chakra-ui/core';
<Box w={200} h={200} bg='tomato' p='3px'> Hello chakra-ui </Box>
主题的运用
chakra供给了名为useColorMode的钩子函数，此钩子函数执行之后回来当时的主题和改动主题的办法。
import { useColorMode } from '@chakra-ui/core';
const [colorMode, toggleColorMode] = useColorMode();
<Text>当时的颜色形式为{colorMode==='light'?'light':'dark'}</Text>
<Button onClick={toggleColorMode}>切换颜色形式</Button>
明显colorMode能够成为三目表达式的判别条件，以此条件判别能够定制在light或者dark形式下页面的显现状况的不同。
而同toggleColorMode办法执行的结果就是在light和dark形式两者之间进行切换。
注意：chakra-ui对主题的切换是会同步到localStorage中的，也就是组件内部自动封装好了耐久化；这意味着浏览器刷新之后当时的形式仍然是生效的
上面运用三元表达式定制不同形式下的款式的做法显得不是很好，实践上组件供给了另外的钩子函数useColorModeValue，其间封装了对当时形式的判别：
import { useColorModeValue } from '@chakra-ui/core';
...
const bgColor = useColorModeValue(lightValue, darkValue);
<Box bgColor={bgColor}></Box>
强制主题
假如运用了chakra中供给的封装组件，那么在mode切换的时分，在默许情况下，这些组件的款式也会相应的做出改动。有的时分或许会有如下的需求：
- 不管子啊light仍是dark形式下都想要运用light下的主题配色，这个时分就能够运用chakra供给的
<lightMode>组件了。被此组件包裹的内容不会再收到mode切换的影响，将会强制运用light形式下的配色。
import {LightMode, DarkMode } from '@chakra-ui/core';
<LightMode>
<Button onClick={toggleColorMode}>尝试切换主题颜色</Button>
</LightMode>
设置默许主题
chakra供给了两种设置默许主题的办法：’自界说’和’与操作系统风格坚持一致’
自界说默许主题
在根组件的return办法前面经过theme.config.initialColorMode进行设置，值为’light’|’dark’。
import theme from "@chakra-ui/theme";
theme.config.initialColorMode = 'dark';
ReactDOM.render(
<ChakraProvider theme={myTheme}>
<CSSReset />
<App />
</ChakraProvider>,
document.getElementById("root")
);
主题跟从操作系统
在根组件的return办法前面经过theme.config.useSystemColorMode进行设置，值为boolean类型的。
import theme from "@chakra-ui/theme";
theme.config.useSystemColorMode = true;
ReactDOM.render(
<ChakraProvider theme={myTheme}>
<CSSReset />
<App />
</ChakraProvider>,
document.getElementById("root")
);
主题目标
下面以主题中供给的颜色为例阐明chakra中的主题目标。
1. Colors — 界说颜色和布景色
运用方法：
<Box></Box>
2. Space — 界说布局间隔
运用space能够自界说项目之间的间隔，这些间隔能够供padding margin top left right bottom等特点运用
<Box mb='5'></Box> // 这儿的5表明的意义实践上是5*0.25rem的意思
3. Sizes — 界说尺度巨细
运用sizes目标能够自界说元素的巨细，sizes能够由width height max-width min-height等特点运用。
<Box x='lg'></Box> // 这儿的lg表明的实践上是32rem的意思
4. BreakPoints — 界说媒体查询
breakPoints的作用是：装备呼应数组中运用的默许断点，这些值将用于生成移动优先的媒体查询。
在theme.js中能够看到如下的代码：
export default {
breakPoints: ['30em', '48em', '62em', '80em'],
}
上面的代码所表明的意义其实是在宽度为’30em’, ’48em’, ’62em’, ’80em’时分进行的媒体查询。与此对应的运用方法为：
<Box fontSize={["12px","14px","16px","18px","20px"]}></Box>
其间，12px表明的是不进行媒体查询的时分的默许值，而剩下的数值恰好与theme.js中的媒体查询一一对应。
自界说Chakra-ui组件
尽管chakra-ui中供给了较为丰厚的组件，可是许多时分还需求开发者自己封装符合项目风格的自界说组件，这个时分就能够运用供给的chakra办法来完成封装的需求。
下面是一个自界说chakra组件的基本结构：
// step 1
const options = {
baseStyle:{},
sizes:{},
variants:{},
};
// step 2
const MyButton = chakra("button", options);
// step 3
MyButton.defaultProps = {};
// step 4
<MyButton>我的自界说按钮</MyButton>
下面完善此结构：
// 导入React库，用于构建React组件
import React from 'react';
// 从Chakra UI库导入chakra函数，用于创立款式化组件
import { chakra } from '@chakra-ui/core';
// 运用chakra函数创立一个自界说的MyButton按钮组件
const MyButton = chakra('button', {
baseStyle: { // 设置组件的根底款式
borderRadius: 'lg', // 圆角设置为大(large)
},
sizes: { // 为不同的尺度设定款式
sm: {
px: '3', // 设置水平内边距（左右内边距）
py: '1', // 设置笔直内边距（上下内边距）
fontSize: '12px', // 设定字体巨细为12px
},
md: {
px: '4', // 设置水平内边距为4（左右内边距）
py: '2', // 设置笔直内边距为2（上下内边距）
fontSize: '14px', // 设定字体巨细为14px
},
},
variants: { // 为按钮界说变体，依据variant特点的不同运用不同的款式
primary: {
bgColor: 'blue.500', // 首要变体的布景颜色为500级其他蓝色
color: 'white', // 字体颜色为白色
},
danger: {
bgColor: 'red.500', // 风险变体的布景颜色为500级其他红色
color: 'white', // 字体颜色为白色
}
},
});
// 设置MyButton的默许特点值
MyButton.defaultProps = {
size: 'sm', // 默许尺度为小(sm)
variant: 'primary', // 默许变体为首要(primary)
}
// 界说App组件
function App () {
return (
// 回来组件的JSX结构
<div>
{/* 运用MyButton并传递size和variant特点，分别设置为中等巨细（md）和风险变体（danger） */}
<MyButton size='md' variant='danger'></MyButton>
</div>
)
}
自界说大局Chakra-ui组件
上述自界说组件的方法是比较“浅”或者说“灵敏”的定制方法，可是项目中还存在着一部分需求大局通用的定制化组件，那么该如何做好这部分的基建呢？实践上，chakra-ui也供给了相应的自界说组件的挂载方法，使得开发者自界说的组件做到：一次挂载，处处运用
1. 工程化结构
mkdir -p src/chakra-ui
touch src/chakra-ui/index.js src/chakra-ui/button.js
2. 构建公共组件
// button.js
const MyButton = {
baseStyle: {},
sizes: {},
variants: {},
defaultProps: {},
};
export default MyButton;
一致导入导出：
import MyButton from './button';
export default {
MyButton,
}
3. 在Provider的theme目标上挂载公共组件
import MyComponents from '@/chakra-ui'; // @表明的是src目录的绝对路径
const myTheme = {
...theme,
components: {
...theme.components,
...MyComponents,
}
}
<ChakraProvider theme={myTheme}>{...}</ChakraProvider>
4. 在恣意方位经过themeKey字段指定/运用自界说组件
const MyButton = chakra('button', {
themeKey: 'MyButton',
})
function App () {
return (
<div>
<MyButton size='md' variant='danger'>我的定制按钮</MyButton>
</div>
)
}
chakra-ui归纳练习–制造一个登录表单
这个练习的意图是为了将上面的知识点串联起来，模拟实践项目开发过程中的场景。
1. 结构建立
npx create-react-app chakra-ui-demo
cd chakra-ui-demo
rm -rf src/
mkdir -p src/assets/images
mkdir src/components
touch src/index.js
cd src/components
touch App.js Form.js Header.js Home.js Main.js SignIn.js SignUp.js
cd ../../
2. src/index.js入口文件中的内容
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { ChakraProvider, CSSReset } from "@chakra-ui/core";
import App from "./components/App";
import theme from '@chakra-ui/theme';
ReactDOM.render(
<Router>
<ChakraProvider theme={theme}>
<CSSReset />
<App />
</ChakraProvider>
</Router>,
document.getElementById("root")
);
3. src/components/App.js视图根组件中的内容
import React from "react";
import Header from "./Header";
import Main from "./Main";
function App() {
return (
<>
<Header />
<Main />
</>
);
}
export default App;
4. src/components/Header.js页面结构布局组件中的内容
// 导入React根底库
import React from "react";
// 从chakra-ui/core中导入所需的组件
import {
Box, // 用于布局的容器组件
Stack, // 用于水平或笔直摆放子元素的组件
Image, // 用于展现图片的组件
Button, // 按钮组件
useColorMode, // 用于获取和切换颜色形式的Hook函数
} from '@chakra-ui/core';
import { Link } from 'react-router-dom'; // 用于运用内导航的Link组件
import logo from "../assets/images/logo.png"; // 导入logo图片
// 界说并导出Header组件
export default function Header() {
// 运用useColorMode Hook获取当时颜色形式及切换函数
const { colorMode, toggleColorMode } = useColorMode();
// 回来JSX结构
return (
// 包裹Header的最外层Box组件，设置高度和布景颜色
// 依据当时颜色形式，动态设置布景颜色
<Box
h="60px"
bg={colorMode === "light" ? "gray.200" : "gray.700"}>
{/* 创立一个用于内容居中的容器Box */}
<Box
w="80%" // 容器宽度为80%
m="auto" // 自动外边距完成水平居中
overflow="hidden"> // 防止子元素溢出容器
{/* Logo图片，浮动到左边 */}
<Image
float="left" // 图片左浮动
mt="10px" // 间隔顶部间隔
w="40px" // 图片宽度
src={logo} /> // 图片资源路径
{/* 网站导航栏组件Stack */}
<Stack
spacing={8} // 子元素直接的空地
direction="horizontal" // 水平摆放
ml={8} // 设定左外边距，与Logo坚持一定间隔
h="60px" // 栈的高度与外围Box坚持一致
float="left" // 浮动居左，和Logo在一行
align="center" // 子元素笔直居中对齐
>
{/* 运用Link组件完成SPA的内部跳转 */}
<Link to="/home">主页</Link>
<Link to="/form">表单</Link>
<Link to="/card">卡片</Link>
</Stack>
{/* 切换颜色形式的按钮 */}
<Button
colorScheme="teal" // 运用teal主题颜色
float="right" // 按钮浮动到右侧
mt="10px" // 间隔顶部间隔
onClick={toggleColorMode} // 点击时切换颜色形式
>
切换形式
</Button>
</Box>
</Box>
);
}
5. src/components/Main.js路由根组件中的内容
import React from "react";
import { Route } from "react-router-dom";
import { Box } from "@chakra-ui/core";
import Form from "./Form";
import Card from "./Card";
export default function Main() {
return (
<Box w={1 / 2} mx="auto" mt="100px" d="flex" justifyContent="center">
<Route path="/form" component={Form} />
<Route path="/card" component={Card} />
</Box>
);
}
6. src/components/Card.js页面组件中的内容
// 导入React根底库
import React from "react";
// 导入Chakra UI组件库中的组件
import {
Box, // 用于布局的容器组件
Image, // 图片显现组件
Badge, // 标签组件，用于显现小徽章或者符号
Text, // 文本组件，显现各种文本内容
Stack, // 用于布局的组件，可水平或笔直堆叠子组件
Flex, // Flexbox布局组件，用于创立灵敏的布局
Button, // 按钮组件
useColorMode // Hook，用于获取当时的颜色形式以及切换颜色形式的函数
} from "@chakra-ui/core";
import chakraUI from "../assets/images/chakra-ui.png"; // 导入图像资源
import { AiFillStar } from "react-icons/ai"; // 导入星星图标，用于评级等
// 界说Card组件并导出
export default function Card() {
// 运用useColorMode Hook获取当时颜色形式
const {colorMode} = useColorMode();
// 界说淡色和深色形式下布景色和文本颜色的装备
let bgColor = {light: 'gray.200', dark: 'gray.700'};
let textColor = {light: 'gray.500', dark: 'gray.100'};
// 组件回来JSX结构
return (
// 外层容器Box用于整个卡片的布局
<Box
w={1 / 2} // 卡片宽度为父容器的一半
overflow="hidden" // 溢出部分躲藏
borderRadius="lg" // 圆角
boxShadow="lg" // 暗影作用
bgColor={bgColor[colorMode]} // 依据颜色形式设置布景颜色
>
{/* 图片组件Image显现chakra UI的logo */}
<Image src={chakraUI} />
{/* Box容器用于包裹内容部分，设置内边距 */}
<Box p={3}>
{/* 水平布局的Stack，用于布局徽章和描绘 */}
<Stack direction="horizontal" align="center">
{/* 多个徽章Badge，显现各种符号，设置特定的颜色主题和四周圆角 */}
<Badge variant="solid" colorScheme="teal" borderRadius="full" px={2}>
NEW
</Badge>
<Badge variant="solid" colorScheme="teal" borderRadius="full" px={2}>
Chakra-UI
</Badge>
<Badge variant="solid" colorScheme="teal" borderRadius="full" px={2}>
React
</Badge>
{/* 文本组件Text，显现附加描绘 */}
<Text fontSize="sm" color={textColor[colorMode]}>
周一去打工，一起呀
</Text>
</Stack>
{/* 标题文本 */}
<Text
as="h2" // 设置为h2的HTML元素
color={textColor[colorMode]} // 依据颜色形式设置文本颜色
fontWeight="semibold" // 设置字体粗细
fontSize="xl" // 设置字号巨细
mt="3" // 设置上外边距
mb="2" // 设置下外边距
>
Chakra-UI 学习笔记
</Text>
<Text fontWeight="light" fontSize="sm" lineHeight="tall">
{ /* 文章内容描绘 */ }
Chakra UI 是一个简略的, 模块化的易于了解的 UI 组件库. 供给了丰厚的构建
React 运用所需的UI组件. 在整个运用程序中，在任何组件上快速、轻松地引证主题中的值。组件的构建考虑到了组合。你能够利用任何组件来发明新事物。Chakra-UI 严厉遵从WAI-ARIA规范。一切组件都有恰当的特点和现成的键盘交互。Chakra UI 是一个简略的, 模块化的易于了解的 UI 组件库. 供给了丰厚的构建 React 运用所需的UI组件.
</Text>
{/* 星星评级和评论统计的Flex容器布局 */}
<Flex py="2" align="center" fontSize="sm">
{/* 星星图标，用AiFillStar组件表明，显现为teal颜色组 */}
<Flex color="teal.500">
<AiFillStar />
<AiFillStar />
<AiFillStar />
<AiFillStar />
</Flex>
<AiFillStar />
<Text ml={1}>300 评论</Text>
</Flex>
</Box>
{/* 底部登录按钮，设置为占满整个卡片宽度 */}
<Button colorScheme="teal" w="100%">登录</Button>
</Box>
);
}
7. src/components/Form.js表单组件中的内容
// 引进React库
import React from "react";
// 引进Chakra UI库供给的多个组件
import {
Box, // 用于布局的盒子组件
Image, // 用于显现图片的组件
Tabs, // 用于创立标签页的容器组件
TabList, // 用于包裹Tab组件的列表容器
Tab, // 单个标签页的按钮组件
TabPanels, // 用于包裹TabPanel的容器
TabPanel, // 标签面板的组件，对应一个Tab
useColorMode // 用于获取当时颜色形式和切换颜色形式的钩子（hook）
} from "@chakra-ui/core";
// 引进注册和登录组件
import SignUp from "./SignUp";
import SignIn from "./SignIn";
// 引进两种颜色形式下的Chakra UI相关的logo图片
import chakraLogoDark from "../assets/images/chakra-ui-dark.png"; // 深色形式logo
import chakraLogoLight from "../assets/images/chakra-ui-light.png"; // 淡色形式logo
// 界说Form组件并导出
export default function Form() {
// 运用useColorMode钩子获取当时的颜色形式
const { colorMode } = useColorMode();
// 组件回来的JSX内容
return (
// 最外层的布局容器Box，设置布景色、内边距、暗影作用、圆角和宽度
<Box
bg={ // 依据colorMode动态设置布景色
colorMode === "light" ? "gray.200" : "gray.700"
}
p={5} // 设置内边距
boxShadow="md" // 设置中等强度的暗影
borderRadius="lg" // 设置大圆角
w="100%" // 设置宽度为100%
>
// Image组件用于显现logo图片
<Image
w={250} // 设置图片宽度
mx="auto" // 设置水平外边距自动，以完成水平居中
mb={6} // 设置下外边距
mt={2} // 设置上外边距
src={colorMode === "light" ? chakraLogoLight : chakraLogoDark} // 依据颜色形式动态设置图片来历
/>
// Tabs组件用于创立标签页功能
<Tabs isFitted> // isFitted特点意味这个标签页会填充整个容器宽度
// TabList组件包裹多个Tab组件，作为标签页的标题列表
<TabList>
// Tab组件代表单个标签页的标题
<Tab _focus={{ boxShadow: "none" }}>注册</Tab> // 运用_focus内联款式去掉焦点状况下的暗影
<Tab _focus={{ boxShadow: "none" }}>登录</Tab>
</TabList>
// TabPanels组件包裹多个TabPanel组件，作为每个标签页面板的内容容器
<TabPanels>
// 每个TabPanel对应一个Tab，里面能够放置任何内容
<TabPanel>
<SignUp /> // 注册组件内容
</TabPanel>
<TabPanel>
<SignIn /> // 登录组件内容
</TabPanel>
</TabPanels>
</Tabs>
</Box>
);
}
7.1 登录子组件中的内容
// 引进React根底库
import React from "react";
// 引进Chakra UI中用于表单的组件
import {
Input, // 文本框组件，答应用户输入信息
Stack, // 堆叠布局组件，用于按序摆放子组件
InputGroup, // 输入框组群组件，用于将几个表单元素组合在一起
InputLeftAddon, // 输入框左边的前置标签组件
InputRightAddon, // 输入框右侧的后置标签组件
FormControl, // 用于表单控件的容器，供给有效性和禁用状况款式
Button, // 按钮组件，可用于提交表单或其他交互
FormHelperText, // 供给表单协助或指示信息的文本组件
} from "@chakra-ui/core";
// 引进React Icons库中的图标
import { FaUserAlt, FaLock, FaCheck } from "react-icons/fa";
// 界说并导出SignIn组件
export default function SignIn() {
// 组件回来的JSX内容
return (
<form> // 用HTML的form标签包裹整个表单，这个标签在Web开发中用于收集用户输入
<Stack spacing={5}> // 运用Stack组件来笔直堆叠内部元素，spacing特点设置堆叠元素间的间隔
<FormControl isDisabled isInvalid> // 运用FormControl组件包裹输入框，isDisabled禁用输入，isInvalid表明输入无效状况
<InputGroup> // InputGroup组件用来将输入框和前置/后置元素组织在一起
<InputLeftAddon children={<FaUserAlt />} /> // InputLeftAddon作为前置标签，嵌入用户图标
<Input placeholder="请输入用户名" /> // Input组件用于用户名输入，placeholder特点供给无内容时的提示文字
</InputGroup>
<FormHelperText>用户名是必填选项</FormHelperText> // FormHelperText供给额定的协助信息或提示
</FormControl>
// 第二个输入组：暗码输入框，没有设置禁用或无效状况
<InputGroup>
<InputLeftAddon children={<FaLock />} /> //暗码输入框左边的锁图标标签
<Input type="password" placeholder="请输入暗码"/> //设置type为password，躲藏暗码输入；placeholder供给提示文字
<InputRightAddon children={<FaCheck />} /> //暗码输入框右侧的查看图标标签
</InputGroup>
// 登录按钮，点击能够提交表单
<Button
type="submit" // 界说按钮为提交类型，能够触发表单提交
boxShadow="xl" // 设置按钮暗影为超大型尺度
w="100%" // 宽度设置为100%，即撑满上级容器
colorScheme="teal" // 运用teal颜色主题
_hover={{ bgColor: "tomato" }} // 鼠标悬浮时布景变为西红柿色
>
登录
</Button>
</Stack>
</form>
);
}
7.2 注册子组件中的内容
// 引进React库
import React from "react";
// 引进Chakra UI中用于表单的组件
import {
Input, // 文本框组件，答应用户输入信息
Stack, // 堆叠布局组件，用于按序摆放子组件
InputGroup, // 输入框组组件，用于将多个表单元素组合起来
InputLeftAddon, // 输入框左边增加组件，通常用于放置图标或文字等
InputRightAddon, // 输入框右侧增加组件
FormControl, // 表单控制组件，用于供给表单有效性和禁用状况款式
Button, // 按钮组件
RadioGroup, // 单选按钮组，办理多个Radio的选中状况
Radio, // 单选按钮组件
Select, // 下拉挑选框组件
Switch, // 开关挑选器组件
FormLabel, // 表单标签组件，用于界说表单字段的标签
Flex, // 弹性布局容器组件
FormHelperText, // 表单协助文字，供给字段阐明或协助提示
} from "@chakra-ui/core";
// 引进react-icons图标库中的部分图标
import { FaUserAlt, FaLock, FaCheck } from "react-icons/fa";
// 界说并输出SignUp注册表单组件
export default function SignUp() {
// 组件回来的JSX内容
return (
<form> // 用form包裹整个注册表单
<Stack spacing={5}> // 运用Stack组件笔直堆叠子组件，spacing设置堆叠的间隔
<FormControl isDisabled isInvalid> // 运用FormControl包装输入框，设置为禁用和无效显现
<InputGroup> // InputGroup组合输入框及左右增加的组件
<InputLeftAddon children={<FaUserAlt />} /> // 左边增加用户图标
<Input placeholder="请输入用户名" /> // 输入框组件，placeholder供给输入提示
</InputGroup>
<FormHelperText>用户名是必填选项</FormHelperText> // 供给额定的协助信息或提示
</FormControl>
<InputGroup> // 第二组输入框，暗码输入
<InputLeftAddon children={<FaLock />} /> // 左边增加锁图标
<Input type="password" placeholder="请输入暗码"/> // 输入框设置为暗码类型，躲藏输入内容
<InputRightAddon children={<FaCheck />} /> // 右侧增加查看图标
</InputGroup>
<RadioGroup defaultValue="0"> // 单选按钮组，默许选中第一个选项
<Stack spacing={5} direction="horizontal"> // 水平摆放单选按钮
<Radio value="0">男</Radio> // 单选按钮，值为"0"
<Radio value="1">女</Radio> // 单选按钮，值为"1"
</Stack>
</RadioGroup>
<Select placeholder="请挑选学科"> // 下拉挑选框组件，设置挑选提示
<option value="React">React</option> // 下拉选项，值为"React"
<option value="Vue">Vue</option> // 下拉选项，值为"Vue"
</Select>
<Flex> // Flex容器用于布局开关挑选器和标签
<Switch id="deal" mr={2} /> // 开关挑选器组件，id绑定到标签的htmlFor特点
<FormLabel htmlFor="deal" mr="0" mb="0"> // 表单标签组件，指向id为"deal"的元素
同意声明的协议
</FormLabel>
</Flex>
<Button
type="submit" // 设置按钮为提交表单类型
boxShadow="xl" // 设置按钮暗影作用
colorScheme="teal" // 按钮运用teal颜色主题
w="100%" // 宽度设置为父容器的100%
_hover={{ bgColor: "tomato" }} // 鼠标悬浮时布景色变为"西红柿"色
>
注册
</Button>
</Stack>
</form>
);
}
