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

最新推荐文章于 2024-07-08 02:28:05 发布

皮蛋很白

最新推荐文章于 2024-07-08 02:28:05 发布

阅读量1.1k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/u012961419/article/details/117660541

版权

react 专栏收录该内容

55 篇文章 9 订阅

订阅专栏

案例实践

使用 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

效果：

在这里插入图片描述

皮蛋很白

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
React UI 组件库 Chakra UI - 05 案例实践

案例实践使用 create-react-app 新建项目。表单使用 Chakra UI 实现下图的表单：构建注册表单react-icons 是一个 React 流行图标库。// components/SignUp.jsimport { Input, // 文本框 InputGroup, // 文本框分组 Stack, // 布局组件设置子元素坚决 InputLeftAddon, // 文本框左侧内容 InputRightAddon, // 文本框右侧内容 FormC
复制链接

扫一扫

专栏目录