React UI 组件库 Chakra UI - 05 案例实践
案例实践
使用 create-react-app 新建项目。
表单
使用 Chakra UI 实现下图的表单：
构建注册表单
react-icons 是一个 React 流行图标库。
// components/SignUp.js
import {
Input, // 文本框
InputGroup, // 文本框分组
Stack, // 布局组件 设置子元素坚决
InputLeftAddon, // 文本框左侧内容
InputRightAddon, // 文本框右侧内容
FormControl, // 未表单元素添加动态效果 如校验 禁用等
FormHelperText, // 表单提示文字
RadioGroup, // 单选框分组
Radio, // 单选框
Select, // 下拉
Switch, // 切换
FormLabel, // label
Flex, // 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
效果：
