Container 容器组件 #

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

function Example() {
  return (
    <Container maxW="container.lg">
      内容居中，最大宽度 1024px
    </Container>
  )
}

<Container>
  默认容器，最大宽度 container.xl
</Container>

<Container maxW="container.sm">
  小型容器 (640px)
</Container>

<Container maxW="container.md">
  中型容器 (768px)
</Container>

<Container maxW="container.lg">
  大型容器 (1024px)
</Container>

<Container maxW="container.xl">
  超大容器 (1280px)
</Container>

<Container maxW="container.md" centerContent>
  <Box p={4} bg="blue.500" color="white">
    内容垂直居中
  </Box>
</Container>

<Container maxW="container.lg" p={4}>
  内边距 16px
</Container>

<Container maxW="container.lg" py={8} px={4}>
  垂直内边距 32px，水平内边距 16px
</Container>

<Container maxW="800px">
  自定义最大宽度 800px
</Container>

<Container maxW="80%">
  最大宽度 80%
</Container>

function PageLayout() {
  return (
    <Box>
      <Box as="header" bg="blue.500" color="white" p={4}>
        <Container maxW="container.lg">
          Header
        </Container>
      </Box>
      
      <Container maxW="container.lg" py={8}>
        主要内容区域
      </Container>
      
      <Box as="footer" bg="gray.100" p={4}>
        <Container maxW="container.lg">
          Footer
        </Container>
      </Box>
    </Box>
  )
}

function BlogPost({ title, content }) {
  return (
    <Container maxW="container.md" py={8}>
      <Heading as="h1" size="2xl" mb={4}>
        {title}
      </Heading>
      <Box
        fontSize="lg"
        lineHeight="tall"
        dangerouslySetInnerHTML={{ __html: content }}
      />
    </Container>
  )
}

function FormPage() {
  return (
    <Container maxW="container.sm" py={8}>
      <Box bg="white" p={8} borderRadius="lg" shadow="md">
        <Heading size="lg" mb={6}>登录</Heading>
        <VStack spacing={4}>
          <FormControl>
            <FormLabel>邮箱</FormLabel>
            <Input type="email" />
          </FormControl>
          <FormControl>
            <FormLabel>密码</FormLabel>
            <Input type="password" />
          </FormControl>
          <Button colorScheme="blue" w="full">登录</Button>
        </VStack>
      </Box>
    </Container>
  )
}

<Container
  maxW={{
    base: 'container.sm',
    md: 'container.md',
    lg: 'container.lg',
  }}
>
  响应式最大宽度
</Container>

<Container maxW="container.lg" py={8}>
  <VStack spacing={8} align="stretch">
    <Box bg="blue.500" p={4}>区块 1</Box>
    <Box bg="green.500" p={4}>区块 2</Box>
    <Box bg="red.500" p={4}>区块 3</Box>
  </VStack>
</Container>

<Container maxW="container.xl" py={8}>
  <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6}>
    <Box bg="blue.500" p={4}>卡片 1</Box>
    <Box bg="green.500" p={4}>卡片 2</Box>
    <Box bg="red.500" p={4}>卡片 3</Box>
  </SimpleGrid>
</Container>

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

function SectionContainer({ children, ...props }) {
  return (
    <Container
      maxW="container.lg"
      py={{ base: 8, md: 16 }}
      px={{ base: 4, md: 8 }}
      {...props}
    >
      {children}
    </Container>
  )
}

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

const theme = extendTheme({
  components: {
    Container: {
      baseStyle: {
        maxW: 'container.lg',
        px: { base: 4, md: 8 },
      },
      variants: {
        narrow: {
          maxW: 'container.md',
        },
        wide: {
          maxW: 'container.xl',
        },
      },
    },
  },
})

function LandingPage() {
  return (
    <Box>
      <Box bg="blue.600" color="white">
        <Container maxW="container.lg" py={20}>
          <VStack spacing={6}>
            <Heading size="2xl" textAlign="center">
              构建更好的产品
            </Heading>
            <Text fontSize="xl" textAlign="center" maxW="600px">
              我们提供最先进的解决方案，帮助您的业务快速增长
            </Text>
            <Button size="lg" colorScheme="whiteAlpha">
              立即开始
            </Button>
          </VStack>
        </Container>
      </Box>
      
      <Container maxW="container.lg" py={16}>
        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
          <FeatureCard
            icon={<Icon as={FiZap} />}
            title="快速"
            description="闪电般的加载速度"
          />
          <FeatureCard
            icon={<Icon as={FiShield} />}
            title="安全"
            description="企业级安全保障"
          />
          <FeatureCard
            icon={<Icon as={FiTrendingUp} />}
            title="增长"
            description="助力业务增长"
          />
        </SimpleGrid>
      </Container>
    </Box>
  )
}

function DocsPage() {
  return (
    <Container maxW="container.md" py={8}>
      <Breadcrumb mb={6}>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">文档</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem isCurrentPage>
          <BreadcrumbLink href="#">入门指南</BreadcrumbLink>
        </BreadcrumbItem>
      </Breadcrumb>
      
      <Heading mb={4}>入门指南</Heading>
      <Text mb={8} color="gray.600">
        本指南将帮助你快速上手
      </Text>
      
      <VStack spacing={8} align="stretch">
        <Section title="安装">
          <Code>npm install package</Code>
        </Section>
        <Section title="配置">
          <Text>配置说明...</Text>
        </Section>
      </VStack>
    </Container>
  )
}