Style Props 样式属性 #

<Box
  p={4}
  m={2}
  bg="blue.500"
  color="white"
  borderRadius="md"
>
  使用 Style Props 的 Box
</Box>

<Box m={4}>四边外边距 16px</Box>
<Box mt={2}>上外边距 8px</Box>
<Box mx="auto">水平居中</Box>
<Box my={4}>垂直外边距 16px</Box>

<Box p={4}>四边内边距 16px</Box>
<Box pt={2}>上内边距 8px</Box>
<Box px={6}>水平内边距 24px</Box>
<Box py={3}>垂直内边距 12px</Box>

<Box w="100%">宽度 100%</Box>
<Box w="300px">固定宽度 300px</Box>
<Box w="50%">宽度 50%</Box>
<Box maxW="container.lg">最大宽度 1024px</Box>
<Box minW="200px">最小宽度 200px</Box>

<Box h="100vh">全屏高度</Box>
<Box h="200px">固定高度 200px</Box>
<Box minH="50vh">最小高度 50vh</Box>
<Box maxH="400px">最大高度 400px</Box>

<Box bg="blue.500">蓝色背景</Box>
<Box bg="tomato">自定义颜色</Box>
<Box bg="#ff0000">十六进制颜色</Box>
<Box bg="rgb(255, 0, 0)">RGB 颜色</Box>
<Box bg="linear-gradient(to right, #ff0000, #0000ff)">渐变背景</Box>

<Text color="gray.500">灰色文字</Text>
<Text color="blue.500">蓝色文字</Text>
<Text color="white">白色文字</Text>

<Text fontSize="xs">超小文字 (12px)</Text>
<Text fontSize="sm">小号文字 (14px)</Text>
<Text fontSize="md">中等文字 (16px)</Text>
<Text fontSize="lg">大号文字 (18px)</Text>
<Text fontSize="xl">超大文字 (20px)</Text>
<Text fontSize="2xl">标题文字 (24px)</Text>
<Text fontSize="3xl">大标题 (30px)</Text>

<Text fontWeight="normal">正常字重</Text>
<Text fontWeight="medium">中等字重</Text>
<Text fontWeight="semibold">半粗字重</Text>
<Text fontWeight="bold">粗体字重</Text>

<Text textAlign="left">左对齐</Text>
<Text textAlign="center">居中对齐</Text>
<Text textAlign="right">右对齐</Text>
<Text textAlign="justify">两端对齐</Text>

<Text textDecoration="none">无装饰</Text>
<Text textDecoration="underline">下划线</Text>
<Text textDecoration="line-through">删除线</Text>

<Box display="block">块级元素</Box>
<Box display="inline">行内元素</Box>
<Box display="inline-block">行内块元素</Box>
<Box display="flex">弹性容器</Box>
<Box display="grid">网格容器</Box>
<Box display="none">隐藏元素</Box>

<Flex
  direction="row"
  justify="center"
  align="center"
  wrap="wrap"
  gap={4}
>
  <Box>项目 1</Box>
  <Box>项目 2</Box>
  <Box>项目 3</Box>
</Flex>

<Grid
  templateColumns="repeat(3, 1fr)"
  templateRows="auto"
  gap={4}
>
  <GridItem>项目 1</GridItem>
  <GridItem>项目 2</GridItem>
  <GridItem>项目 3</GridItem>
</Grid>

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

<Box borderTop="2px solid" borderTopColor="blue.500">
  上边框
</Box>

<Box borderLeft="4px solid" borderLeftColor="green.500">
  左边框
</Box>

<Box borderRadius="none">无圆角</Box>
<Box borderRadius="sm">小圆角</Box>
<Box borderRadius="md">中等圆角</Box>
<Box borderRadius="lg">大圆角</Box>
<Box borderRadius="xl">超大圆角</Box>
<Box borderRadius="full">完全圆形</Box>

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

<Box position="static">静态定位</Box>
<Box position="relative">相对定位</Box>
<Box position="absolute">绝对定位</Box>
<Box position="fixed">固定定位</Box>
<Box position="sticky">粘性定位</Box>

<Box position="absolute" top={0} left={0}>
  左上角
</Box>

<Box position="absolute" top={4} right={4}>
  右上角偏移
</Box>

<Box position="fixed" bottom={0} left={0} right={0}>
  固定底部
</Box>

<Box overflow="visible">可见溢出</Box>
<Box overflow="hidden">隐藏溢出</Box>
<Box overflow="scroll">滚动溢出</Box>
<Box overflow="auto">自动溢出</Box>
<Box overflowX="auto" overflowY="hidden">
  水平滚动
</Box>

<Box opacity={1}>完全不透明</Box>
<Box opacity={0.8}>80% 不透明</Box>
<Box opacity={0.5}>50% 不透明</Box>
<Box opacity={0}>完全透明</Box>

<Box
  bg="blue.500"
  color="white"
  _hover={{
    bg: 'blue.600',
    transform: 'translateY(-2px)'
  }}
>
  悬停效果
</Box>

<Input
  focusBorderColor="blue.500"
  _focus={{
    borderColor: 'blue.500',
    boxShadow: '0 0 0 1px blue.500'
  }}
/>

<Button
  _active={{
    bg: 'blue.700',
    transform: 'scale(0.98)'
  }}
>
  点击效果
</Button>

<Button
  isDisabled
  _disabled={{
    bg: 'gray.300',
    cursor: 'not-allowed'
  }}
>
  禁用状态
</Button>

<Box
  p={4}
  bg="white"
  borderRadius="md"
  cursor="pointer"
  transition="all 0.2s"
  _hover={{
    shadow: 'md',
    transform: 'translateY(-2px)'
  }}
  _active={{
    transform: 'translateY(0)'
  }}
  _focus={{
    outline: 'none',
    ring: '2px',
    ringColor: 'blue.500'
  }}
>
  交互式卡片
</Box>

<Box
  p={{
    base: 2,
    md: 4,
    lg: 6
  }}
  fontSize={{
    base: 'md',
    md: 'lg',
    lg: 'xl'
  }}
>
  响应式样式
</Box>

<Box
  w={['100%', '50%', '25%']}
  p={[2, 4, 6]}
>
  数组语法响应式
</Box>