第一个 Chakra UI 应用 #

创建登录页面 #

让我们通过创建一个登录页面来学习 Chakra UI 的基本用法。

基础结构 #

jsx

import {
  Box,
  Button,
  FormControl,
  FormLabel,
  Input,
  VStack,
  Heading,
  Text,
  Link,
} from '@chakra-ui/react'

function LoginPage() {
  return (
    <Box
      minH="100vh"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="gray.50"
    >
      <Box
        bg="white"
        p={8}
        borderRadius="lg"
        boxShadow="lg"
        w="full"
        maxW="md"
      >
        <VStack spacing={6}>
          <Heading size="lg">欢迎登录</Heading>
          
          <FormControl>
            <FormLabel>邮箱地址</FormLabel>
            <Input type="email" placeholder="your@email.com" />
          </FormControl>
          
          <FormControl>
            <FormLabel>密码</FormLabel>
            <Input type="password" placeholder="********" />
          </FormControl>
          
          <Button colorScheme="blue" w="full">
            登录
          </Button>
          
          <Text>
            还没有账号？{' '}
            <Link color="blue.500" href="#">
              立即注册
            </Link>
          </Text>
        </VStack>
      </Box>
    </Box>
  )
}

export default LoginPage

组件解析 #

Box 组件 #

Box 是最基础的布局组件，相当于一个带样式的 div：

jsx

<Box 
  p={4}              // padding: 16px
  m={2}              // margin: 8px
  bg="blue.500"      // background-color
  color="white"      // text color
  borderRadius="md"  // border-radius
>
  Box 内容
</Box>

VStack 组件 #

VStack 用于垂直堆叠子元素，并自动添加间距：

jsx

<VStack spacing={4}>
  <Box>项目 1</Box>
  <Box>项目 2</Box>
  <Box>项目 3</Box>
</VStack>

Button 组件 #

Button 提供了丰富的样式变体：

jsx

<Button colorScheme="blue">主要按钮</Button>
<Button colorScheme="red">危险按钮</Button>
<Button colorScheme="green">成功按钮</Button>
<Button variant="outline">轮廓按钮</Button>
<Button variant="ghost">幽灵按钮</Button>

Input 组件 #

Input 用于文本输入：

jsx

<Input placeholder="请输入内容" />
<Input type="email" placeholder="邮箱地址" />
<Input type="password" placeholder="密码" />
<Input isInvalid placeholder="错误状态" />
<Input isDisabled placeholder="禁用状态" />

创建导航栏 #

让我们创建一个导航栏组件：

jsx

import {
  Box,
  Flex,
  Text,
  Button,
  IconButton,
  HStack,
  Link,
} from '@chakra-ui/react'
import { HamburgerIcon } from '@chakra-ui/icons'

function Navbar() {
  return (
    <Box bg="white" px={4} shadow="sm">
      <Flex h={16} alignItems="center" justifyContent="space-between">
        <Text fontSize="xl" fontWeight="bold" color="blue.500">
          MyApp
        </Text>
        
        <HStack spacing={4} display={{ base: 'none', md: 'flex' }}>
          <Link href="#">首页</Link>
          <Link href="#">功能</Link>
          <Link href="#">价格</Link>
          <Link href="#">关于</Link>
        </HStack>
        
        <HStack>
          <Button colorScheme="blue" size="sm">
            登录
          </Button>
          <IconButton
            display={{ base: 'flex', md: 'none' }}
            icon={<HamburgerIcon />}
            aria-label="打开菜单"
          />
        </HStack>
      </Flex>
    </Box>
  )
}

export default Navbar

创建卡片组件 #

jsx

import {
  Box,
  Image,
  Text,
  Badge,
  VStack,
  HStack,
  Button,
} from '@chakra-ui/react'

function ProductCard({ title, price, image, isNew }) {
  return (
    <Box
      maxW="sm"
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
      bg="white"
    >
      <Image src={image} alt={title} />
      
      <Box p={6}>
        <VStack align="start" spacing={2}>
          <HStack>
            <Text fontWeight="bold" fontSize="lg">
              {title}
            </Text>
            {isNew && <Badge colorScheme="green">新品</Badge>}
          </HStack>
          
          <Text color="gray.500">商品描述信息</Text>
          
          <HStack justify="space-between" w="full">
            <Text fontSize="xl" fontWeight="bold" color="blue.500">
              ¥{price}
            </Text>
            <Button size="sm" colorScheme="blue">
              加入购物车
            </Button>
          </HStack>
        </VStack>
      </Box>
    </Box>
  )
}

export default ProductCard

创建仪表盘布局 #

jsx

import {
  Box,
  Flex,
  SimpleGrid,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  Card,
  CardBody,
  Heading,
  Text,
} from '@chakra-ui/react'

function Dashboard() {
  return (
    <Box p={8}>
      <Heading mb={6}>仪表盘</Heading>
      
      <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={6}>
        <Card>
          <CardBody>
            <Stat>
              <StatLabel>总收入</StatLabel>
              <StatNumber>¥350,000</StatNumber>
              <StatHelpText>
                <StatArrow type="increase" />
                23.36%
              </StatHelpText>
            </Stat>
          </CardBody>
        </Card>
        
        <Card>
          <CardBody>
            <Stat>
              <StatLabel>用户数</StatLabel>
              <StatNumber>1,234</StatNumber>
              <StatHelpText>
                <StatArrow type="increase" />
                12.05%
              </StatHelpText>
            </Stat>
          </CardBody>
        </Card>
        
        <Card>
          <CardBody>
            <Stat>
              <StatLabel>订单数</StatLabel>
              <StatNumber>567</StatNumber>
              <StatHelpText>
                <StatArrow type="decrease" />
                5.23%
              </StatHelpText>
            </Stat>
          </CardBody>
        </Card>
        
        <Card>
          <CardBody>
            <Stat>
              <StatLabel>转化率</StatLabel>
              <StatNumber>45.67%</StatNumber>
              <StatHelpText>
                <StatArrow type="increase" />
                8.92%
              </StatHelpText>
            </Stat>
          </CardBody>
        </Card>
      </SimpleGrid>
    </Box>
  )
}

export default Dashboard

响应式设计 #

Chakra UI 提供了简洁的响应式语法：

jsx

import { Box, Text, Flex } from '@chakra-ui/react'

function ResponsiveExample() {
  return (
    <Box>
      <Text
        fontSize={{
          base: 'md',    // 0-480px
          sm: 'lg',      // 480px+
          md: 'xl',      // 768px+
          lg: '2xl',     // 992px+
          xl: '3xl',     // 1280px+
        }}
      >
        响应式文字大小
      </Text>
      
      <Flex
        direction={{ base: 'column', md: 'row' }}
        gap={4}
      >
        <Box bg="blue.500" p={4} flex="1">
          项目 1
        </Box>
        <Box bg="green.500" p={4} flex="1">
          项目 2
        </Box>
        <Box bg="red.500" p={4} flex="1">
          项目 3
        </Box>
      </Flex>
      
      <Box
        display={{ base: 'block', md: 'none' }}
        bg="yellow.200"
        p={4}
        mt={4}
      >
        仅在移动端显示
      </Box>
    </Box>
  )
}

export default ResponsiveExample

完整示例：博客页面 #

jsx

import {
  Box,
  Container,
  Heading,
  Text,
  Image,
  Badge,
  VStack,
  HStack,
  Divider,
  Link,
  Flex,
} from '@chakra-ui/react'

function BlogPost() {
  return (
    <Container maxW="container.md" py={8}>
      <VStack spacing={6} align="stretch">
        <Box>
          <HStack mb={4}>
            <Badge colorScheme="blue">React</Badge>
            <Badge colorScheme="green">教程</Badge>
          </HStack>
          
          <Heading size="2xl" mb={4}>
            Chakra UI 入门指南
          </Heading>
          
          <HStack color="gray.500" fontSize="sm">
            <Text>作者：张三</Text>
            <Text>•</Text>
            <Text>2024年1月15日</Text>
            <Text>•</Text>
            <Text>阅读时间：5分钟</Text>
          </HStack>
        </Box>
        
        <Image
          src="https://via.placeholder.com/800x400"
          alt="封面图"
          borderRadius="lg"
        />
        
        <Divider />
        
        <Box lineHeight="tall">
          <Text mb={4}>
            Chakra UI 是一个简单、模块化且易于访问的 React 组件库。
            它提供了构建 React 应用程序所需的所有构建块。
          </Text>
          
          <Heading size="md" mb={2}>
            为什么选择 Chakra UI？
          </Heading>
          
          <Text mb={4}>
            Chakra UI 专注于无障碍性、主题化和开发者体验，
            让你能够快速构建美观且功能完善的应用程序。
          </Text>
        </Box>
        
        <Divider />
        
        <Flex justify="space-between">
          <HStack>
            <Text color="gray.500">标签：</Text>
            <Link color="blue.500">#React</Link>
            <Link color="blue.500">#ChakraUI</Link>
          </HStack>
        </Flex>
      </VStack>
    </Container>
  )
}

export default BlogPost

Style Props 快速参考 #

属性	CSS 属性	示例
`m`, `margin`	margin	`m={4}`
`p`, `padding`	padding	`p={4}`
`bg`	background	`bg="blue.500"`
`color`	color	`color="white"`
`w`, `width`	width	`w="100%"`
`h`, `height`	height	`h="100vh"`
`fontSize`	font-size	`fontSize="xl"`
`borderRadius`	border-radius	`borderRadius="md"`
`shadow`	box-shadow	`shadow="lg"`

下一步 #

现在你已经创建了第一个 Chakra UI 应用，接下来学习设计系统，深入了解 Chakra UI 的设计理念！