案例实践

使用 create-react-app 新建项目。

表单

使用 Chakra UI 实现下图的表单：

构建注册表单

react-icons 是一个 React 流行图标库。

// components/SignUp.js
import {Input, // 文本框InputGroup, // 文本框分组Stack, // 布局组件 设置子元素坚决InputLeftAddon, // 文本框左侧内容InputRightAddon, // 文本框右侧内容FormControl, // 未表单元素添加动态效果 如校验 禁用等FormHelperText, // 表单提示文字RadioGroup, // 单选框分组Radio, // 单选框Select, // 下拉Switch, // 切换FormLabel, // labelFlex, // flex 布局组件Button // 按钮
} from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'function SignUp() {return (<form><Stack spacing="2"><FormControl isDisabled isInvalid><InputGroup><InputLeftAddon children={<FaUserAlt />} /><Input bgColor="gray.50" placeholder="请输入用户名" /></InputGroup><FormHelperText>用户名是必填项</FormHelperText></FormControl><InputGroup><InputLeftAddon children={<FaLock />} /><Input placeholder="请输入密码" type="password" bgColor="white" /><InputRightAddon children={<FaCheck />} /></InputGroup><RadioGroup defaultValue="0"><Stack direction="row"><Radio value="0">男</Radio><Radio value="1">女</Radio></Stack></RadioGroup><Select placeholder="请选择所在城市" bgColor="white"><option value="北京">北京</option><option value="上海">上海</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>)
}export default SignUp

构建登录表单

在注册表单的基础上删改：

// components/SignIn.js
import {Input,InputGroup,Stack,InputLeftAddon,InputRightAddon,FormControl,FormHelperText,Button
} from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'function SignIn() {return (<form><Stack spacing="2"><FormControl><InputGroup><InputLeftAddon children={<FaUserAlt />} /><Input placeholder="请输入用户名" bgColor="white" /></InputGroup><FormHelperText>用户名是必填项</FormHelperText></FormControl><InputGroup><InputLeftAddon children={<FaLock />} /><Input placeholder="请输入密码" type="password" bgColor="white" /><InputRightAddon children={<FaCheck />} /></InputGroup><Button _hover={{ bgColor: 'tomato' }} w="100%" colorScheme="teal">登录</Button></Stack></form>)
}export default SignIn

选项卡组件

// components/Form.js
import SignUp from './SignUp'
import SignIn from './SignIn'
import { Tabs, TabList, Tab, TabPanel, TabPanels, Box, Flex, Heading, Image } from '@chakra-ui/react'import logo from '../assets/images/logo.png'function Form() {return (<Box w="400px" mx="auto" mt="80px" bgColor="gray.200" p={3} boxShadow="lg" borderRadius="lg"><Flex direction="row" align="center" justify="center" my="4"><Image src={logo} w="50px" mr="4" /><Heading size="lg">Chakra-UI</Heading></Flex>{/* Tabs 选项卡组件 */}<Tabs isFitted>{/* TabList 选项卡标题 */}<TabList>{/* Tab 单个标题 */}<Tab _focus={{ boxShadow: 'none' }}>注册</Tab><Tab _focus={{ boxShadow: 'none' }}>登录</Tab></TabList>{/* TabPanels 选项卡内容 */}<TabPanels>{/* TabPanel 单个内容 */}<TabPanel><SignUp /></TabPanel><TabPanel><SignIn /></TabPanel></TabPanels></Tabs></Box>)
}export default Form

卡片

使用 Chakra UI 实现下图的卡片：

// components/Card.js
import { Box, Image, Badge, Text, Stack, Heading, Flex, Button } from '@chakra-ui/react'
import logo from '../assets/images/logo.png'
import { AiFillStar } from 'react-icons/ai'function Card() {return (<Box bgColor="gray.200" w="400px" borderRadius="lg" boxShadow="lg" mx="auto" mt="80px" overflow="hidden"><Box bgColor="#26b7a8" pt="20" pb="20"><Flex direction="row" align="center" justify="center" my="4"><Image src={logo} w="50px" mr="4" /><Heading size="lg" color="white">Chakra-UI</Heading></Flex></Box><Box p="3"><Stack direction="row" 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>CSS in JS 解决方案</Text></Stack><Heading size="md" pt="3" pb="2" color="gray.500">Chakra-UI 库介绍</Heading><Text fontWeight="light" fontSize="sm" lineHeight="tall">Chakra UI 是一个简单、模块化且可访问的组件库，它为您提供构建 React应用程序所需的构建块。ChakraUI包含一组布局组件，如 Box 和 Stack这样就可以通过传递Props来简化组件的样式设计。Chakra UI 组件构建在 ReactiveUI原语之上，以实现无数的可组合性。Chakra UI 中的大多数组件都是兼容暗模容的。</Text><Flex mt="2" align="center"><Flex color="teal.500"><AiFillStar /><AiFillStar /><AiFillStar /><AiFillStar /></Flex><AiFillStar /><Text ml="1">100 评论</Text></Flex></Box><Button w="100%" colorScheme="teal">登录</Button></Box>)
}export default Card

聚合

// App.js
import { useState } from 'react'
import { Box, Button, Stack, Link, useColorMode } from '@chakra-ui/react'
import Form from './components/Form'
import Card from './components/Card'function App() {const { toggleColorMode } = useColorMode()const [type, setType] = useState('form')return (<Box><Stack mt="20px" justify="center" direction="row" align="center"><Link color={type==='form' ? 'teal.500' : 'inherit'} onClick={() => setType('form')}>表单</Link><Link  color={type==='card' ? 'teal.500' : 'inherit'} onClick={() => setType('card')}>卡片</Link><Button onClick={toggleColorMode}>切换颜色模式</Button></Stack>{type==='form' && <Form />}{type==='card' && <Card />}</Box>)
}export default App

颜色模式切换

表单

// components/Form.js
import SignUp from './SignUp'
import SignIn from './SignIn'
import { Tabs, TabList, Tab, TabPanel, TabPanels, Box, Flex, Heading, Image, useColorModeValue } from '@chakra-ui/react'import logo from '../assets/images/logo.png'function Form() {const bgColor = useColorModeValue('gray.200', 'gray.700')const titleColor = useColorModeValue('black', 'white')return (<Box w="400px" mx="auto" mt="80px" bgColor={bgColor} p={3} boxShadow="lg" borderRadius="lg"><Flex direction="row" align="center" justify="center" my="4"><Image src={logo} w="50px" mr="4" /><Heading size="lg" color={titleColor}>Chakra-UI</Heading></Flex>{/* Tabs 选项卡组件 */}<Tabs isFitted>{/* TabList 选项卡标题 */}<TabList>{/* Tab 单个标题 */}<Tab _focus={{ boxShadow: 'none' }}>注册</Tab><Tab _focus={{ boxShadow: 'none' }}>登录</Tab></TabList>{/* TabPanels 选项卡内容 */}<TabPanels>{/* TabPanel 单个内容 */}<TabPanel><SignUp /></TabPanel><TabPanel><SignIn /></TabPanel></TabPanels></Tabs></Box>)
}export default Form

// components/SignIn.js
import {Input,InputGroup,Stack,InputLeftAddon,InputRightAddon,FormControl,FormHelperText,Button,useColorModeValue
} from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'function SignIn() {const bgColor = useColorModeValue('white', 'inherit')return (<form><Stack spacing="2"><FormControl><InputGroup><InputLeftAddon children={<FaUserAlt />} /><Input placeholder="请输入用户名" bgColor={bgColor} /></InputGroup><FormHelperText>用户名是必填项</FormHelperText></FormControl><InputGroup><InputLeftAddon children={<FaLock />} /><Input placeholder="请输入密码" type="password" bgColor={bgColor} /><InputRightAddon children={<FaCheck />} /></InputGroup><Button _hover={{ bgColor: 'tomato' }} w="100%" colorScheme="teal">登录</Button></Stack></form>)
}export default SignIn

// components/SignUp.js
import {Input,InputGroup,Stack,InputLeftAddon,InputRightAddon,FormControl,FormHelperText,RadioGroup,Radio,Select,Switch,FormLabel,Flex,Button,useColorModeValue
} from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'function SignUp() {const bgColor = useColorModeValue('white', 'inherit')return (<form><Stack spacing="2"><FormControl isDisabled isInvalid><InputGroup><InputLeftAddon children={<FaUserAlt />} /><Input placeholder="请输入用户名" /></InputGroup><FormHelperText>用户名是必填项</FormHelperText></FormControl><InputGroup><InputLeftAddon children={<FaLock />} /><Input placeholder="请输入密码" type="password" bgColor={bgColor} /><InputRightAddon children={<FaCheck />} /></InputGroup><RadioGroup defaultValue="0"><Stack direction="row"><Radio value="0">男</Radio><Radio value="1">女</Radio></Stack></RadioGroup><Select placeholder="请选择所在城市" bgColor={bgColor}><option value="北京">北京</option><option value="上海">上海</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>)
}export default SignUp

效果：

卡片

// components/Card.js
import { Box, Image, Badge, Text, Stack, Heading, Flex, Button, useColorModeValue } from '@chakra-ui/react'
import logo from '../assets/images/logo.png'
import { AiFillStar } from 'react-icons/ai'function Card() {const bgColor = useColorModeValue('gray.200', 'gray.700')const textColor = useColorModeValue('gray.700', 'gray.100')return (<Box bgColor={bgColor} w="400px" borderRadius="lg" boxShadow="lg" mx="auto" mt="80px" overflow="hidden"><Box bgColor="#26b7a8" pt="20" pb="20"><Flex direction="row" align="center" justify="center" my="4"><Image src={logo} w="50px" mr="4" /><Heading size="lg" color="white">Chakra-UI</Heading></Flex></Box><Box p="3"><Stack direction="row" 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">CSS in JS 解决方案</Text></Stack><Heading size="md" pt="3" pb="2" color="gray.500">Chakra-UI 库介绍</Heading><Text color={textColor} fontWeight="light" fontSize="sm" lineHeight="tall">Chakra UI 是一个简单、模块化且可访问的组件库，它为您提供构建 React应用程序所需的构建块。ChakraUI包含一组布局组件，如 Box 和 Stack这样就可以通过传递Props来简化组件的样式设计。Chakra UI 组件构建在 ReactiveUI原语之上，以实现无数的可组合性。Chakra UI 中的大多数组件都是兼容暗模容的。</Text><Flex mt="2" align="center"><Flex color="teal.500"><AiFillStar /><AiFillStar /><AiFillStar /><AiFillStar /></Flex><AiFillStar /><Text ml="1">100 评论</Text></Flex></Box><Button w="100%" colorScheme="teal">登录</Button></Box>)
}export default Card

效果：

React UI 组件库 Chakra UI - 05 案例实践相关推荐

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 - 02 颜色模式
Color Mode 颜色模式 Chakra UI 内置支持管理应用程序的颜色模式,默认可配置的颜色模式有浅色模式(light).暗色模式(dark).系统模式(system). 大部分组件默认都支持 ...
React UI 组件库 Chakra UI - 03主题对象和 chakra factory
主题对象使用 Chakra UI 默认主题对象中包含很多样式的预设值. 打印 theme 对象: 在使用样式属性设置样式的时候,Chakra 会先从主题对象中获取对应的预设值,如果不存在,则将值作为 ...
React UI 组件库 Chakra UI - 04全局组件样式配置
全局组件样式配置官方文档:Component Style 基础样式和修改器样式大多数组件的样式由基础样式和修改器样式组成,修改器样式根据某些特性或状态更改其大小或视觉样式. 基础样式:默认样式修 ...
Vue UI组件库(Element UI库)
1 移动端常用 UI 组件库 1. Vant Vant 4 - 轻量.可定制的移动端组件库 (vant-ui.github.io) 2. Cube UI cube-ui Document (didi ...
UI组件库Kendo UI for Vue原生组件中文 - 按钮概述
Kendo UI for Vue Buttons包提供了代表用户可以采取的简单操作的触发器组件. Buttons package是Kendo UI for Vue库的一部分,它为Vue生态系统提供原生 ...
UI组件库Kendo UI for Vue中文入门指南（四）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 7. ...
UI组件库Kendo UI for Vue中文入门指南（二）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 5. ...
UI组件库Kendo UI for Vue中文入门指南（一）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 1. ...

React UI 组件库 Chakra UI - 05 案例实践

案例实践

表单

构建注册表单

构建登录表单

选项卡组件

卡片

聚合

颜色模式切换

表单

卡片

React UI 组件库 Chakra UI - 05 案例实践相关推荐

最新文章

热门文章