四川高端网站建设辽宁工程技术大学电子信息网
今天给大家推荐下这个 34K Star 的基于 React 的 UI 组件库
Chakra UI
Chakra-UI 是一个简单的、模块化的易于理解的UI组件库。提供了丰富的构建React应用所需的UI组件。
你可以使用 Chakra UI 轻松创建自己的设计系统，也可以只安装其中的一些组件。由于使用了样式道具，自定义组件和主题非常容易，如此我们有更多的时间用于构建出色的用户体验。
特性
-
支持开箱即用的主题功能
-
默认支持白天和黑夜两种模式
-
拥有大量功能丰富且非常有用的组件
-
使响应式设计变得轻而易举
-
文档清晰而全面.查找API更加容易
-
适用于构建用于展示的给用户的界面
如何使用?
1. 安装
# with Yarn
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6# with npm
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6# with pnpm
$ pnpm add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6# with Bun
$ bun add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
2.导入模块
import { ChakraProvider } from "@chakra-ui/react"// Do this at the root of your application
function App({ children }) {return <ChakraProvider>{children}</ChakraProvider>
}
3. 基础使用
import { Button } from "@chakra-ui/react"function Example() {return <Button>I just consumed some ⚡️Chakra!</Button>
}
比如我们想要主题颜色切换，可以使用useColorMode来控制。
import { useColorMode, Button, Text } from '@chakra-ui/react'const { colorMode, toggleColorMode } = useColorMode()
console.log(colorMode, toggleColorMode)<Text>当前的颜色模式为 {colorMode}</Text>
<Button onClick={toggleColorMode}>切换颜色模式</Button>
再比如我们设计一个表单，Chakra UI 提供了一些易用的表单组件，如：Checkbox、Radio、Select、Input 等等。
{`import { FormLabel, FormControl, FormHelperText, Input } from "@chakra-ui/core";function LoginForm() {return (<FormControl><FormLabel>邮箱地址</FormLabel><Input type="email" placeholder="Enter email" /><FormHelperText>请输入正确的邮箱地址</FormHelperText></FormControl>)
}`}
Chakra UI 是一个高效美观的 React UI 组件库，可以帮助开发者快速构建出高质量的 Web 应用。一键主题切换、灵活的样式管理、方便易用的表单组件、响应式设计支持、自定义主题等等，基本上你需要的功能都能实现。
项目地址：https://github.com/chakra-ui/chakra-ui