响应式设计 #

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

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

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

function ResponsiveComponent() {
  const variant = useBreakpointValue({
    base: 'outline',
    md: 'solid',
    lg: 'ghost'
  })

  const size = useBreakpointValue({
    base: 'sm',
    md: 'md',
    lg: 'lg'
  })

  return (
    <Button variant={variant} size={size}>
      响应式按钮
    </Button>
  )
}

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

function MediaQueryExample() {
  const [isLargerThan768] = useMediaQuery('(min-width: 768px)')
  const [isMobile] = useMediaQuery('(max-width: 480px)')

  return (
    <Box>
      {isLargerThan768 ? '桌面端' : '移动端'}
      {isMobile && <MobileNavigation />}
    </Box>
  )
}

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

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

<Show above="md">
  仅在 md 以上显示
</Show>

<Hide below="lg">
  在 lg 以下隐藏
</Hide>

<SimpleGrid
  columns={{
    base: 1,
    sm: 2,
    md: 3,
    lg: 4
  }}
  spacing={6}
>
  {items.map((item) => (
    <Card key={item.id}>{item.content}</Card>
  ))}
</SimpleGrid>

function ResponsiveNav() {
  const isDesktop = useBreakpointValue({ base: false, lg: true })

  return (
    <Flex justify="space-between" p={4}>
      <Logo />
      {isDesktop ? (
        <HStack spacing={8}>
          <Link href="#">首页</Link>
          <Link href="#">功能</Link>
          <Link href="#">价格</Link>
        </HStack>
      ) : (
        <IconButton icon={<HamburgerIcon />} aria-label="菜单" />
      )}
    </Flex>
  )
}

<SimpleGrid
  columns={{ base: 1, md: 2 }}
  spacing={4}
>
  <FormControl>
    <FormLabel>姓名</FormLabel>
    <Input />
  </FormControl>
  <FormControl>
    <FormLabel>邮箱</FormLabel>
    <Input type="email" />
  </FormControl>
  <FormControl colSpan={{ base: 1, md: 2 }}>
    <FormLabel>地址</FormLabel>
    <Input />
  </FormControl>
</SimpleGrid>

const theme = extendTheme({
  breakpoints: {
    sm: '480px',
    md: '768px',
    lg: '992px',
    xl: '1280px',
  },
})