Box 容器组件 #

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

function Example() {
  return (
    <Box
      p={4}
      bg="blue.500"
      color="white"
      borderRadius="md"
    >
      这是一个 Box
    </Box>
  )
}

<Box>
  内容区域
</Box>

<Box
  p={4}
  m={2}
  bg="gray.100"
  borderRadius="md"
  shadow="md"
>
  带样式的 Box
</Box>

<Box p={4}>内边距 16px</Box>
<Box m={4}>外边距 16px</Box>
<Box px={4} py={2}>水平内边距 16px，垂直内边距 8px</Box>
<Box mx="auto">水平居中</Box>

<Box w="100%" h="100px">
  宽度 100%，高度 100px
</Box>

<Box w="200px" h="200px">
  固定尺寸 200x200
</Box>

<Box maxW="container.md" mx="auto">
  最大宽度 768px，水平居中
</Box>

<Box bg="blue.500" color="white">
  蓝色背景，白色文字
</Box>

<Box bg="linear-gradient(to right, blue.500, purple.500)">
  渐变背景
</Box>

<Box border="1px solid" borderColor="gray.200">
  边框盒子
</Box>

<Box borderWidth="2px" borderStyle="dashed" borderColor="blue.500">
  虚线边框
</Box>

<Box borderRadius="lg">
  大圆角
</Box>

<Box borderRadius="full">
  完全圆形
</Box>

<Box shadow="sm">小阴影</Box>
<Box shadow="md">中等阴影</Box>
<Box shadow="lg">大阴影</Box>
<Box shadow="xl">超大阴影</Box>

<Box
  maxW="sm"
  borderWidth="1px"
  borderRadius="lg"
  overflow="hidden"
  bg="white"
  shadow="md"
>
  <Box p={6}>
    <Box fontWeight="bold" fontSize="xl" mb={2}>
      卡片标题
    </Box>
    <Box color="gray.500">
      卡片描述内容
    </Box>
  </Box>
</Box>

<Box>
  <Box p={4} bg="gray.100">
    头部区域
  </Box>
  <Box p={4} bg="white">
    内容区域
  </Box>
  <Box p={4} bg="gray.100">
    底部区域
  </Box>
</Box>

<Box
  display="flex"
  alignItems="center"
  justifyContent="center"
  h="100vh"
>
  <Box p={8} bg="white" shadow="lg" borderRadius="lg">
    居中内容
  </Box>
</Box>

<Box
  p={4}
  bg="blue.500"
  color="white"
  borderRadius="md"
  cursor="pointer"
  transition="all 0.2s"
  _hover={{
    bg: 'blue.600',
    transform: 'translateY(-2px)',
    shadow: 'lg',
  }}
>
  悬停查看效果
</Box>

<Box
  p={4}
  borderWidth="2px"
  borderColor="gray.200"
  borderRadius="md"
  tabIndex={0}
  _focus={{
    borderColor: 'blue.500',
    shadow: 'outline',
  }}
>
  可聚焦的 Box
</Box>

<Box
  p={4}
  bg="blue.500"
  color="white"
  borderRadius="md"
  cursor="pointer"
  _active={{
    bg: 'blue.700',
    transform: 'scale(0.98)',
  }}
>
  点击查看效果
</Box>

<Box
  w={{
    base: '100%',
    md: '50%',
    lg: '25%',
  }}
  p={{
    base: 2,
    md: 4,
    lg: 6,
  }}
>
  响应式 Box
</Box>

<Box display={{ base: 'block', md: 'none' }}>
  仅在移动端显示
</Box>

<Box display={{ base: 'none', md: 'block' }}>
  仅在桌面端显示
</Box>

<Box
  as="button"
  p={4}
  bg="blue.500"
  color="white"
  borderRadius="md"
  _hover={{ bg: 'blue.600' }}
>
  作为按钮使用
</Box>

<Box
  as="a"
  href="#"
  p={4}
  color="blue.500"
  _hover={{ textDecoration: 'underline' }}
>
  作为链接使用
</Box>

<Box
  as="section"
  p={8}
  bg="gray.50"
>
  作为 section 使用
</Box>

<Box p={4} bg="gray.100">
  <Box p={4} bg="white" borderRadius="md">
    <Box fontWeight="bold" mb={2}>
      标题
    </Box>
    <Box color="gray.600">
      内容
    </Box>
  </Box>
</Box>

<Box position="relative" h="200px" bg="gray.100">
  <Box position="absolute" top={4} right={4} bg="blue.500" color="white" p={2}>
    绝对定位元素
  </Box>
</Box>

<Box
  position="fixed"
  bottom={0}
  left={0}
  right={0}
  bg="white"
  p={4}
  shadow="lg"
>
  固定底部栏
</Box>

<Box
  position="sticky"
  top={0}
  bg="white"
  p={4}
  shadow="sm"
  zIndex="sticky"
>
  粘性导航栏
</Box>

<Box overflow="hidden" maxH="100px">
  内容超出时隐藏
</Box>

<Box overflow="auto" maxH="200px">
  内容超出时滚动
</Box>

<Box overflowX="auto" whiteSpace="nowrap">
  水平滚动内容
</Box>

function Avatar({ src, name, size = 'md' }) {
  const sizes = {
    sm: '32px',
    md: '48px',
    lg: '64px',
  }
  
  return (
    <Box
      w={sizes[size]}
      h={sizes[size]}
      borderRadius="full"
      overflow="hidden"
      bg="gray.200"
    >
      {src ? (
        <Box as="img" src={src} alt={name} w="100%" h="100%" objectFit="cover" />
      ) : (
        <Box
          display="flex"
          alignItems="center"
          justifyContent="center"
          h="100%"
          fontWeight="bold"
          color="gray.500"
        >
          {name.charAt(0)}
        </Box>
      )}
    </Box>
  )
}

function Tag({ children, colorScheme = 'gray' }) {
  return (
    <Box
      display="inline-block"
      px={2}
      py={1}
      fontSize="sm"
      fontWeight="medium"
      borderRadius="md"
      bg={`${colorScheme}.100`}
      color={`${colorScheme}.800`}
    >
      {children}
    </Box>
  )
}

<Box as="hr" border="none" h="1px" bg="gray.200" my={4} />