Chakra-UI

嘻嘻哈哈_嘻嘻哈哈
643 阅读5分钟

Chakra-UI 介绍

Chakra UI 是⼀个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React 应⽤所需的UI组件. ⽂档: next.chakra-ui.com/docs/gettin…

  1. 1.Chakra UI 内置 Emotion，是 CSS-IN-JS 解决⽅案的集⼤成者
  2. 基于 Styled-Systems styled-system.com/
  3. ⽀持开箱即⽤的主题功能
  4. 默认⽀持⽩天和⿊夜两种模式
  5. 拥有⼤量功能丰富且⾮常有⽤的组件
  6. 使响应式设计变得轻⽽易举
  7. ⽂档清晰⽽全⾯. 查找API更加容易
  8. 适⽤于构建⽤于展示的给⽤户的界⾯
  9. 框架正在变得越来越完善

Chakra-UI 快速开始

下载 chakra-ui

npm install @chakra-ui/core@1.0.0-next.2

克隆默认主题

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

 npm install @chakra-ui/theme

主题的引入

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import theme from '@chakra-ui/theme';
import { ChakraProvider, CSSReset } from "@chakra-ui/react";

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
);

引⼊ CSS 重置组件

Style Props 样式属性

  • style Props 是用来更改组件样式的，通过为组件传递属性的方式实现。通过传递简化的样式属性以达到提升开发效率的目的。
  • 以下为部分展示 Style Props属性

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

主题

颜⾊模式(color mode )

chakra-ui 提供的组件都⽀持两种颜⾊模式, 浅⾊模式(light)和暗⾊模式(dark). 可以通过 useColorMode 进⾏颜⾊模式的更改

import React from 'react';
import { Box, Button, useColorMode, Text } from '@chakra-ui/react'

function App() {
  const [ colorMode, toggleColorMode ] = useColorMode(); // 解构返回的对象
  return <Box w={800} h={400} bgColor="hotpink">
    <Text>当前颜色模式是{colorMode}</Text>
    <Button onClick={toggleColorMode} >切换颜色</Button>
  </Box>
}

export default App;

Chakra 将颜⾊模式存储在 localStorage 中, 并使⽤类名策略来确保颜⾊模式是持久的

主题 useColorModeValue钩子函数

根据颜⾊模式设置样式

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

强制组件颜⾊模式

  • 使组件不受颜色模式影响，始终保持在某个颜色模式下
  • LightMode 浅色模式组件，包裹的组件只显示浅色
  • DarkMode 暗色模式组件，包裹的组件只显示暗色

import {Box, Button, LightMode , DarkMode} from '@chakra-ui/react';

 return <Box w={800} h={400}>
    <Text>{colorMode}</Text>
    <LightMode>
      <Button onClick={toggleColorMode} >切换颜色</Button>
    </LightMode>
  </Box>

颜⾊模式通⽤设置

  1. 设置默认颜⾊模式
    1. 通过 theme.config.initialColorMode 可以设置应⽤使⽤的默认主题
  1. 使⽤操作系统所使⽤的颜⾊模式
    1. 通过 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";

// 设置默认颜色模式
// theme.config.initialColorMode = 'dark'
// 使用操作系统使用的颜色模式
theme.config.useSystemColorMode = true

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
);

主题对象

  • 主题对象theme 下包含一些预设属性

颜色(colors)

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

import React from 'react';
import { Box } from '@chakra-ui/react'

function App() {
  return <Box w={800} h={400} bgColor="gray.300">
    chakra ui
  </Box>
}
export default App;
//可以在index.js中打印console.log(theme)// 输出theme颜色对象 数值越大颜色越深

Space

  • 使⽤ space 可以⾃定义项⽬间距. 这些间距值可以由 padding, margin 和 top, left, right, bottom 样式引⽤
// 这里的预设值单位为rem，数值从0开始，以0.25rem递增，如（0:0 、 1:"0.25rem"）
// mb="5" 表示 margin-bottom: 1.25rem; 
return <Box w={800} h={400} bgColor="gray.300" mb="5"> chakra ui </Box>

大小（sizes）

  • 使用 size 可以自定义元素大小，这些值可以由 width, height 和 maxWidth, minWidth 等样式引用
return <Box w="2xs" h="10" bgColor="gray.300" mb="5">chakra ui</Box>

响应式断点(Breakpoints)

  • 配置响应数组值中使用的默认断点。这些值将用于生成移动优先（即最小宽度）的媒体查询
// theme.js
export default {
  // 当屏幕尺寸为30em的时候应用宽度为200px,当屏幕尺寸为48em的时候应用宽度为300px 以此类推
  breakpoints: ["30em", "48em", "62em", "80em"] ,
};

// 默认宽度是100px 当
return <Box w={["100px","200px","300px","800px","1000"]} h="10" bgColor="gray.300" mb="5" mt="6">
    chakra ui
  </Box>

创建Chakra-Ul组件

chakra-factory

  • 利用 charka方法
import { chakra } from '@chakra-ui/react';
// 封装组件
const MyButton = chakra('button', { //button组件内部要使用的名字
  baseStyle: { // 设置一些默认样式
    bg: 'red.200'
  },
  sizes: {},// 设置button大小
  variants: {} // 风格样式
})
function App() {
  return (
    <div>
     //直接以chakra.<element> 可以传递charka样式的纯html
      <chakra.button bg="red.100" px="3" py="2">chakra.button</chakra.button>
      // 使用刚刚封装的组件
      <MyButton>按钮</MyButton>
    </div>
  )
}
export default App;

全局化 Chakra-UI 组件样式

extendTheme （主题扩展的形式）

通过提供的extendTheme方法来扩展 theme（主题），添加一些风格化样式

  1. 在 src ⽂件夹中创建 lagou ⽂件夹⽤于放置⾃定义 Chakra-UI 组件
  2. 在 lagou ⽂件夹中创建 button.js ⽂件并将组件样式放置于当前⽂件中并进⾏默认导出

在 lagou ⽂件夹中创建 index.js ⽂件⽤于导⼊导出所有的⾃定义组件

在 src ⽂件夹中的 index.js ⽂件中导⼊⾃定义 Chakra-UI 组件并和 components 属性进⾏合并

在组件中使⽤样式化组件

代码示例：

// src/lagou/botton.js
const LaGouButton = {
  baseStyle: {
    borderRadius: 'lg'
  },
  sizes: {
    sm: {
      px: '3',
      py: '1',
      fontSize: '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;

// src/lagou/index.js
import LaGouButton from './button';

export default {
  LaGouButton
}

// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import theme from "@chakra-ui/theme";
import { ChakraProvider, CSSReset } from "@chakra-ui/core";
import LaGouComponents from './LaGou';

// 1. 设置默认颜色模式 
// theme.config.initialColorMode = 'dark';

// 2. 使用操作系统所使用的颜色模式
// theme.config.useSystemColorMode = true;

console.log(theme);

const myTheme = {
  ...theme,
  components: {
    ...theme.components,
    ...LaGouComponents
  }
}

console.log(myTheme)

ReactDOM.render(
  <ChakraProvider theme={myTheme}>
    <CSSReset />
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);

// src/app.js
import React from "react";
import {
  Input,
  InputGroup,
  Stack,
  InputLeftAddon,
  InputRightAddon,
  FormHelperText,
  RadioGroup,
  Radio,
  Select,
  Switch,
  FormLabel,
  Flex,
  Button,
  FormControl
} from "@chakra-ui/core";
import { FaUserAlt, FaLock, FaCheck } from "react-icons/fa";

export default function SignUp() {
  return (
    <form>
      <Stack spacing="2">
        <FormControl isDisabled isInvalid>
          <InputGroup>
            <InputLeftAddon children={<FaUserAlt />} />
            <Input placeholder="请输入用户名" />
          </InputGroup>
          <FormHelperText>用户名是填项</FormHelperText>
        </FormControl>
        <InputGroup>
          <InputLeftAddon children={<FaLock />} />
          <Input type="password" placeholder="请输入密码" />
          <InputRightAddon children={<FaCheck />} />
        </InputGroup>
        <RadioGroup defaultValue="0">
          <Stack spacing={4} 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="3" />
          <FormLabel htmlFor="deal">是否同意协议</FormLabel>
        </Flex>
        <Button _hover={{ bgColor: "tomato" }} w="100%" colorScheme="teal">
          注册
        </Button>
      </Stack>
    </form>
  );
}
avatar
文章
阅读
粉丝